Autor Zpráva
Petroff
Profil
Potřebuji CSS pro shodné zobrazení MENU v FF,Opera,IE6+7

<div id="nav">
<ul>
<li><a href="#">Novinky</a></li>
<li><a href="#"> ....next </a></li>
<li><a href="#"> ......next </a></li>
<li><a href="#"> .........last </a></li>
</ul>
</div>


Lze použít postup,kdy nastavím výšku a relativní pozicování u LI a odkazy A absolutně pozicované,
abych při formátování odkazů zachoval nastavenou hodnotu LI {height:26px} ???
....
#nav li {
margin: 0;
padding: 0;
border: 0px solid transparent; border-width: 0 0 3px 0;
position: relative;
height: 26px;
}
#nav li.hvr, #nav li:hover {
border: 0 solid blue; border-width: 0 0 3px 8px;
}

#nav li a {
position: absolute; left:0; bottom:0;
display:block;
width....
border....
margin...
padding.....
color: blue; text-decoration: none; font: bold xxx/yyy serif;
}
habendorf
Profil
Proč position? Normálně dej pro a block a je to, ne?
Petroff
Profil
A je samozřejmě s nastaveným:
display:block
Zapomněl jsem to uvést /OPRAVENO/ - pokud by někdo chtěl znát všechny vlastnosti/hodnoty u odkazů,
bude nejlepší když popíšu výsledný vzhled:
Odkazy mají border-top a border-bottom nastaveny tak, aby byly tečkovaně podtrženy/nadtrženy.
Přitom se horní border přesně překrývá se spodním předchozí položky.
Bez absolutního pozicovaní nevím, jak bych toho překrytí dosáhl
( ten tlustý LI:HOVER{border-bottom} by je od sebe odstrčil ).
Petroff
Profil
Je víc než jisté, že přestože jsou odkazy absolutně pozicované (prý vyňaty z toku dokumentu !), tak rozhodí formát seznamu - konkrétně odstup položek od sebe.
A protože jsem u IE narazil na další případ, kdy absolutní a statické prvky se navzájem ovlivňují, rád bych věděl, jestli je to "specialita" Internet Exploreru. Anebo je to další věc k prověřování i u dalších browserů (nastanou-li problémy).

Nevíte?
Petroff
Profil
Nakonec jsem na to přišel - jde o bug IE ( podobná šílenost jako když máte NORMÁLNÍ = statické blokové odkazy v <li>položkách a při psaní zdrojáku dáte mezery mezi </li> <li>, což způsobí že IE dá text.uzel dovnitř <li></li> (nakonec) a dojde ke stejně vyhlížející BUGOmezeře)
Na tohle jsem přišel (pokusně):
Pokud je obsahem <li> jen absolutně pozicovaný prvek(prvky), objeví se pod takovouto <li>položkou mezera navíc
1.ŘEŠENÍ
Nenechávat tam pouze absolutně pozicovaný prvky, přidat např.text stačí jediný znak, vhodný &nbsp;
Příklad: <li>&nbsp;<a href="#">x-Item</a></li><li>&nbsp;<a href="#">y-SubMENU</a><ul>........</ul></li>
2.ŘEŠENÍ
Ta mezera navíc je bílý vodorovný proužek, silně to připomíná škvíru když vložíme do <div> normální <img>. Velikost je úměrná velikosti písma, např. když zvětšíme font-size:100px , dostaneme tlustý pás pod obrázkem. Totéž platí i pro mezeru pod <li>. U obrázku stačí nastavit display:block a je po mezeře, což u (blokové) položky nepomůže. Zato aplikací libovolné hodnoty na vertical-align: [middle/bottom/top] je po problému.
Příklad: li {vertical-align: top}
3.ŘEŠENÍ
Jestliže je velikost mezery úměrná velikosti písma, stačí nastavit nulovou velikost
Příklad: li {font-size:0}

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:

0