Mal wieder IE6 Problem: Horizontale Listenelemente

uran

Mitglied
Ich weiß wurde schon ettliche mal hier angesprochen, allerdings komm ich auf kein sinnvolles Ergebnis im IE6. Im alten Explorer springen die nach links gefloateten Listeelemente immer wie eine Treppe um die hälfte nach unten. Irgendwie steh ich mom auf dem Schlauch.

Schonmal danke für eure Hilfe.

HTML-Teil
HTML:
  <ul id="mainnav">
    <li><a href="#">Navigation 1</a></li>
<li class="navbreaker"></li>
    <li><a href="#">Navigation 2</a></li>
<li class="navbreaker"></li>
    <li><a href="#">Navigation 3</a></li>
<li class="navbreaker"></li>
    <li><a href="#">Navigation 4</a></li>
<li class="navbreaker"></li>
    <li><a href="#">Navigation 5</a></li>
    </ul>

CSS:
HTML:
body {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	background-image: url(../images/services/bg.png);
	background-color: #dddddd;
	background-repeat: repeat-x;
	color: #666666;
}
h1 {
	font-weight: normal;
	font-size: 24px;
	margin: 0px;
	padding-top: 4px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
h2 {
	font-weight: normal;
	font-size: 16px;
	color: #F08A00;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
}
p {
	margin: 0px;
	padding: 0px;
}

.htag-img {
	padding-bottom: 4px;
}



#mainnav {
	background-image: url(../images/nav_bg.png);
	height: 75px;
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
}
#mainnav li {
	list-style-type: none;
	list-style-image: none;
}

#mainnav li a {
	display: block;
	width: 95px;
	float: left;
	height: 25px;
	padding-top: 10px;
	list-style-type: none;
	list-style-image: none;
	padding-left: 7px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 14px;
	padding-right: 7px;
	text-align: center;

}
#mainnav li a:hover {
	list-style-type: none;
	list-style-image: none;
	background-image: url(../images/services/nav_on.png);
	background-repeat: no-repeat;
	background-position: center;
}
.navbreaker {
	height: 37px;
	width: 10px;
	float: left;
	background-image: url(../images/nav_breaker.png);
}




a {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #333333;
}
a:hover {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #F08A00;
	text-decoration: underline;
}


#wrapper {
	width: 900px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
	padding-top: 36px;
	padding-right: 36px;
	padding-bottom: 0px;
	padding-left: 36px;
}
#footer {
	font-size: 12px;
	color: #999999;
}
#content {
	padding-bottom: 50px;
	text-align: justify;
	clear: both;
	line-height: 20px;
}

#sitenav {
	width: 300px;
	text-align: right;
	float: right;
	padding-top: 45px;
}
#headpic {
	background-image: url(../images/services/headpic.jpg);
	height: 162px;
	margin-top: 10px;
	padding-top: 85px;
	padding-left: 550px;
	color: #FFFFFF;
	font-weight: normal;
	font-size: 15px;
	line-height: 20px;
	padding-right: 35px;
}

#sitenav img {

}
#sitenav a {
	text-decoration: none;
	margin-left: 10px;
}
#footer2 {
	height: 38px;
	background-image: url(../images/services/footer.png);
	background-repeat: no-repeat;
	margin-top: 5px;
}
#footer a {
	color: #666666;
	text-decoration: none;
}
#footnav {
	width: 300px;
	float: right;
	text-align: right;
}
#footer a:hover {
	text-decoration: underline;
}
 
Hi,

die Lösung sieht diese Regelerweiterung vor:
Code:
#mainnav li {
        list-style-type: none;
        list-style-image: none;
        display:inline;
}


mfg Maik
 
Zurück