Autor Zpráva
Knopi
Profil
Ahoj, mé vertikální menu se skládá ze seznamu <menu> a z položek <li>. Funguje téměř všude (v exotických prohlížečích jsem netestoval) a rozsype se mi pouze v MSIE 5. Každá položka v seznamu má dolní rámeček o 1px, přičemž problém nastává, když jsem poslední položce přiřadil, že teda rámeček mít nebude, IE to samozřejmě nepochopil, a tak jsem mu to musel říct inline.

CHYBA:

- MSIE 5 udělá pod každou položkou zhruba 10px prázdnou mezeru s vyjímkou té poslední položky bez dolního rámečku. Tím se mi rozleze celé menu...

- Chyba, která mi ani tak nevadí. Zřejmě jde o nějaký bug. V MSIE 5 a 5.5 se text uvnitř položek posune zhruba o dvojnásob levého paddingu. To mi celkem nevadí...

Příklad: Prosím zachovejte padding v položce, je tam kvůli zvětšení písma! :-)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Vertikální Menu, chyba IE 5 - 10px vykreslý pod položkami až na poslední položku inline</title>

<style>
/* ----- navigation ----- */
menu {
background: white;
width: 254px;
float: left;
margin: 0;
padding: 0;
font: 150% sans-serif, Tahoma, "Geneva CE", lucida;
overflow: hidden;
}

menu li {
list-style: none;
border-bottom: 1px dashed black;
}

menu li a {
display: block;
padding: 14px;
color: black;
font-weight: normal;
overflow: hidden;
}

menu li a:hover {
background: #EFEFEF;
color: #C33636;
}

menu li.none {
border-bottom: none;

}

* html menu li.none {
display: inline;
}

/* ----- navigation ----- */
</style>

</head>
<body bgcolor="#FFCDCD">

<!-- navigation -->
<menu>
<li><a href="/">Štěně</a></li>
<li><a href="/">Štěně</a></li>
<li><a href="/">Štěně</a></li>
<li><a href="/">Štěně</a></li>
<li><a href="/">Štěně</a></li>
<li class="none"><a href="/">Štěně</a></li>
</menu>
<!-- navigation -->

</body>
</html>

Budu moc rád, když tomu někdo věnujete chvilku, protože jsem nad tím strávil poměrně dost času a nemohu to vyřešit. Vypadá to dlouze, ale není. Děkuji
mila
Profil
- MSIE 5 udělá pod každou položkou zhruba 10px prázdnou mezeru s vyjímkou té poslední položky bez dolního rámečku. Tím se mi rozleze celé menu...
Tohle je velmi častý problém. Dělá to konec řádku mezi </li> a <li>. IE ho neignoruje a vloží textový node. Nejjednodušší je neuzavírat </li>, lze samozřejmě řešit i jinak.

- Chyba, která mi ani tak nevadí. Zřejmě jde o nějaký bug. V MSIE 5 a 5.5 se text uvnitř položek posune zhruba o dvojnásob levého paddingu. To mi celkem nevadí...
Zkus nastavit <li> margin a padding na nula.

Každá položka v seznamu má dolní rámeček o 1px, přičemž problém nastává, když jsem poslední položce přiřadil, že teda rámeček mít nebude, IE to samozřejmě nepochopil, a tak jsem mu to musel říct inline.

Často to jde řešit tak, že se menu o pixrel někam posune, a poslední/první border se schová pod nějaký prvek.
Knopi
Profil
mila:
- Nejjednodušší je neuzavírat </li>, lze samozřejmě řešit i jinak. Jak? To se mi nějak nezdá to neuzavřít. :-)

- Margin je zbytečný, protože by se jednalo o vnější okraj a padding na nulu mi přeplácne těch 14px, jinak to zůstane stejně stejné.

Je potřeba si to doma asi vyzkoušet. Neřekl bych, že se jedná vyloženě o jednoduchý příklad.
mila
Profil
- Nejjednodušší je neuzavírat </li>, lze samozřejmě řešit i jinak. Jak? To se mi nějak nezdá to neuzavřít. :-)
Prohlížeč ukončí předcházející položku tam, kde začíná další. Je to standardní a v html validní.
Jinak to lze hodit na jeden řádek, případně konce řádků zakomentovat, tuším že se to dělá také pomocí line-heigt:0 v css.

- Margin je zbytečný, protože by se jednalo o vnější okraj a padding na nulu mi přeplácne těch 14px, jinak to zůstane stejně stejné.
Nezkoušel jsem to, ale nenašel jsem v tom stylopisu nějaké nastavení margin a padding pro li.
Jen tuším, že nějak je nastaven v defaultním stylopisu prohlížeče a každý to má nějak jinak (někdy je to u ul, někdy u li, někdy margin, někdy padding).
Neboli pokud je to posunuté, tak tipuji, že je tam nastaven nějaký okraj od prohlížeče.
Knopi
Profil
mila: To posunutí textu se vyskytuje pouze v MSIE 5 a 5.5, není to určitě výchozí odsazení prohlížeče.

Prosímtě kde jsi to viděl? Podle mě je to nesmysl. MSIE 5 stejně udělá tu mezeru zhruba 10px pod každou položkou.

<menu>
<li><a href="/">Štěně</a>
<li><a href="/">Štěně</a>
<li><a href="/">Štěně</a>
<li><a href="/">Štěně</a>
<li><a href="/">Štěně</a>
</menu>
mila
Profil
Ok, zkusil jsem si to a jsem opravdu mimo. Vím, že jsem měl podobný problém a tohle pomohlo... Tady půjde asi o něco jiného.
Nějak to také nechápu.

Zkrátil jsem ten kód na minimum, třeba poradí někdo jiný..
<style>

body {
background-color:blue;
}
ul {
float:left;
background-color:white;
margin: 0;
padding: 0;
}
ul li {
margin:0;
padding:0;
list-style-type: none;
}
</style>

<ul>
<li>Pes
<li>Koza
</ul>

V IE 5.5 má seznam vlevo nepochopitelný padding. Pokud přidám k ul display:inline (klasický hack proti doble-margin bug), tak se objeví i v IE6.
Knopi
Profil
mila klasický hack ul {display:inline}? To není hack! selektor {vlastnost: hodnota}


Já si myslím, že padding vlevo je nějaký chyba předešlých verzí IE, která byla v IE 6 odstraněna a ani mi tam moc nevadí. Spíš mě trápí v IE 5 ta 10px mezera, ale v mém příkladě...
Zahon
Profil
Chyba je způsobena tím, že IE se opravdu nelíbí mezery mezi prvky. (jako že to odřádkujete). Vše by mělo vyřešit zrušení mezer a dání celého kódu na jeden řádek. Pak to prý lze ještě obejít pomocí jedné šílené metody, kterou nikomu nedoporučuji ;-)
Knopi
Profil
Zahon: Díky moc. :-) Já mám takovou radost. No to mě nenapadlo to dát na jednu řádku. Já dojedu na zalomení řádku. Takovýho času jsem nad tim strávil. Hlavně, že už je to dobré. Opravdu ti moc děkuju. Já myslel, že to nedáme dohromady... :-)
Knopi
Profil
Ještě otázečka. To je normální, že IE 5 neumí zobrazit rámeček typu dashed a zobrazí ho jako solid - linku?
Knopi
Profil
mila: Už jsem vyřešil ten levý padding co se tam dělá v IE 5 a 5.5. Je to celkem jednoduché. Je potřeba celý seznam obalit ještě jedním divem a tomu nadefinovat vlastnosti, které byli pro seznam, takže:

Kdyby jsi pro body napsal nulový margin i padding, tak musí být i pro "ul" určen znovu. Protože se hodnoty nedědí..., já myslel že jo. To jsem napsal proto, protože by se udělala zas jiná mezera, která v tvém příkladu nebyla kolem celého seznamu.

<style>
#hlavni {
float:left;
background: white;
width: 500px;
}

ul {
margin: 0;
padding: 0;
}

li {
list-style-type: none;
}
</style>
Knopi
Profil
Zahon: Ještě jaká je ta další metoda? :-)
mila
Profil
Pokud jde o tu mezeru vlevo, nikdy jsem na ten bug dříve nenarazil.
Pokud má seznam v IE5 float:left, tak vznikne vlevo cca 20px velký padding.
Setkal se s tím někdo, nějaký odkaz?


Knopi
Jsem rád, že se to vyřešilo. Já jsem tam žádnou mezeru dole neviděl.
Jinak, že to dělá konec řádku jsem psal už na začátku:)

Pokud jde o to "display:inline" já to považuji za hack, ale je to hra se slovíčky.
Nevím, jestli víš o co přesně jde - v IE mají floatované prvky dvojitý margin, než je nastaveno. Pokud se jim ale nastaví display:inline (což jinak na floatované prvky nic neznamená), tak to IE začne počítat dobře.
Toto téma je uzamčeno. Odpověď nelze zaslat.

0