Kleine Darstellungsabeweichung, warum?

moin,
guck mal hier was über die korrektheit der seite gesagt wird.
das css ist auch richtig asche

http://validator.w3.org/check?verbose=…edien/index.htm

http://jigsaw.w3.org/css-validator/…edien/index.htm

Zitat von sinus

Kann jemand sagen, wodurch diese Abweichung verursacht wird? Liegt es am Code der Webseite oder an der Eigenart des Browsers?

Das ist Ermessenssache, so gesehen könnte man sagen sowohl als auch... :wink:

FF macht aber hier zumindest keinen Fehler. Dazu braucht's jetzt leider 'nen kleinen CSS-Exkurs...
Hintergrund: Jeder Browser bringt einen Satz implementierter Standard-Styles mit, in dem Grundformatierungen für alle HTML-Elemente festgelegt sind, damit ein reines (ungestyltes) HTML-Dokument übersichtlich dargestellt werden kann (z.B. Abstände für Überschriften und Absätze, Listeneinzüge usw.) - lassen sich aber alle durch eigene Style-Angaben überschreiben.
Per Default haben nun bspw. Überschriften und Absätze einen Standardabstand nach oben und nach unten (margin-top und margin-bottom).
Und FF macht hier nichts anderes, als diesen oberen Abstand der H2 auch zum Einsatz zu bringen.
Ich könnte mir vorstellen, dass Opera die Seite genau so wie FF darstellen würde, wenn die Seite eine gültige DTD hätte. Die Opera-Macher haben sich nämlich mit der 7er-Version entschlossen, die Renderinginterpretation ihres Browsers an IE anzunähern (was ich ihnen heute noch krumm nehme). Somit zeigen diese beiden die Seite im ihnen jeweils eigenen Quirkmodus an.

Zu lösen wäre das Problem entweder dadurch, dass
a) das gefloatete Bild im Quellcode innerhalb der H2 steht (momentan darüber)
oder
b) im CSS für H2 "margin-top: 0" angebenen wird.

Zitat von bejot

moin,
guck mal hier was über die korrektheit der seite gesagt wird.
das css ist auch richtig asche

Da kann ich nur voll zustimmen. So gesehen kann man von Glück reden, dass es hier nicht mehr zersemmelt... :wink:
z.B. commonbasic.css (da wusste ganz klar jemand nicht, was er tat :shock:

<table><tr align="center"><td><P>body { margin-left:5; margin-top:5; margin-bottom:0; margin-right:0; color:#000000; background-color:#FFFFFF; } .tease, td, p { font:12px arial,helvetica,sans serif; } a { text-decoration:none; color:#000000 } a:hover { text-decoration: underline; } .small { font:11px arial,helvetica,sans serif } .smallln { font:11px arial,helvetica,sans serif; color: darkblue; } .titel-on { font:800 11px Trebuchet MS,helvetica,sans serif; color:#000000 } .titel-off { font:800 11px Trebuchet MS,helvetica,sans serif; color:#FFFFFF; } .titel, h1 { font:800 15px arial,helvetica,sans serif; } .fett, h2 { font:800 12px arial,helvetica,sans serif; margin-bottom: -10; } .text, .copy { font:12px arial,helvetica,sans serif; } .bg-grau { background-color:#CCCCCC } .bg-hellgrau { background-color:#E5E5E5 } .bg-rot { background-color:#990000 } .bg-hellrot { background-color:#CC3333 } .bg-weiss { background-color:#FFFFFF } .ticker { font:11px arial,helvetica,sans serif; color: darkred; }</P>


<P>.menuoff A&nbsp; {color:#EDF0F3}<BR>.menuon A&nbsp; {color:#FFFF00}<BR>.menuoff, .menuon {padding-top:1px;padding-left:5px;padding-right:5px;text-align:center}<BR>.ncnewsoff,<BR>.ncnewsoff A&nbsp; {color:#000080;}<BR>.ncnewsoff A.ncnewsgo {color:green;}<BR>.ncnewsoff A.ncnewsno {color:red;}<BR>.ncnewson&nbsp; {color:#FFFF00;background-color:#000080}<BR>.ncnewson A,<BR>.ncnewson A.ncnewsgo,<BR>.ncnewson A.ncnewsno {color:#FFFF00;}<BR>.trennung&nbsp;&nbsp; {width:1px;line-height:0px;font-size:0px;background-color:#B2C0D2}</P></td></tr></table>

Gruß
RF