Paul: Element ist mit loose.dtd verschoben

Moin,
die selectbox (siehe unten) ist im IE8 nach unten verschoben (im FF, Opera, Chrome, Safari nicht). Wenn man das loose.dtd raus nimmt, sieht's auch gut aus. Aber wie bekomme ich das mit einer dtd-Angabe hin?

_____________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
          "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>testseite</title>  
<style type="text/css">  
.blaetterButton {  
  width:22px;  
  height:22px;  
}  
</style>  
</head>  
<body>  
      <input type="button" class="blaetterButton">  
      <select name="test" size="1" onchange="formular.submit();">  
          <option>1</option>  
          <option>222</option>  
          <option>3</option>  
          <option>4</option>  
      </select>  
      <input type="button" class="blaetterButton">  
  
</body>  
</html>

_____________________

Paul

  1. Hi!

    die selectbox (siehe unten) ist im IE8 nach unten verschoben (im FF, Opera, Chrome, Safari nicht). Wenn man das loose.dtd raus nimmt, sieht's auch gut aus. Aber wie bekomme ich das mit einer dtd-Angabe hin?

    Der IE8 hat ein eingebautes Debugging-Werkzeug, zu erreichen mit F12. Damit findest du zu jedem Element eine Layoutdarstellung, in der man dessen Größe und Ränder sieht. Firefox kennt sowas als Firebug-Add-On. Opera und Chrome haben ebenfalls solche Element-Inspektor-Tools, Safari weiß ich grad nicht. Du kannst dir also die Unterschiede im Rendering zwischen allen Browsern anschauen und abweichende Default-Werte durch explizites Setzen vereinheitlichen.

    Beim IE8 kommt noch die Kompatibilitätsansicht hinzu, die unter bestimmten Umständen eingeschaltet sein kann und das Render-Ergebnis beeinflusst. Die kann man im Browser oder durch ein Meta-Element (oder HTTP-Header) ausschalten.

    Lo!

    1. Hab für die selectBox noch vertical-align:top; gesetzt und jetzt stellt es auch der IE so dar wie ich es haben will.

  2. die selectbox (siehe unten) ist im IE8 nach unten verschoben (im FF, Opera, Chrome, Safari nicht). Wenn man das loose.dtd raus nimmt, sieht's auch gut aus. Aber wie bekomme ich das mit einer dtd-Angabe hin?

    Mache dir klar warum das so ist. Wenn du einen fehlerhaften DOCTYPE benutzt stelt der Browser die Seite im Quirksmodus dar. Von diesem Darstellungsmodus ist abzuraten, da u.a. der IE dort den Boxmodellbug hat.

    Wenn deine Seite in diesem Modus im IE "gut" aussieht, dann ist sie vermutlich fehlerhaft.

    Struppi.