nicht angemeldet
Box-Modell - wie lösen?
Der MartinHallo!
Ich habe auf dieser Testseite eine Navigation, deren "a"-, "li"- und "ul"-Elementen ich padding-/margin-Werte zuweise (danke @ Gunnar Bittersmann!).
Nun hat ja leider der IE Probleme mit der Addition der Werte (Box-Modell), sodass mir dort die Navi-Bestandteile über das div nach unten rausragen.
(Weiters ist auch Kopf- und Fusszeile durch padding beim "p"-Element im IE höher als in den anderen Browsern.)
Trotz vielem Herumlesen und Probieren komm ich nicht drauf, was ich in meinem Fall hier machen bzw. zusätzlich codieren muss.
(Anmerkung: falls der strict-Doctype ein Thema ist: diesen würde ich nach Möglichkeit behalten wollen da ich noch Deckkraft-Regelungen einbaue)
Danke für eure Hilfe!
CSS-Code:
------------------------------------------------~~~css
#navi {
float: left;
height: 655px;
width: 160px;
padding: 0;
margin: 0 0 0.5em 0;
}
#navi ul {
margin-bottom: 2.65em;
}
#navi ul li {
width: 160px;
margin-bottom: 0.5em;
text-align: center;
list-style: none;
border: 1px solid #000;
}
#navi a {
padding: 0.5em;
display: block;
}
HTML-Code:
\------------------------------------------------
~~~html
<div id="navi">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">E-MAIL</a></li>
</ul>
<ul>
<li><a href="#">HOCHZEIT</a></li>
<li><a href="#">MENSCHEN</a></li>
<li><a href="#">KINDER</a></li>
<li><a href="#">EROTIK</a></li>
<li><a href="#">TIERE</a></li>
<li><a href="#">NATUR</a></li>
<li><a href="#">ALLERLEI</a></li>
<li><a href="#">SERIEN</a></li>
</ul>
<ul>
<li><a href="#">ÜBER MICH</a></li>
<li><a href="#">DEIN SHOOTING</a></li>
</ul>
<ul>
<li><a href="#">LINKS</a></li>
<li><a href="#">GÄSTEBUCH</a></li>
</ul>
</div>
LG, Jürgen
-
Hallo Jürgen,
Nun hat ja leider der IE Probleme mit der Addition der Werte (Box-Modell), sodass mir dort die Navi-Bestandteile über das div nach unten rausragen.
nein, nicht wirklich. Der IE6 wendet das Box Model korrekt an, wenn du ihn im standardkonformen Modus betreibst. Nur im Quirks-Mode verhält er sich wie ein IE5. Das willst du aber nicht.
Und der IE5 kennt ausschließlich das falsche[1] Box-Model. Aber willst du wirklich den Aufwand treiben, dem IE5 noch seine Extrawürste vorzusetzen? Wer den benutzt (ich zum Beispiel), der sollte um die Fehler wissen und sie billigend in Kauf nehmen.(Weiters ist auch Kopf- und Fusszeile durch padding beim "p"-Element im IE höher als in den anderen Browsern.)
Padding ist normalerweise unproblematisch. Bei margin gibt es ab und zu Unterschiede, weil der IE mit Collapsing Margins nicht korrekt[2] umgeht.
Trotz vielem Herumlesen und Probieren komm ich nicht drauf, was ich in meinem Fall hier machen bzw. zusätzlich codieren muss.
(Anmerkung: falls der strict-Doctype ein Thema ist: diesen würde ich nach Möglichkeit behalten wollen da ich noch Deckkraft-Regelungen einbaue)Hä?
HTML-Code:
<div id="navi">
<ul>
<li><a href="#">HOME</a></li>Das Wesentliche, nämlich deinen DOCTYPE, verschweigst du uns hier. So long, Martin [1] Was heißt falsch: Ich finde die IE5-Interpretation des Box Models, auch wenn sie dem offiziellen Standard widerspricht, eigentlich richtiger. [2] Ich bin immer noch überzeugt, dass die meim W3C so was wie Collapsing Margins nur erfunden haben, um die Leute zu ärgern. -- Der Mensch denkt, Gott lenkt. Der Mensch dachte, Gott lachte.-
»» (Anmerkung: falls der strict-Doctype ein Thema ist: diesen würde ich nach Möglichkeit behalten wollen da ich noch Deckkraft-Regelungen einbaue)
Hä?
...
Das Wesentliche, nämlich deinen DOCTYPE, verschweigst du uns hier.Er steht über Deinem Hä? ;-)))
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Der IE6 wendet das Box Model korrekt an, wenn du ihn im standardkonformen Modus betreibst.
Bin ich mit dem strict-doctype nicht im standardkonformen Modus?
Ausserdem hab ich auch mit IE7 das Problem, der IE-Net-Renderer zeigt auch beim IE6 dasselbe an.
-
-
Hi juewi,
eine Frage, die sich mir aufdraengt: Warum hast Du denn mehrere Listen in der Navigation? Ich sehe da eine Liste von Links, die daher auch _eine_ Liste von Links sein koennte. Wenn sie das nicht sein soll, weil Du etwa verschiedene Kategorien von Links unterscheiden willst, dann sehe ich da immer noch eine Liste von Listen von Links. In jedem Falle die Frage: Wozu das <div>-Element?
Wie auch immer, ob nun Liste oder Div - wenn Du eine feste Hoehe vorgibst, denn musste Du damit rechnen, dass z.B. durch groessere Schriftgroesse der Inhalt nicht reinpasst.
Mein Eindruck: Du hast keine CSS-, sondern eine konzeptionelle Frage. Wie soll die Navigation (browserunabhaengig) - etwa bei verschiedenen Schriftgroessen - aussehen? Dynamisch wachsen oder abgeschnitten werden? Wenn Du weisst, was Du willst, dann wird es nicht schwierig sein, das umzusetzen, notfalls mit ner Weiche fuer den IE.
Viele Gruesse,
der Bademeister-
In jedem Falle die Frage: Wozu das <div>-Element?
Denkfehler von mir. JEtzt gibts nur mehr ein ul-Element.
Wie auch immer, ob nun Liste oder Div - wenn Du eine feste Hoehe vorgibst, denn musste Du damit rechnen, dass z.B. durch groessere Schriftgroesse der Inhalt nicht reinpasst.
Mein Eindruck: Du hast keine CSS-, sondern eine konzeptionelle Frage. Wie soll die Navigation (browserunabhaengig) - etwa bei verschiedenen Schriftgroessen - aussehen? Dynamisch wachsen oder abgeschnitten werden? Wenn Du weisst, was Du willst, dann wird es nicht schwierig sein, das umzusetzen, notfalls mit ner Weiche fuer den IE.
Da meine Seite quasi null Information und auch dementsprechend wenig Text, dafür überwiegende Fotos enthalten wird ist das mal sekundär für mich. Aber danke für die Anregung.
LG, Jürgen
-
-
Hi,
das ist kein padding Problem, sondern ein whitespace bug in list-items
im IE.Füge einfach ein Leerzeichen vor dem schließenden </a> Tag in
Deine List-Items ein. Das sollte es eigentlich tun.gruez
kuhn-
das ist kein padding Problem, sondern ein whitespace bug in list-items
im IE.Füge einfach ein Leerzeichen vor dem schließenden </a> Tag in
Deine List-Items ein. Das sollte es eigentlich tun.Ja!!! Das isses! Danke Dir! (Woher weiss man sowas nur?)
Grundsätzlich bin ich so schon glücklich aber wenn ihr die Testseite in FF, IE und Safari anschaut, endet das "Gästebuch" verschieden hoch im ul-Element sodass der Abstand zur Fusszeile immer verschieden ist.
-> Muss ich das hinnehmen oder kann ich das angemessen bereinigen?
LG, Jürgen
-
-
(Weiters ist auch Kopf- und Fusszeile durch padding beim "p"-Element im IE höher als in den anderen Browsern.)
Wenn Du das unnötige <br> im #mitte div entfernst, stimmt die Fußleistenhöhe.
Die Kopfzeile sieht bei mir überall gleich aus (FF 3, Opera9.62, IE6/7)gruez
kuhn-
»» (Weiters ist auch Kopf- und Fusszeile durch padding beim "p"-Element im IE höher als in den anderen Browsern.)
Wenn Du das unnötige <br> im #mitte div entfernst, stimmt die Fußleistenhöhe.
Die Kopfzeile sieht bei mir überall gleich aus (FF 3, Opera9.62, IE6/7)Danke, das irrtümliche <br> ist weg - ändert aber nichts am Fussleistenproblem, die höher ist als die Kopfleiste obwohl dieselben padding-Werte für "p" verwendet werden:
p#kopf { padding-top: 0.75em; padding-bottom: 0.75em; margin-bottom: 0.5em; } p#fuss { clear: both; padding-top: 0.75em; padding-bottom: 0.75em; }Versuche ich als Umweg ein div mit Höhe in px wird der p-Text wieder nicht vertikal zentriert *grmpf*.
Woran hakts da bzw. welchen Hack setz ich hier für den vermaledeiten IE.
LG, Jürgen
-
Woran hakts da bzw. welchen Hack setz ich hier für den vermaledeiten IE.
In erster Linie hakt das an den Breitenangaben von navigation, mitte und thumbs. Wenn Du da auf der einen Seite mit Pixeln die Weite angibst und andererseits margins in em dazuaddierst, wird das i.d.R. irgendwann zu Komplikationen führen. Spätestens wenn man die Schriftgröße ändert.
Da sollte dann m. Meinung nach wenigstens ein Element eine variable Größe haben.
gruez
kuhn
-
-
-
Danke mal an alle Hilfestellenden hier!
Ich habs (mit einigen holprigen Lösungen) mal für´s erste geschafft und bin doch recht stolz *g*
Mit den verschiedenen Abständen zur Fusszeile in FF, IE und Safari werde ich leben müssen und können.
Sollte jemanden ganz grober Mist auffallen, bitte um Meldung ;-)
LG, Jürgen
-
Falscher Link - hier der richtige ...
-