Problem ze spacją w IE

[benusso]

Witam

Mam takie menu w CSS

#hMenu{position:relative;width:900px;z-index:100;margin-top:4px;}

#hMenu ul{margin:0;padding:0;list-style:none;height:40px;}

#hMenu ul li{display:block;float:left;_width:1px;margin:0 5px;}

#hMenu ul li.last{padding-right:0;background-image:none;}

#hMenu ul li a{display:block;height:40px;line-height:40px;

font-size:10px;font-family:tahoma;text-decoration:none;}

#hMenu a div{display:block;padding:0 10px;}

#hMenu ul li a:hover,

#hMenu ul li a.active{background:#00AEFF url(images/menu_lewy.jpg) no-repeat;color:#fff;}

#hMenu ul li a.active div,

#hMenu ul li a:hover div{background:url(images/menu_prawy.jpg) 100% 0 no-repeat;}

a następnie w HTML

<div id="hMenu">

<ul>

<li><a href="index.php"><div>strona glowna</div></a></li>

<li><a href="dzialanie.php"><div>dzialanie produktu</div></a></li>

<li><a href="skladniky.php"><div>skladniki</div></a></li>

<li><a href="opinie.php"><div>opinie</div></a></li>

</ul>

</div>

Czy ktoś wie dlaczego IE interpretuje mi spację w tym menu jako enter ? Tzn. że zamiast

strona glowna

mam

strona

glowna

??

W FF jest ok.

[leadersmind]

Masz float:left wiec wszystko pod IE kurczy sie do minimalnego rozmiaru i temu przeskakuje niżej. To nie wina złej interpretacji spacji ale styli.

[benusso]

To jak to przerobić żeby menu było w poziomie i żeby tekst nie przeskakiwał poniżej.

[wlodarski]

IMO hMenu ul li width zmien(wywal np.)

[Łysy!]

a tak w ogóle to nie możemy zagnieżdżać elementów blokowych wewnątrz liniowych, czyli DIV wew. A jest niedopuszczalny, możesz go zamienić na np. SPAN. Poniżej poprawiony CSS i HTML , powinno działać:

#hMenu{position:relative;width:900px;z-index:100;margin-top:4px;}

#hMenu ul{margin:0;padding:0;list-style:none;height:40px;overflow:hidden;}

#hMenu ul li{float:left;margin:0 5px;}

#hMenu ul li.last{padding-right:0;background-image:none;}

#hMenu ul li a{float:left;height:40px;line-height:40px;

font-size:10px;font-family:tahoma;text-decoration:none;}

#hMenu a span{float:left;padding:0 10px;}

#hMenu ul li a:hover,

#hMenu ul li a.active{background:#00AEFF url(images/menu_lewy.jpg) no-repeat;color:#fff;}

#hMenu ul li a.active span,

#hMenu ul li a:hover span{background:url(images/menu_prawy.jpg) 100% 0 no-repeat;}

a następnie w HTML

<div id="hMenu">

<ul>

<li><a href="index.php"><span>strona glowna</span></a></li>

<li><a href="dzialanie.php"><span>dzialanie produktu</span></a></li>

<li><a href="skladniky.php"><span>skladniki</span></a></li>

<li><a href="opinie.php"><span>opinie</span></a></li>

</ul>

</div>