CSS - UL LI menu - IE vs. zbytek světa...
Nejak se trapim s takovou jinak myslim jednoduchou veci, ale nedari se mi to jak bych chtel.
normalni svisle menu - css:
div.vmenu {
padding:0px;
margin:0px;
}
.vmenu ul
{
padding:0px;
margin:0px;
list-style:none;
width: 160px;
border-top:1px solid #000000;
}
.vmenu ul li
{
font-family:Arial;
font-size:9pt;
font-weight:bold;
}
.vmenu ul li a
{
padding:5px 2px 5px 12px;
color:#FFF;
color:#000000;
background-color:#cccccc;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
display:inline-block;
width: 160px;
text-decoration:none;
}
.vmenu ul li span
{
padding:5px 2px 5px 12px;
color:#000000;
background-color:#ffffff;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
display:inline-block;
width: 160px;
}
.vmenu ul li a:hover
{
background:#003300;
color:#ffff00;
text-decoration:none;
}
hatemele:
<div class="vmenu">
<ul>
<li><span>Zvolená popožka</span></li>
<li><a href="#">Menu č.1</a></li>
<li><a href="#">Dlouhé, skutečně docela dost dlouhé menu.</a></li>
<li><a href="#">blabla</a></li>
<li><a href="#">Smysl života...</a></li>
<li><a href="#">Smysl vesmíru...</a></li>
<li><a href="#">....a vůbec</a></li>
<li><a href="#">A další menu</a></li>
</ul>
</div>
result IE vs. ostatni:
- proste IE padding nepocita do rozmeru prvku, zbytek ano. Jiny rozmer stve, ale vic to nedotazene oramovani. Jde to nejak elegantne vyresit? Menu musi zustat s pouze scistymi (nebo - stejnymi) li (a span pro "selected") tagy, neb se to ve finale bude plnit z databaze = nechci to nijak komplikovat kvuli prvni polozce.
- predem diky za relevantni rady.
IE má asi 8 verzí s podporou cSS
moje tipy
-chybějící doctype vykreslí stránku v tomto blbém módu
-CSS vlastnost box-sizing umí tento mpód upravt u jednotlivých prvků..
Jsi si jistý, že jde o problém box modelu u všech prvků (->vyzkoušej napříkl ud dvojitého divu)
Taky mě napadá, že prohlížeče si samy stylují UL a LI a proto to vypadá jinak. Co když přidáš ke stránce css-reset nebo normalize.css?
Jsem to udelal cele znova a uz mi to prijde pouzitelne. FF je o par .px sirsi ale na to kaslu: