nicht angemeldet
Hallo Alex,
Opera z.B. macht mir da noch Sorgen (siehe Screenshot: http://alex.ilosuna.org/img/screenshot_opera.gif)
Das scheint ein Bug zu sein. Ein Beispiel:
<div id="a"><p>bla</p><p>bla</p><p>bla</p></div>
<div id="b"><p>bla</p><p>bla</p><p>bla</p></div>
<div id="c"><p>bla</p><p>bla</p><p>bla</p></div>
#a, #b, #c {margin:0; padding:20px; color:#000;}
#a {background-color: #ffffbb;}
#b {background-color: #fffff0;}
#c {background-color: #ffffbb;}
Das führt im Opera 7.11 dazu, dass zwischen den div-Elementen Abstände zu sehen sind. Nach näherer Untersuchung wirst du feststellen, dass diese Abstände so groß sind wie das margin-bottom der p-Elemente innerhalb der div-Elemente. Dies kannst du wahrscheinlich nur dadurch unterbinden, indem du explizit margin-bottom auf 0 setzt und die Abstände zwischen den p-Elementen stattdessen mit padding-bottom realisierst. Beispielsweise:
p {margin:0; padding:0 0 10px 0;}
Abgesehen davon scheint mir der Code teilweise ziemlich überladen und komplex, wenig strukturelles/logisches Markup, massig div-Elemente (du wirst antworten, dass sie für das Layout nötig sind, jaja...).
#topnav .left ist beispielsweise in der Regel eine Überschrift.
<p> </p> lässt sich mit CSS lösen.
Wenn die Spalten leer bleiben, solltest du vielleicht <div class="left"> </div> usw. komplett heraus nehmen, die height-Angabe des Elternelements sollte die Höhe auch so sichern.
<b>User-Name:</b><br /><input type="text" name="username" /><br /><br /> ließe sich auch eleganter lösen, mit label (dann CSS-formatiert, display:block) und eventuell mit ul, beispielsweise:
<form><ul>
<li><label for="username">User-Name:</label> <input ... id="username"/></li>
...
Anstatt b-Elemente können je nach Kontext Strukturelemente wie Überschriften verwendet werden, ansonsten ist das strong-Element vorzuziehen.
<p><span class="small">...</span></p> -- Wenn dir jeweils kein bedeutungsreicherer Klassenname einfällt (small zielt auf die Präsentation ohne dahinterliegenden semantischen Grund), dann vielleicht eher .anmerkung, zumindest aber ist das span-Element i.d.R. überflüssig: <p class="small">...</p>
Hm, ich glaube nicht, dass verschachtelte div-Elemente die Threadstruktur unbedingt passend wiedergeben... Vergleiche die dieses Forums.
Das Stylesheet ließe sich m.M.n. effizienter, also kürzer aufbauen, sodass Wiederholungen möglichst vermieden werden, vor allem das ständige Wiederholen von font-family und font-size.
Wenn ich mich nicht irre sollte folgendes:
.reply:link { padding-left: 16px; color: #0000cc; text-decoration: none; font-weight: normal; background-image:url(img/reply.gif); background-repeat:no-repeat; background-position: top left; }
a.reply:visited { padding-left: 16px; color: #800080; text-decoration: none; font-weight: normal; background-image:url(img/reply.gif); background-repeat:no-repeat; background-position: top left; }
a.reply:hover { padding-left: 16px; color: #0000ff; text-decoration: underline; font-weight: normal; background-image:url(img/reply.gif); background-repeat:no-repeat; background-position: top left; }
a.reply:active { padding-left: 16px; color: #0000cc; text-decoration: none; font-weight: normal; background-image:url(img/reply.gif); background-repeat:no-repeat; background-position: top left; }
So abkürzbar sein:
a.reply {padding-left: 16px; font-weight: normal; background-image:url(img/reply.gif); background-repeat:no-repeat; background-position: top left;}
a.reply:link {color: #0000cc; text-decoration: none;}
a.reply:visited {color: #800080; text-decoration: none;}
a.reply:hover {color: #0000ff; text-decoration: underline;}
a.reply:active {color: #0000cc; text-decoration: none;}
Bitte arbeite noch einmal http://selfhtml.teamone.de/html/xhtml/unterschiede.htm durch, ich finde beispielsweise keine XML-Namensraumangabe. Statt des Metatags solltest du die Sprache über xml:lang="de" im html-Element angeben (in XHTML 1.0 zusätzlich lang="de").
Im Archiv findest du einiges darüber, wieso du momentan besser XHTML 1.0 anstatt 1.1 schreiben solltest.
Grüße,
Mathias