Abstand innerhalb von Liste beim IE6. FF, IE7 und Opera laufen....

[Gutschy]

Hi,

ich verstehe es nicht, was aber wohl häufiger vorkommt. Arbeite mit einer Browserweiche und der Style für den IE6 klemmt. Hier mein Problem:

www.b481.de/lauf2

Das Style sieht so aus, wollte bei "#linkboxaktiv" Abstände im Menü über Margin und Padding definieren, aber keines von beiden greift.

/*Style für IE6*/
body {
background-color: white;
font-family: Bitstream Vera Sans, Arial;
}

#nav {
top: 110px;
position:absolute;
width:190px;
margin:20px 0 0 0;
padding:30px 0;
}

#nav2 {
top: 110px;
left: 790px;
position:absolute;
width:190px;
margin:20px 0 0 0;
padding:30px 0;
}


#nav ul {
list-style:none;
margin:0;
padding:0;
}

#nav li {
margin:0;
padding:0;
}

#nav a:link, #nav a:visited {
font-variant: small-caps;
letter-spacing: 0.25em;
font-size: 17.5px;
text-align: center;
color: #AC3A2F;
display:block;
padding:15px 5px 15px 5px;
height:20px;
background:white url(grafik/button.gif) 5px 8px no-repeat;
text-decoration: none;
}

html>body #nav a:link, #nav a:visited {
height:auto;
}

#nav a:hover {
background-image:url(grafik/buttonon.gif);
}

#nav2 ul {
list-style:none;
margin:0;
padding:0;
}

#nav2 li {
margin:0;
padding:0;
}

#nav2 a:link, #nav2 a:visited {
font-variant: small-caps;
letter-spacing: 0.25em;
font-size: 17.5px;
text-align: center;
color: #AC3A2F;
display:block;
padding:15px 5px 15px 5px;
height:20px;
background:white url(grafik/button.gif) 5px 8px no-repeat;
text-decoration: none;
}

html>body #nav2 a:link, #nav2 a:visited {
height:auto;
}

#nav2 a:hover {
background-image:url(grafik/buttonon.gif);
}


#linkboxaktiv {
font-variant: small-caps;
letter-spacing: 0.25em;
font-size: 17.5px;
text-align: center;
color: #AC3A2F;
display:block;
height:50px;
padding:40px 0px 0px 0px;
margin:0px 0px 0px 0px;
background:white url(grafik/buttonoff.gif) 5px 8px no-repeat;
text-decoration: none;
}

/*
html>body #linkboxaktiv {
font-variant: small-caps;
letter-spacing: 0.25em;
font-size: 17.5px;
text-align: center;
color: #AC3A2F;
display:block;
padding:12px 5px 27px 5px;
height:20px;
background:white url(grafik/buttonoff.gif) 5px 5px no-repeat;
text-decoration: none;
}
*/


.logo {
height: 90px;
width: 310px;
padding-top: 10px;
font-variant: small-caps;
letter-spacing: 0.25em;
font-size: 17.5px;
text-align: center;
color: #AC3A2F;
background:white url(grafik/logo.gif) 0px 0px no-repeat;
text-decoration: none;
}

#titel {
margin: 0px;
position: absolute;
top: 20px; left: 340px;
z-index:4;
}

#inhalt {
padding-top: 5px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 100px;
position: absolute;
top: 170px; left: 245px;
background:white url(grafik/rahmen.gif) 0px 0px no-repeat;
}

#vorlader{
position: absolute;
top: 0px
left: 0px;
}

Der Vollständigkeit halber hier noch das Menü:

<div id="nav">
 <ul>
  <li><a href="#">Tagesgericht</a></li>
  <li id="linkboxaktiv">Extras</li>
  <li><a href="#">Wegweiser</a></li>
  <li><a href="#">Impressum</a></li>
 </ul>
</div>

Alles komplett unter:
www.b481.de/lauf2/lauf2.zip

Und noch eine Frage am Rande, die Buttons wollte ich eigentlich als einfache Boxen machen, mir ist zwar klar wie ich die als Div Container definiere aber wie kann ich die als Schrifthintergrund in den Style einfügen.

schan mal Danke für Mühe im voraus.

Gutschy

[benjamin.lam]

ich würde jetzt:

1. aus #linkboxaktiv (id) eine Klasse machen class="linkboxaktiv"
und falls das nicht hilft:

2. #linkboxaktiv und dann das li ansprechen
#linkboxaktiv li{}

vielleicht hilft es ja

[Gutschy]

Ich weiß nicht ob es elegant ist, aber es klappt so.

<div id="nav">
 <ul>
  <li><a href="#">Tagesgericht</a></li>
  <li>
  	<div id="aktiv">
		Extras
  	</div>
  </li>
  <li><a href="#">Wegweiser</a></li>
  <li><a href="#">Impressum</a></li>
 </ul>
</div>

Und Benjamin, danke für die Anregung.