ugrás a tartalomhoz

Nem a szokásos!!! IE CSS probléma (png háttér)

fchris82 · 2008. Nov. 13. (Cs), 00.12
Előre szeretném bocsájtani, hogy NEM az IE6-os PNG megjelenítés problémájáról van szó!

Egy érdekes problémába ütköztem, illetve többe is, de íme az egyik:

Van egy baloldali menü, ahol néhány menü elemnek van almenüje is. Vhogy így: 
<ul id="menu">
  <li>Főmenü 1.</li>
  <li>Főmenü 2.</li>
  <ul id="sub_menu">
    <li>Almenü 1.</li>
    <li>Almenü 2.</li>
  </ul>
  <li>Főmenü 3.</li>
</ul>
Vmi ilyesmit kell elképzelni:
+ Főmenü 1.
- Főmenü 2.
  - Almenü 1.
  - Almenü 2.
+ Főmenü 3.

Természetesen a <li></li> elemek között link van, nem szöveg. Az almenü a design tervben kapott egy fekete, átmenetes 30%-os átlátszósággal rendelkező png képet, hogy mögötte a háttér is látszódjon (egy nagyobb kép a háttér). Persze ez alapból csak úgy nem megy IE6 alatt, de most nem ez a lényeg. Az ötlet az volt, hogy ezt a hátteret az ul#sub_menu elem fogja kapni, mert az elején és az alján van egy 10px-es "padding", és ha a <li> vagy az <a> elemnek adom, akkor az ott nem lesz jó, vagy php-vel kell majd az első és utolsó elem style-ját állítgatni, ami nem szép. Éppen ezért a <li> és az <a> background értéke: none. Akár minden szép és jó is lenne, de mind IE6, mind IE7 alatt nagyon csúnyán belehülyül ebbe. Egyrészt néhány almenü pontot nem jelenít meg, vagy azt rosszul, majd ha legörgetek, hogy kimenjen a képből és vissza, akkor már más almenük látszódnak és megint mások nem. De az IE7 erre rátesz még egy lapáttal!
Az ul#sub_menu hátterét a linkek és a li elem FÖLÉ helyezi!!! Azt is igen furcsán, mert a fentről lefele haladva változik az alpha csatorna, azaz az átlátszóság. Az alsó linkek jobban látszódnak, mint a felsők, pedig az eredeti png-ben ilyen nincs! De már az is abszurd, hogy miért a linkek fölé kerül a kép, ami háttér... :?
Ugyanezt csinálja, ha a hátteret a <li> elemnek adom meg. Az egyetlen, amikor normálisan működik, ha az <a> tagnek adok meg hátteret, de így meg elég gányul tudom odavarázsolni a lista elejére és végére azt a 10-10px-t :-/

Azt se tudom, hogyan keressek rá erre google-ben... Az "IE background css png" nem jó kombó, mert az IE6-os problémát orvosoló oldalak jönnek be :-/

Opera, FF, Safari alatt semmi probléma.
‹ Iframe kijelölt kép kinyerése IE probléma ›
 ■
1

nem valid

gex · 2008. Nov. 13. (Cs), 00.30

<ul>
    <li>szöveg</li>
    <ul>
        <li>szöveg</li>
    </ul>
    <li>szöveg</li>
</ul>
helyett

<ul>
    <li>szöveg</li>
    <li><!-- itt -->
        <ul>
            <li>szöveg</li>
        </ul>
    </li><!-- és itt a lényeg-->
    <li>szöveg</li>
</ul>
2

position:relative?

Wabbitseason · 2008. Nov. 13. (Cs), 11.05
Az ilyesmin néha -- hangsúlyozom: néha -- segíteni tud maroknyi position:relative, főleg ha kattinthatatlan lesz egy link, ha png háttere van; de az sem kizárt, hogy menthetetlen a helyzet. Ilyenkor érdemesebb lehet lemondani az elavult böngészők teljes támogatásáról, és egyszerű CSS trükkel valami más formátumú hátteret adni nekik, valahogy így:
ul#sub_menu {
  background: url(pic.png);
}
* html ul#sub_menu { /* MSIE 6 */
  background: url(pic.gif);
}
*:first-child+html ul#sub_menu { /* MSIE 7 */
  background: url(pic.gif);
}
Ha kommentben még egy kicsit tájékoztatod a világot arról, hogy mennyire neheztelsz a Microsoftra, az egy darabig jótékonyan csökkentheti a vérnyomásodat. ;)
3

Egy fokkal egyszerűbb lenne,

tgr · 2008. Nov. 14. (P), 14.20
Egy fokkal egyszerűbb lenne, ha kitennéd a webre, vagy készítenél egy leegyszerűsített vázat, amiben még reprodukálni lehet a hibát.

Standards módban vagy? Azután is fennáll a hiba, hogy átírtad valid HTML-re? hasLayout, overflow, z-index átállítással próbálkoztál?

Egyébként pedig miért ne lenne szép PHP-ből adni first/last osztályt egy lista első/utolsó elemének?
4

Jó ötlet

fchris82 · 2008. Nov. 14. (P), 17.44
Hétvégén felrakok egy vázat a netre, ahol lehet majd nézegetni a hibát.

Egyébként pedig miért ne lenne szép PHP-ből adni first/last osztályt egy lista első/utolsó elemének?
Azért nem szép, mert:
* igazából semmi szükség nem lenne rájuk
* a menüt készítő ciklus így is tele van feltételekkel, most még be kéne tenni 2 if-et
* a css-be külön bele kell varázsolni további 2 osztályt
Szóval számomra ez a megoldás nem szép :P ;)