Autor Zpráva
Knopi
Profil
#1 · Zasláno: 11. 7. 2006, 11:02:24 · Upravil/a: Knopi
Odpovědět Citovat
Ahoj, vytvořil jsem validní vertikální menu téměř pro všechny prohlížeče. Jenže se vyskytli při ladění menu do stránky dvě chyby. Podívejte se prosím na příklad, který stačí jen zkopírovat do html stránky. Je to spíše pro zkušené kodéry!

1. chyba: V IE pouze ve verzi 5.5 , se mi dělá v levé části zhruba 5px prázdná mezera!

2. chyba: V Opeře a Firefoxu, možná i jejich dalších verzí se mi nevykreslý správně rámeček v položce li pouze v pravé části chybí, jakoby "useklý".

Příklad html:

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Příklad vertikálního menu s mezerou v IE 5.5 a chybným vykreslení rámečku Opery, FireFox</title>

<style>
* {
margin: 0;
padding: 0;
}

body {
padding: 0;
background: #D5E7FF;
}

/* navigation */
menu {
width: 224px;
float: left;
padding: 0;
margin: 0;
overflow: hidden;
border: 10px solid #528CC1;
font: 140% sans-serif, Tahoma, "Geneva CE", lucida;
background: white;
}

* html menu {
width: 244px;
}

menu li {
list-style: none;
margin-bottom: 5px;
border: 2px solid black;
}

menu li a {
display: block;
padding: 14px 5px 14px 70px;
text-decoration: underline;
font-weight: normal;
overflow: hidden;
color: #295D8D;
background: #E8E8E8;
width: 100%;
}

menu li a:hover {
color: #548DC2;
text-decoration: underline;
background: #DBECFF;
}
/* navigation */
</style>

</head>
<body>
<!-- navigation -->
<menu>
<li><a href="/" title="Novinky">Novinky</a></li>
<li><a href="tomas.php" title="Tomas">Tomáš</a></li>
<li><a href="galerie.php" title="Galerie">Galerie</a></li>
<li><a href="media.php" title="Media">Media</a></li>
<li><a href="diskuse.php" title="diskuse">N-kniha</a></li>
<li><a href="odkazy.php" title="Odkazy">Odkazy</a></li>
</menu>
<!-- navigation -->
</body>
</html>

Předem děkuji za pomoc, protože se mi to nepodařilo odstranit tyto dvě chyby, přitom si myslím, že chyba tam není...
Railbot
Profil
#2 · Zasláno: 11. 7. 2006, 14:31:45 · Upravil/a: Railbot
Odpovědět Citovat
Tak predne tam mas zcela zbytecne formatovani jako je napriklad padding v <li>, cimz chces text dostat doprostred. Uplne jednoduse to jde pomoci text-align na vycentrovani horizontalne a line-height na vycentrovani vertikalne.

menu li {
list-style: none;
margin-bottom: 5px;
border: 2px solid black;
text-align: center;
height: 35px;
line-height: 35px
}

menu li a {
display: block;
text-decoration: underline;
font-weight: normal;
overflow: hidden;
color: #295D8D;
background: #E8E8E8;
}

Ted uz jen doladit mezery mezi "tlacitky", ze ano? ;)
Bubák
Profil
#3 · Zasláno: 11. 7. 2006, 14:32:53
Odpovědět Citovat
Zase "slavný" box model.
Pro Firefox, Konqueror, Operu v předpise pro menu li a vymazat width: 100%;, pro IE to přidávat hackem nebo podmíněným stylem vpodmíněném komentáři.
S IE 5.5 neporadím. Já bych se naň vy***l, pokud je 5.0 v pořádku, ale uznávám, že u některých projektů tenhle přístup nelze uplatnit.
Railbot
Profil
#4 · Zasláno: 11. 7. 2006, 14:38:07 · Upravil/a: Railbot
Odpovědět Citovat
Tez nechapu nasledujici - proc napriklad v menu a dalsich objektech nulujes margin a padding, kdyz na zacatku stylu jsi jej defaultne vynuloval pro vsechny objekty? * {margin: 0; padding: 0}
Knopi
Profil
#5 · Zasláno: 11. 7. 2006, 15:30:18 · Upravil/a: Knopi
Odpovědět Citovat
Railbot: Tak zaprvé musím uznat, že jsi to vyřešil, ale moc jsi mi nepomohl, ba naopak: Ty věci které jsi umazal tam mají svou váhu. Například
padding, je to také má chyba, byl to jen suchý příklad. V pozadí bude obrázek a v položce li bude také obrázek, přičemž ten text bude vypadovaný tak, aby ho nezakrýval ten obrázek.

Proč nemohu použít height, chci umožnit návštěvníkům zvětšení písma. Pozor ono se zvětší, ale položka li zůstane stejně veliká a tím se po zvětšení menu ve FireFox téměř rozpadne a v IE je tlačenice a tím horší čitelnost. I na toto jsem myslel..., co se týče toho text-align: center , tak jak jsem popisoval nahoře, bude tam obrázek, takže jedině padding.

Tez nechapu nasledujici - proc napriklad v menu a dalsich objektech nulujes margin a padding, kdyz na zacatku stylu jsi jej defaultne vynuloval pro vsechny objekty? * {margin: 0; padding: 0} - U mého vložení menu do stránky je to nutnost a lepší pocit...

Bubák: Hackem jsem to samozřejmě také řešil, ale bylo to stejné a rozhodl jsem se pro width: 100%; je to jedno jestli to či ono "to mi věř", ale je fakt, že hack komentářem jsem nezkoušel. Kdyžtak mi ho prosím napiš. Já vůbec nevím jak by měl vypadat...

Tolik další info k mému problému. Stále jsem to nevyřešil. Snažte se zachovat ty údaje, nejsou tam z legrace. Moc děkuju...
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0