Kärt problem har många namn,

XHTML:
<div class="buttonarea">
<ul id="nav">
<li class="first">Hem
[*]Hem
[*]Hem
[*]Hem
[*]Hem[/list] </div>
--------------------------
CSS:
--------------------------
ul#nav, ul#nav li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

ul#nav {
font-family: "Trebuchet MS", Verdana, "Arial Rounded MT Bold";
font-size: .82em;
}

ul#nav li a {
border-right: 1px solid #641b15;
display: block;
float: left;
padding: 2px;
width: 80px;
text-decoration: none;
}

.first a {
color: #009999;
margin: 0 0 0 12px;
}

ul#nav li.first li a {
padding: 80px 0 0 0;
}

ul#nav li a:hover {
background-color: #009966;
}
------------------
GER DENNA MENY:
______________
http://www.peterholmstudios.se/bild.gif
-------------------
PROBLEM:
-------------------
Menyn fungerar inte i IE6, FF2 och Safari visar den korrekt.

Kan någon hjälpa mig? Finns det en lösning för menyer med float:left? (alltså horisontella)

Jag gjorde igår huvudmenyn på http://www.tweb.se
Den är i princip uppbyggd på samma sätt. Fungerar fint i IE7 och FF1.5, har dock inte testat i IE6 ännu, men det kanske du kan göra, och om det funkar så kan du ju se koden.

Denna sidan har många exempel på både horisontella och vertikala listor (menyer) med bra information om browsersupport.

http://css.maxdesign.com.au/listamat...er-support.htm

Tänk på att browsersupport inte alltid stämmer utan även beror på omgivningen som listan placeras i.

Testade idag min lösning med IE6 och det verkade se ut och fungera exakt som i IE7 och FF1.5.

Intressant! Ska kolla vidare på dessa, tack!

*Rollover horizontal list navbar:

Den här verkar ju vara det jag söker, men exemplet verkar inte ha fasta pixlar i höjdled, men jag provar iaf.

:rolleyes:

:lol: Rejält glad nu :lol: TACK för tipset....

Det fungerar.... IE/FF/SA visar en pixelperfekt meny.

Resultat:
http://www.peterholmstudios.se/pixelperfekt.gif

CSS:
------------------------
#navcontainer ul
{
padding: 0;
margin-left: 12px;
margin-top: 1px;
background-color: #036;
color: White;
float: left;
width: 500px;
font-family: arial, helvetica, sans-serif;
font-size: 10px;
}

#navcontainer ul li {
display: inline;

}

#navcontainer ul li a {
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
height: 18px;
line-height: 18px;
}

#navcontainer ul li a:hover {
background-color: #369;
color: #fff;
}

KOD:
---------------
<div id="main">

<div class="buttonarea">
<div id="navcontainer">
<ul>
<li id="active">Item one[*]Item two[*]Item three[*]Item four[*]Item five[/list]</div>
</div>