IE7 macht Treppe aus Navigation
Fabian
- css
Hiho!
Ich habe eine horizontale Navigationsleiste aus einer Liste gebaut. Der FF zeigt das auf wunderschön an. Nur der IE7 (IE6 habe ich nicht mehr, deswegen weiß ich es nicht, vll könnte das jemand mal testen :) ) baut eine schöne Treppe daraus.
Wie kann ich dem Abhelfen?
http://www.ka-jungs.de/test/index.htm
CSS dazu:
http://www.ka-jungs.de/test/style.css
Danke und Greetz
Fabian
Hallo!
Ich habe gerade keinen IE zur Verfügung. Kann dir deshalb nur einen kleinen Tip geben.
IE6 habe ich nicht mehr, deswegen weiß ich es nicht, vll könnte das jemand mal testen :)
Den kannst du nachinstallieren: http://tredosoft.com/Multiple_IE.
ciao, ww
Nur als Hinweis: IE6 macht auch eine Treppe.
Schau mir das gleich mal an.
Es liegt an der CSS
.menu a {
float: left;
}
Wenn dieser Eintrag entfernt wird, zeigt IE alles untereinander an.
Es liegt an der CSS
.menu a {
float: left;
}Wenn dieser Eintrag entfernt wird, zeigt IE alles untereinander an.
Hallo Paul!
Ich glaube du hast da was falsch verstanden! Er soll es ja gerade NICHT untereinander anzeigen. Ich will ja eine horizontale Menuleiste!
Gruß
Fabian
Also ich hab die Lösung für mein horizontale Navigationsleiste mit Liste selbst gefunden. Da ich die Seite die ich oben verlinkt habe rausnehmen werde hier nochmal der (korrekte) Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<ul>
<li><a href="startseite.html">Startseite</a></li>
<li><a href="produkte.html">Produkte</a></li>
<li><a href="ueber_uns.html">Über Uns</a></li>
<li><a href="frage_und_antwort">Frage & Antwort</a></li>
<li><a href="seitenlandkarte.html">Seitenlandkarte</a></li>
<li><a href="suchen.html">Suchen</a></li>
<li><a href="english.html">English</a></li>
</ul>
</div>
</body>
</html>
Und das CSS:
.menu {
height: 27px;
font-size: 14px;
font-weight: bold;
color: #000000;
background-image: url(bilder/nav.jpg);
background-repeat: repeat-x;
}
.menu ul {
list-style-type: none;
}
.menu li {
display:inline;
}
.menu a {
float: left;
display: block;
padding-left: 10px;
padding-right: 10px;
line-height: 38px;
color: #666666;
}
.menu a:hover {
color: #000000;
background-image: url(bilder/nav_hov.jpg);
background-repeat: repeat-x;
}
Greetz
Fabian
Hallo
Nur zwei Anmerkungen:
.menu {
height: 27px;
Was passiert, wenn neue Menüpunkte hinzukommen oder das Browserfenster so schmal ist, dass nicht alle Menüpunkte in eine Zeile passen?
...
}.menu a {
float: left;
display: block;
Eigentlich sollten die betreffenden Elemente durch die Angabe von float
automatisch zu Blockelementen werden, wodurch die Angabe von display: block;
obsolet würde.
...
}
Tschö, Auge