Wenn du XHTML1.1 über deine Dokumente schreibst heißt das, dass du bewusst nicht abwärtskompatibel sein willst. D.h., dass du deine Dokumente auch mit dem entsprechenden MIME-Type ausliefern müsstest.[1] Jeder noch so kleine Tippfehler würde in den Browsern dann nur noch zu einer Fehlermeldung führen. Ältere IEs können damit überhaupt nichts anfangen.
Dass das nicht der richtige Ansatz ist für das Web, wie wir es kennen, kann man inzwischen als Konsens betrachten. "Modern" wäre HTML5, mit XHTML1.1 bist du eher hinten dran.

Nimm für den Anfang XHTML 1.0, so wie es in dem Buch verwendet wird. Und beachte die Kompatibilitätsrichtlinien. Das Link-Element im Head ist ein "leeres Element".


[1]Im Moment lieferst du dein Dokument als text/html aus.


Nö, aber ich habe schon ein paar Dropdowns gesehen --und konnte mir nicht vorstellen, dass die Autoren deines Buches etwas anderes als ein weit verbreitetes Vorgehen verwenden.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

Nein.
Relative Positionierung ist nur sinnvoll für die li-Elemente der ersten Ebene. Warum, wird sicher in deinem Buch erklärt (ich strapaziere meine Kristallkugel gerade ziemlich).
Ansonsten wirf sie überall raus.

Und warum liest du nicht nach, wie es in deinem Buch gemacht wird?
Trial&Error funktioniert nicht bei CSS.

Unbedingt weg damit. Pfusch!

Einer der wichtigen Hinweise, die ich dir oben bereits gegeben habe, lautet:
Auch darüber kannst du dich bestimmt in deinem Buch informieren, ansonsten in unseren FAQ. [Eine (sinnvolle!) height-Angabe wäre möglich, ist aber nicht der beste Weg.]

Bitte nimm dir die Zeit, dir die Grundlagen zu erarbeiten.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

Leider ist das script nur sporadisch erklärt und viele Code-Zeilen bleiben unerläutert. Habe aber gerade entdeckt, dass bei der nochmaligen Auflistung des Gesamtscripts für #main clear:left gesetzt wurde (Clear wird in dem Buch nur am Ende in der CSS-Referenz erwähnt und wird ansonsten anscheinend nicht erläutert - steht jedenfalls nicht im Stichwortverzeichnis). Das tauchte im Script mit den Erläuterungen nicht auf. Konnte jetzt tatsächlich sogar alle position:relative; entfernen. Nur das die Main-Box jetzt wieder am unteren Rand der Menüleiste klebt und auf kein margin-top oder top reagiert.
Ist im Buch auch nicht nötig zu behandeln, da der main-text denselben Hintergrund hat, wie die Gesamtseite und der Abstand zur Menüleiste über padding gelöst wird.
Habe also daraufhin #main nochmal in ein Extra-div gepackt und dort ein padding angegeben, um #main etwas tiefer rutschen zu lassen.

Hatte ich bereits beherzigt und getan - nur nicht explizit erwähnt.

Das gesamte Problem entstand dadurch, dass im Buch alles am linken Rand ist und ich es auf meiner Seite zentrieren wollte und ich mich in meinen Versuchen immer weiter vom Buch entfernt habe. Vielleicht steckte der teufel ja in dem vergessenem clear:left.

Das liegt am Clear. Margin ist (fast) immer unwirksam, wenn ein Element Clear-Wirkung hat.
top ist ohne Positionierung sowieso wirkungslos.

Trial&Error... [Du hast übrigens nicht nur ein oberes Padding angegeben. Absicht?]

Was hast du getan?
Das ul-Element schließt die floatenden li-Elemente noch immer nicht ein. Nutz die Entwicklerwerkzeuge deines Browsers. Schau nach, welche Höhe für das ul-Element angezeigt wird.
Welche Methoden zum Einschließen von Floats sind in deinem Buch vorgestellt?

Du hast es mit diversen, nicht leicht verständlichen Konzepten in CSS zu tun (Collapsing Margins, Float, Clear, Positionierung ...). Da reicht dein Buch wohl nicht aus.

Wenn du tiefer einsteigen willst: Siehe meine Signatur. Wir erläutern all das, worauf du hier gestoßen bist. Das lässt sich aber nicht mal eben schnell in einem Forum wiedergeben.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

Nein, es war mir eher unwichtig, aber du hast recht, wenn ich genauer darüber nachdenke, ist padding-top die bessere Wahl.
Bis gestern war ich noch der Auffassung, dass ich die Aufgabe erfüllt hätte, wenn ich die <li> floate, dem #main ein clear zuordne und der #navigation eine feste Breite verpasse. Aber du hast mich eines Besseren belehrt.
Zunächst muss ich meine Anschuldigung zurücknehmen, clear würde in meinem Buch nicht behandelt, denn es wird sehr wohl im Zusammenhang mit float erklärt - tauchte eben nur nicht im Stichwortverzeichnis auf. Es ist schon eine Weile her, als ich das Buch von vorne bis hinten Schritt für Schritt durchgegangen bin und ich habe damals wohl auch nicht alles verstanden. Man muss so ein Buch nach einer gewissen Zeit wohl noch einmal lesen.
Nun, das Umschließen habe ich nun (glaube ich) verstanden, nachdem ich mir gestern Abend noch die entsprechende Stelle auf der Internetseite von LittleBoxes von Peter Müller durchgelesen habe (ein Buch, dass Du auch schon in einem anderen Thread, wie ich gelesen habe, zur Lektüre empfohlen hast).
Um auf Deine Frage zurückzukommen: In meinem Buch wird zunächst, NACH (nicht wie bei Peter Müller am Ende innerhalb) des umschließenden Divs eine <hr> eingefügt und diese gecleart. Die <hr> wird auch nicht ausgeblendet.
Weiter unten wird dann auch noch die overflow:hidden-Methode erklärt, aber in dem Zusammenhang, dass sonst die Hintergrundfarbe des umfließenden Textes nicht das ganze <div> umfasst, wenn das gefloatete Image aus dem <div> herausragt. Für die anderen beiden Methoden, die Peter Müller angibt, sind in dem Buch Verweise ins Internet angegeben.
In dem Dropdown-Menü-Beispiel aus meinem Buch wird nichts umschlossen, außer dass dem #main ein clear zugeordnet wird, aber auch das wird nur stillschweigend am Ende in das Script eingefügt.
Um meine floats nun zu umschließen, habe ich mich für die overflow:hidden-Methode entschieden.
Ja - ich habe auch schon in Deinem online-Einsteigerkurs geblättert.
Ich denke, Du bist eine gute, wenn auch strenge Lehrerin. Du sagst nicht einfach nur vor, sondern zeigst Wege auf, damit der Schüler selbst die Lösungen findet und auch finden muss. Fehler, die der Schüler auf diese Art korrigiert bekommt, macht er sicher nicht nochmal. Ich bin selber Lehrer und weiß das zu schätzen. Ich war gestern abend fix und alle nach soviel Input, und habe aber an diesem einen Tag wohl mehr verstanden, als vorher durch Wochen von Buchlektüre.

So wird nur #main unter die Floats verschoben; das ul-Element bleibt weiterhin auf Null.
Nebenbei: In IE <= 7 werden die Floats tatsächlich eingeschlossen, weil die Breitenangabe hasLayout auslöst.
Lesestoff: Über hasLayout ? das Konzept des hasLayout im IE/Win | Deutsche Übersetzung (Achtung, keine leichte Kost. Nur noch relevant für IE <= 7.)

So werden wiederum die Floats nicht von ul eingeschlossen, nur der nachfolgende Inhalt unter die Floats verschoben.
Ein hr-Element innerhalb der ul ist aber nicht möglich, da ul nur li enthalten darf.

Das ist es eben, was mit "Einschließen" von Floats gemeint ist. Wenn ein Element die Floats nicht einschließt, sieht man den Hintergrund des Elements nicht, weil es auf Nullhöhe zusammenfällt. (Dazu Punkt 2 der FAQ)

Das ist kritisch in Verbindung mit einem Dropdown-Menü -- schließlich sollen überstehende Inhalte nicht abgeschnitten werden.
Bei dir wird nur deshalb nichts abgeschnitten, weil die Liste nicht Containing Block (noch so ein nicht einfaches Konzept) der abs. pos. Sublisten ist.
Sobald du die li-Elemente der ersten Ebene oder das ul relativ positionierst, siehst du nichts mehr von deinen Dropdowns.
Wenn du dein Menü auch für IE7 tauglich machen willst, wirst du diese relative Positionierung brauchen -- damit du Positionsangaben für die abs. pos. Sublisten machen kannst. Denn jetzt hast du wieder die Situation wie am Anfang: Du vertraust darauf, dass die Browser die abs. pos. Elemente an die richtige Stelle setzen. Das kann klappen, muss aber nicht.

Lange Rede: In deinem Fall wäre das sog. EasyClearing, angewendet auf ul, eine passende Methode zum Einschließen der Floats.

Bingo! Danke, dass du das so siehst. Wirklich, ich freu mich darüber. So macht es Spaß, zu helfen.
[Der absolut überwiegende Teil der Fragenden beschwert sich und will fertige Lösungen, aber bitte sofort.]

An deinem Beispiel kann man wunderbar sehen, warum CSS wirklich nicht einfach ist. Nur eine Menüzeile und ein Inhaltsbereich. Und trotzdem muss man man so viele CSS-Konzepte kennen, die man nicht intuitiv durch "Rumprobieren" begreifen kann.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken