IE 7, overflow:visible funtioniert bei Seitenverkleinerung nicht
2 
molily
IE 7, overflow:visible funtioniert bei Seitenverkleinerung nicht
Hi
ich bin dabei, eine Website zu entwerfen und habe ein Problem mit der Darstellung der Navigation im IE 7 unter Windows XP.
Wenn ich die Seite verkleinere, verschwinden meine Menüunterpunkte hinter dem Text. Die Navigation ist mit overflow:visible ausgezeichnet, hat eine Breiten- und Höhenangabe, das Dokument und CSS sind validiert.
Der Aufbau der Seite ist:
<div id="head">
<div id="navi">
<div id ="text">
CSS:
* {
margin : 0;
padding : 0;
}
body {
font-size : 100.01%;
font-family : Tahoma, sans-serif, Verdana, Arial, Helvetica, sans-serif;
font-style : normal;
font-weight : normal;
text-decoration : none;
text-align : center;
padding : 1em 2em;
width : 100%;
height : 100%;
}
#head, #navi, #text {
text-align : left;
margin-right : auto;
margin-left : auto;
width : 80%;
}
#navi {
overflow : visible;
min-height : 1em;
}
#navi ul {
list-style-type : none;
margin-left : 8em;
height : 2.5em;
}
#navi li, #navi li a {
line-height : 1.2em;
display : inline;
float : left;
}
Anzusehen ist das Ganze unter:
http://www.dorettehugo.de/dsb/index.html
Kann mir jemand von euch weiterhelfen? Ich finde den Fehler nicht.
Gruß, Susanne
-
Wenn ich die Seite verkleinere, verschwinden meine Menüunterpunkte hinter dem Text. Die Navigation ist mit overflow:visible ausgezeichnet
Gut, das ist der Standardwert.
hat eine Breiten- und Höhenangabe
Warum eine Höhenangabe? Ich hätte die Höhe dynamisch gelassen und stattdessen Abstände definiert.
#navi {
overflow : visible;
min-height : 1em;
}Versuche hier mal das Gegenteil: overflow:hidden;
Das führt dazu, dass das Element so hoch ist, wie alle floatenden Boxen darin es erfordern - sprich, es werden alle float-Boxen eingeschlossen werden.Hintergrund: overflow:hidden erzeugt einen Block Formatting Context bzw. ein Element mit hasLayout im IE. Diese Eigenschaften sind für den Effekt verantwortlich.
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#wunderwaffe-overflow
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#internet-explorer#navi li, #navi li a {
line-height : 1.2em;
display : inline;
float : left;
}Hat es einen Grund, warum du beiden display:inline *und* float:left gibst?
Üblicherweise sind das zwei verschiedene Möglichkeiten für eine horizontale Navigation - entweder bekommen die lis display:inline, wodurch eine Darstellung in einer Zeile schon gegeben ist, oder sie bleiben auf display:list-item und man floatet sie. Die a-Elemente haben ohnehin display:inline und man gibt ihnen ab und zu höchstens display:block.
Mathias
-
Hat es einen Grund, warum du beiden display:inline *und* float:left gibst?
Üblicherweise sind das zwei verschiedene Möglichkeiten für eine horizontale Navigation - entweder bekommen die lis display:inline, wodurch eine Darstellung in einer Zeile schon gegeben ist, oder sie bleiben auf display:list-item und man floatet sie. Die a-Elemente haben ohnehin display:inline und man gibt ihnen ab und zu höchstens display:block.
zusätzlich kann man damit einen bug umgehen - das ist hier aber scheinbar nicht relevant
-
Hi
zusätzlich kann man damit einen bug umgehen - das ist hier aber scheinbar nicht relevant
Deswegen habe ich es nicht gemacht, aber der Effekt ist erwünscht. Vielen Dank für deinen Hinweis.
Gruß, Susanne
-
-
Hallo Mathias
Versuche hier mal das Gegenteil: overflow:hidden;
Das führt dazu, dass das Element so hoch ist, wie alle floatenden Boxen darin es erfordern - sprich, es werden alle float-Boxen eingeschlossen werden.Vielen Dank, genau daran lag es.
Hintergrund: overflow:hidden erzeugt einen Block Formatting Context bzw. ein Element mit hasLayout im IE. Diese Eigenschaften sind für den Effekt verantwortlich.
Hat es einen Grund, warum du beiden display:inline *und* float:left gibst?
Ja, die Anleitung von Self HTML für den Aufbau einer horizontalen Navigation.
Bin ich froh, das es jetzt klappt.
Gruß, Susanne
-