Hallo, ich habe beim Umschalten des DOCTYPE einer Webseite von HTML 4 Transitional auf HTML 5 einen merkwürdigen Effekt erlebt, den ich gerne verstehen würde. In einem Fiddle konnte ich das halbwegs kompakt nachstellen (-> problematische Seite). Die Farben habe ich etwas knalliger gemacht und die div-eritis der alten Seite auf semantisch geändert. Angesichts der Minimalisierung fehlt natürlich alles, was für eine Webseite sonst so nötig ist (auch hrefs bei den Links). ~~~html <header> <nav id="mainNav"> <ul> <li><a>Dings</a></li> <li><a>Bums</a></li> </ul> </nav> <nav id="subNav"> Hier wäre eine Sub-Navigation, die habe ich weggelassen </nav> </header> ~~~ ~~~css header * { padding: 0; margin: 0; } nav { display: inline-block; /* Ja ich weiß, inline-block ist seltsam. Ist historisch entstanden */ width: 100%; font: bold 13px Verdana,Arial,Helvetica,sans-serif; box-shadow: 4px 4px 4px 0px rgba(50,50,50,0.5); } #mainNav { background-color:#069; } #subNav { background-color:#fb7; } nav ul { float:right; } nav li { display: inline-block; } nav a { display: block; padding: 3px 10px; line-height:22px } nav a:hover { background-color: red; } ~~~ Der merkwürdige Effekt besteht darin, dass die beiden nav-Zeilen im HTML 4 Transitional Modus bündig aneinander liegen, mit HTML 4 Strict oder Html 5 aber auf einmal einen Abstand von ca 5 Pixeln bekommen. Nimmt man den float:right für nav ul weg, wird er kleiner (2 Pixel). Ein Problem scheint auf jeden Fall das display:inline-block des nav Elementes zu sein, was irgendwer in den Originalcode der Seite mal einbaute. Mache ich daraus display:block, ist der Spuk weg. Aber trotzdem würde ich gerne verstehen, wie das zu Stande kommt. Was hat sich zwischen HTML 4 Transitional und Strict bzw. HTML5 geändert, um das zu bewirken? Kann mich jemand erleuchten? _Rolf_

Hallo, ich habe beim Umschalten des DOCTYPE einer Webseite von HTML 4 Transitional auf HTML 5 einen merkwürdigen Effekt erlebt, den ich gerne verstehen würde. In einem Fiddle konnte ich das halbwegs kompakt nachstellen (-> problematische Seite). Die Farben habe ich etwas knalliger gemacht und die div-eritis der alten Seite auf semantisch geändert. Angesichts der Minimalisierung fehlt natürlich alles, was für eine Webseite sonst so nötig ist (auch hrefs bei den Links). ~~~html <header> <nav id="mainNav"> <ul> <li><a>Dings</a></li> <li><a>Bums</a></li> </ul> </nav> <nav id="subNav"> Hier wäre eine Sub-Navigation, die habe ich weggelassen </nav> </header>~~~ ~~~css header * { padding: 0; margin: 0; } nav { display: inline-block; /* Ja ich weiß, inline-block ist seltsam. Ist historisch entstanden */ width: 100%; font: bold 13px Verdana,Arial,Helvetica,sans-serif; box-shadow: 4px 4px 4px 0px rgba(50,50,50,0.5); } #mainNav { background-color:#069; } #subNav { background-color:#fb7; } nav ul { float:right; } nav li { display: inline-block; } nav a { display: block; padding: 3px 10px; line-height:22px } nav a:hover { background-color: red; } ~~~ Der merkwürdige Effekt besteht darin, dass die beiden nav-Zeilen im HTML 4 Transitional Modus bündig aneinander liegen, mit HTML 4 Strict oder Html 5 aber auf einmal einen Abstand von ca 5 Pixeln bekommen. Nimmt man den float:right für nav ul weg, wird er kleiner (2 Pixel). Ein Problem scheint auf jeden Fall das display:inline-block des nav Elementes zu sein, was irgendwer in den Originalcode der Seite mal einbaute. Mache ich daraus display:block, ist der Spuk weg. Aber trotzdem würde ich gerne verstehen, wie das zu Stande kommt. Was hat sich zwischen HTML 4 Transitional und Strict bzw. HTML5 geändert, um das zu bewirken? Kann mich jemand erleuchten? _Rolf_