✔ Suche IE 6 fix für horizontales Menü

[ne0hype]

Hallo Leute,

immer das gleiche, ich passe ein Design an und schaue es im Firefox 1.5 / 2 und IE 7 an. Bis dahin alles ok. Nun kommt der IE 6 und alles passt nicht mehr.

Problem ist folgendes: Ich habe ein horizontales Menü mit float und nur beim IE6 geht der float über 2 zeilen (siehe Bild 1). Im Firefox und IE7 ist alles perfekt (siehe Bild 2).

hier mein CSS code:

* {
	padding: 0;
	margin: 0;
}
html {
	height: 101%;
}
body {
	color: black;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	background-color:white;
	background-image: url(verlauf2.jpg);
	background-repeat: repeat-x;
	margin:0px;
}
h1 {
	font-size: 150%;
}
h2 {
	font-size: 130%;
	margin-bottom: 1em;
}
h3 {
	color: #353535;
	font-variant: small-caps;
	font-weight: bold;
	font-size: 120%;
	letter-spacing: 0;
	margin-top: 2em;
	margin-bottom: 0.5em;
}
h4 {
	margin-bottom: 0.5em;
}
p {
	font-size: 89%;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0.5em;
	margin-left: 0;
}
address {
	text-align: center;
	font-size: 80%;
	font-style: normal;
}
a img {
	border: none;
}
a {
	text-decoration: none;
	outline: none;
}
a:link {
	color: black;
}
a:visited {
	color: #cc6666;
}
a:hover, a:focus {
	text-decoration: underline;
}
a:active {
	color: white;
	background-color: #d90000;
}
#menue a:link {
	color: #555555;
}
#menue a:hover, #menue a:hover {
	text-decoration: underline;
}
#wrapper {
	background: white;
	color: #000000;
	width: 800px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	border-right: 1px solid #dcd;
	border-left: 1px solid #dcd;
}
#footer {
	border-top: 1px solid black;
	height: 23px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	background-image: url(verlauf.jpg);
	background-repeat: repeat-x;
}
#head {
	position: relative;
	color: black;
	background-color: #FFFFFF;
}
#content {
	margin: 10px 10px 25px;
}#lang {
	color: black;
	font-size: 70%;
	position: absolute;
	top: 5px;
	right: 5px;
}

#navi {
	margin: 0px 0px 20px;
}

#navi ul { 
	padding: 0;
	list-style: none;
	margin: 2px 0px;
}
#navi li {
	float: left;
	width: 98px;
	text-align: center;
	background-repeat: no-repeat;
	height: 160px;
	margin-right: 1px;
	margin-left: 1px;
	font-weight: bold;
	font-size: 95%;
}
#navi li.double{width: 198px;}

.navigation {
	background-color: #dcdcdc;
	display:block;
}

#navi a {
	color:#4E4E4E;
	background-repeat: no-repeat;
	display:block;
	padding: 143px 0px 0px;
	line-height: 25px;
	text-decoration: none;
}
#navi a:hover {
	background: transparent;
	display:block;
}
#navi a:hover .navigation {
	background-color:#BBBBBB;
	color:#4E4E4E;
	display:block;
}

.nav1 {background-image:url(Bilder/aktuell_hover.gif);}
a.nav1{background-image:url(Bilder/aktuell.gif);}

.nav2 {background-image:url(Bilder/interieur_hover.gif);}
a.nav2{background-image:url(Bilder/interieur.gif);}

.nav3 {background-image:url(Bilder/multimedia_hover.gif);}
a.nav3{background-image:url(Bilder/multimedia.gif);}

.nav4 {background-image:url(Bilder/business_hover.gif);}
a.nav4{background-image:url(Bilder/business.gif);}

.double {background-image:url(Bilder/sonderanvertigungen_hover.gif);}
a.nav5{background-image:url(Bilder/sonderanvertigungen.gif);}

.nav6 {background-image:url(Bilder/kontakt_hover.gif);}
a.nav6{background-image:url(Bilder/kontakt.gif);}

.nav7 {background-image:url(Bilder/impressum_hover.gif);}
a.nav7{background-image:url(Bilder/impressum.gif);}

hier mein HTML Code:

<div id="wrapper">
  <div id="head">
    <h1><img src="Bilder/logo.jpg" alt="Reinald Mattes Interieurtechnik" width="315" height="84" /></h1>
    <div id="lang">&raquo; <a href="#" title="Language english">English</a> &raquo; <a href="#" title="Sprache deutsch">Deutsch</a> </div>
  </div>
 <div id="navi">
  <ul>
    <li class="nav1"><a class="nav1" title="Layouts" href="index.html"><span class="navigation">Aktuell</span></a></li>
    <li class="nav2"><a class="nav2" title="Layouts" href="index.html"><span class="navigation">Interieur</span></a></li>
    <li class="nav3"><a class="nav3" title="Layouts" href="index.html"><span class="navigation">Multimedia</span></a></li>
    <li class="nav4"><a class="nav4" title="Layouts" href="index.html"><span class="navigation">Business</span></a></li>
    <li class="double"><a class="nav5" title="Layouts" href="index.html"><span class="navigation">Sonderanfertiungen</span></a></li>
    <li class="nav6"><a class="nav6" title="Layouts" href="index.html"><span class="navigation">Kontakt</span></a></li>
    <li class="nav7"><a class="nav7" title="Layouts" href="index.html"><span class="navigation">Impressum</span></a></li>
    </ul>
    <div style="clear:both"></div>
  </div>
  <div id="content">
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc tincidunt interdum erat.
  </div>
  <div id="footer">
    <address>
    Reinald Mattes Interieurtechnik<br />
    Pleidelsheimer Str. 39 - 74321 Bietigheim-Bissingen - Germany
    </address>
  </div>
</div>
</body>

Gruß ne0hype

 

[Quaese]

Hi,

es handelt sich um einen Bug des Microsoft-Browsers. Werden im IE6 gefloatete Elemente neben Elemente im "normalen" Textfluss mit margin-Werten angeordnet, verdoppeln sich die Werte. In deinem Fall wird der erste Listenpunkt zwei Pixel von links angeordnet, wodurch der Platz nicht mehr ausreicht.

Als Lösung könntest du den linken Aussenabstand der unsortierten Liste für den IE6 um einen negativen Wert verschieben.

#navi ul {
  padding: 0;
  list-style: none;
  margin: 2px 0px !important;
  margin: 2px 0 2px -1px;
}

Vielleicht hilft dir das weiter.

Ciao
Quaese

 

[ne0hype]

Super. Vielen Dank !