Autor Zpráva
RKD
Profil
Zdravím,
když floatnu položky menu doleva, v Exploreru šestce položky neleží v jedné řadě, ale vytvoří schody. Pamatuju se, že jsem to před lety řešil, ale už sem zapomněl. Nehodí nekdo rychý tip?
RKD
Profil
Aháá, zapomněl jsem přetypovat.

li {display: inline;}
Str4wberry
Profil
Pokud se nepletu, tak se to vyřeší zapnutím hasLayoutu — čili stačí třeba i „zoom: 1“.
Bubák
Profil
RKD:
Protože jsi nedodal odkaz ani jsi neukázal problémový kód, pokusil jsem se udělat schodovité menu, ale nepodařilo se mi to.

Str4wberry:
Pokud se nepletu, tak se to vyřeší zapnutím hasLayoutu
Floatovaný element má haslayout. Pomáhá třebas floatování nejen položek LI, ale i odkazů. Deklarovat položky jako inline nepomůže, chyba musela být jinde.

* {zoom: 1}

Používám při ladění, pokud je layout rozhozený v IE, přidáním téhle deklarace rychle zjistím, zda je příčinou problémů haslayout. Pokud ano, hledám problematický element a zapnu mu haslayout nějakou neškodnou validní CSS deklarací.
hasLayout Property
RKD
Profil
Fíha, to už je doba, co sem kódoval, na hasLayout jsem dočista zapomněl. :-) Dík za připomenutí.

Opravdu to bylo displayem.

BUBÁK: Když se ti ty schody nepovedly a kdyby tě to ještě zajímalo, níže máš vypreparovanou inkriminovanou část kódu.
Problém se vyskytoval jenom ve standardním módu MSIE 6, vejš už bylo všechno OK.
Prázdný spany jsou kvůli jednomu z image replacementů, ale psal jsem to z hlavy, takže asi nebude v klasický podobě, (taky sem teď ustříh konec).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
#menu {
width: 464px;
height: 72px;
position: absolute;
right: 88px;
bottom: 22px;
}

#menu li {display: inline; list-style-type: none;} /***** ! */

#menu a, #menu a span {
height: 72px;
width: 143px;
}
#menu a {
float: left;
position: relative;
background-color: #5b7329;
}
.active {background-color: #95a617 !important;}
</style>

</head>
<body>
<ul id="menu">
<li>
<a href="/" title="1" id="1" class="active">1<span></span></a>
</li>
<li>
<a href="/" title="2" id="2">2<span></span></a>
</li>
<li>
<a href="/" title="3" id="3">3<span></span></a>
</li>
</ul>
</body>
</html>
Bubák
Profil
RKD:
Prázdný spany jsou kvůli jednomu z image replacementů“ Znám, ale taky bych ho nenapsal zpaměti.
Pokud chci položky o konkrétní velikosti, pak položky menu <li> floatuji (příčina schodů) a dávám rozměry už položkám, což ty nemůžeš, protože je máš inline. Také se zjednoduší zadávání rozměrů pro obsah položek, kdy jim dám výšku i šířku 100%, pokud "neblbnu" třebas s orámováním.
<!DOCTYPE HTML>
<style>
#menu {
width: 464px;
height: 72px;
}
#menu li {
list-style: none;
float: left;
height: 100%;
width: 143px;
}
#menu a, #menu a span {
height: 100%;
width: 100%; float: left;
}
#menu a {
float: left;
position: relative;
background: lime;
}
#menu a.active span {
background: none;
} 
#menu a span {
background: silver;
position: absolute;
left: 0;
}
#menu a:hover {
background: yellow;
}
#menu a:hover span {
background: none;
}
</style>
<ul id="menu">
<li>
<a href="/" title="1" id="1">1<span></span></a>
</li>
<li>
<a href="/" title="2" id="2" class="active">2<span></span></a>
</li>
<li>
<a href="/" title="3" id="3">3<span></span></a>
</li>
</ul>

http://teststranek.kvalitne.cz/schody.html
Trochu si hraji s pozadím, nechtělo se mi dělat obrázky pro image-replacement a na odladění kódu to stačí.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: