| Autor | Zpráva | ||
|---|---|---|---|
| Ayrton1 Profil |
#1 · Zasláno: 15. 6. 2011, 23:00:12
Po delší době zdravím všechny, do dnešního dne všechno krásně vycházelo, ale teď se objevil problém, na který jsem opravdu krátký, takže jdu za vámi, odborníky.
Tvořím vertikální rozbalovací menu a pro tu první, hlavní úroveň mám definován vlastní obrázek jako odrážku. Akorát, aby vše ladilo s designem, musel jsem použít "inside" aby odrážka byla na správném místě, tedy uvnitř celého objektu. V Chrome a Opeře vše funguje, jenže v IE a FF mám odrážku a text a samotné tlačítko v menu až na další řádce. Zkoušel jsem posunout menu a různě s tím hýbat, ale v šířce to nebude. IE a FF to prostě nedokáží dostat na jednu řádku. Pokud inside odstraním, vše funguje normálně až na to, že ty odrážky jsou prostě úplně mimo. Přikládám kus kódu: <ul class="menu">
<li><a href="/">Produkty 1</a></li>
<li><a href="/">Produkty 2</a>
<ul>
<li><a href="/">Sub-produkty 1</a></li>
<li><a href="/">Sub-produkty 2</a></li>
<li><a href="/">Sub-produkty 3</a></li>
<li><a href="/">Sub-produkty 4</a></li>
<li><a href="/">Sub-produkty 5</a></li>
</ul>
</li>
<li><a href="/">Produkty 3</a> </li>
</ul>A CSS přikládám pouze potřebné: .panel ul.menu {
margin: 0;
padding: 0;
list-style: inside url(images/menu-list.png);
z-index: 10;
}
.panel ul.menu ul {
display: none;
}
.panel ul.menu li {
width: 200px;
border-bottom: 1px solid #999;
}
.panel ul.menu li:first-child {
border-top: 1px solid #999;
}
.panel ul.menu li:hover {
list-style: inside url(images/menu-list-hover.png);
}A nakonec pro představu ještě obrázek, vlevo je Chrome (jak to má vypadat) a vpravo IE (a naprosto stejně to zobrazuje také FF) 
|
||
| Miloš Profil |
#2 · Zasláno: 16. 6. 2011, 00:09:33
Obrázkové odrážky se sice z logiky věci mají umísťovat pomocí list-style-type:image, ale protože se tak nedá ovlivnit jejich umístění, je vhodnější sáhnout po list-style-type:none v kombinaci s background-image.
Jestliže se IE chová jinak – a konkrétně hodně divně, příčinou může být quirk – viz http://www.jakpsatweb.cz/css/mody-prohlizecu.html |
||
| Ayrton1 Profil |
#3 · Zasláno: 16. 6. 2011, 09:02:06
Miloš: Tak pro jednotlivé položky menu již pozadí definované mám a nechci mít pozadí jen kvůli tomuhle široké jako celé menu, když využívám kouzlo opakování. Ale je mi divné, že i v tom FF to blbne. Javascriptem to zase neobejdu, pokud nedeklaruji pro každou položku zvláštní třídu (tedy až sem sahají mé znalosti) tak bych to rád vyřešil nějak jednoduše přes CC.
|
||
| jenikkozak Profil |
#4 · Zasláno: 16. 6. 2011, 09:04:58
Ayrton1:
„Tak pro jednotlivé položky menu již pozadí definované mám a nechci mít pozadí jen kvůli tomuhle široké jako celé menu, když využívám kouzlo opakování.“ Opakující se obrázek může být nastaven položce menu, obrázek šipky může být nastaven odkazu. |
||
| joe Profil |
#5 · Zasláno: 16. 6. 2011, 09:12:05
Ayrton1:
Jen doplním, že pokud už používáš pseudotřídy, můžeš také použít li:before a tam definovat obrázek. Nicméně nefungují ve starších IE, stejně tak jako pseudotřída first-child Lepší řešení už ale napsal jenikkozak |
||
| Ayrton1 Profil |
#6 · Zasláno: 16. 6. 2011, 09:18:08
jenikkozak: Taky mě to mohlo napadnout, už mi z toho vážně hrabe. Děkuji mnohokrát, bezvadně funguje.
joe: Také by šlo, pravda. |
||
| Chamurappi Profil |
#7 · Zasláno: 16. 6. 2011, 09:31:03
Reaguji na Miloše:
„Jestliže se IE chová jinak – a konkrétně hodně divně, příčinou může být quirk“ Všechny prohlížeče mají quirk mód. Reaguji na joa: „Nicméně nefungují ve starších IE, stejně tak jako pseudotřída first-child“ Pseudotřída :first-child funguje v sedmičce, pseudoelement :before až v osmičce, takže tady je rozdíl.
|
||
| joe Profil |
#8 · Zasláno: 16. 6. 2011, 09:46:33
Chamurappi:
V jaké verzi co (ne)jde si nepamatuju, ale myslel jsem ještě o verzi nižší IE :-) |
||
| Bubák Profil |
#9 · Zasláno: 16. 6. 2011, 16:11:54
Chamurappi:
„Všechny prohlížeče mají quirk mód.“ Ale vizuálně nejvíce rozdílů je v IE, namátkou hover na jakémkoli elementu, automatický margin, box-model. Ayrton1: „nechci mít pozadí jen kvůli tomuhle široké jako celé menu, když využívám kouzlo opakování“ A máš nějaký rozumný důvod využívat kouzlo opakování? Já ho neznám a raději využívám kouzlo PNG komprese. Ty potřebuješ tři obrázky, já si vystačím s jedním a proto na cenu kár set bajtů navíc ušetčím dva HTTP požadavky. Pro šťouraly, nemám nic proto vhodně použitému kouzlu opakování použitém v případě, že přinese výhody, což není výše uvedený případ. |
||
|
Časová prodleva: 13 let
|
|||
0