CSS-sel megoldott lista nem jó szélességű IE-ben
Sziasztok!
Szeretnék az oldalamra egy az ablakos környezetekben használatoshoz hasonló menüt amiben a menü elemei linkek. Azt szeretném hogy a kiemelés megjelenjen akkor is ha nem a szövegen áll az egérkurzor. Lenne csak szöveges és olyan is amiben a szöveg előtt van 1 kis kép. Összedobtam erre 1 kis teszt htmlt:Ha felső block elemein mozgatom az egeret akkor IE-ben változik annak a sornak a háttér színe amelyik fölött épp van az egér. Ezt szeretném elérni az alsó blockban is. Ugyanis ott nem így működik... Csak akkor változik a háttér színe ha a linkek szövege felett van a kurzor.
Keresgéltem a neten és találtam 2 oldalt ahol a listát érintő IE bugról van szó:
http://www.webmasterworld.com/forum83/7497.htm
http://www.communitymx.com/content/article.cfm?cid=01DB3
Ezért megcsináltam próbából list nélkül is. Az eredmény hasonló, tehát nem a list kezelésénél van a gond. A list jobb volna mert akkor hasonlóan (azaz egymás alatt lesznek) fog kinézni CSS-t nem kezelő böngészőkben is (szöveges böngészők?).
Először egy általános kérdés: Hogyan lehet egy ilyen menüt megvalósítani úgy hogy IE-ben és Firefox-ban is egyformán jelenjen meg?
Az előző kérdésből következik a következő kérdésem: Mit nem csinálok jól ill mi hiányzik még ahhoz, hogy olyan legyen amilyet szeretnék?
A jelenlegi megoldásom listával Firefox-ban olyan amilyennek képzelem, IE-ben pedig csak a képet is tartalmazó soroknál olyan. A fenti teszt HTML-t ebből "szűrtem" ki. Most nincs lehetőségem letesztelni a fentieket Firefox-szal csak IE-vel, de gyanítom, hogy Firefox-szal ok lesz. Tehát kíváncsi vagyok hogyan csinálnátok ezt meg böngészőfüggetlenül.
Köszi!
■ Szeretnék az oldalamra egy az ablakos környezetekben használatoshoz hasonló menüt amiben a menü elemei linkek. Azt szeretném hogy a kiemelés megjelenjen akkor is ha nem a szövegen áll az egérkurzor. Lenne csak szöveges és olyan is amiben a szöveg előtt van 1 kis kép. Összedobtam erre 1 kis teszt htmlt:
<HTML>
<HEAD>
<style type="text/css"><!--
BODY {
PADDING: 0px;
MARGIN: 0px;
FONT: 76% Verdana, Arial, Helvetica, sans-serif;
COLOR: #000;
}
A {
FONT-WEIGHT: bold; TEXT-DECORATION: none
}
A:link, A:visited {
COLOR: black;
}
A:hover {
COLOR: #ff0000;
}
.item-list UL {
/* Így tűnik el a bullet a listában lévő elemek elől. Jó ez a megoldás? */
padding: 0px;margin:0px;
}
/* Ez kell ahhoz, hogy a menü teljes szélességében látszódjon a csík, de ilyenkor a sorok között hézag lesz. Miért? */
.item-list A {
DISPLAY: block;
}
.block {
WIDTH: 180px;
BACKGROUND-COLOR: gray;
padding: 0px; margin:0px;
margin-bottom: 1em;
}
.block A:hover {
BACKGROUND-COLOR: yellow;
}
--></style>
</HEAD>
<BODY>
<DIV class="block">Van kép a listában
<DIV class=item-list>
<UL>
<LI><A href="#"><IMG src="" height="1em">1. képpel</A>
<LI><A href="#"><IMG src="" height="1em">2. képpel</A>
<LI><A href="#">3. kép nélkül</A></LI>
</UL>
</DIV>
</DIV>
<DIV class="block">Nincs kép sehol
<DIV class=item-list>
<UL>
<LI><A href="#">1. kép nélkül</A>
<LI><A href="#">2. kép nélkül</A>
<LI><A href="#">3. kép nélkül</A></LI>
</UL>
</DIV>
</DIV>
A fentiek list nélkül
<DIV class="block">Van kép a listában
<DIV class=item-list>
<A href="#"><IMG src="" height="1em">1. képpel</A>
<A href="#"><IMG src="" height="1em">2. képpel</A>
<A href="#">3. kép nélkül</A>
</DIV>
</DIV>
<DIV class="block">Nincs kép sehol
<DIV class=item-list>
<A href="#">1. kép nélkül</A>
<A href="#">2. kép nélkül</A>
<A href="#">3. kép nélkül</A>
</DIV>
</DIV>
</BODY>
</HTML>
Keresgéltem a neten és találtam 2 oldalt ahol a listát érintő IE bugról van szó:
http://www.webmasterworld.com/forum83/7497.htm
http://www.communitymx.com/content/article.cfm?cid=01DB3
Ezért megcsináltam próbából list nélkül is. Az eredmény hasonló, tehát nem a list kezelésénél van a gond. A list jobb volna mert akkor hasonlóan (azaz egymás alatt lesznek) fog kinézni CSS-t nem kezelő böngészőkben is (szöveges böngészők?).
Először egy általános kérdés: Hogyan lehet egy ilyen menüt megvalósítani úgy hogy IE-ben és Firefox-ban is egyformán jelenjen meg?
Az előző kérdésből következik a következő kérdésem: Mit nem csinálok jól ill mi hiányzik még ahhoz, hogy olyan legyen amilyet szeretnék?
A jelenlegi megoldásom listával Firefox-ban olyan amilyennek képzelem, IE-ben pedig csak a képet is tartalmazó soroknál olyan. A fenti teszt HTML-t ebből "szűrtem" ki. Most nincs lehetőségem letesztelni a fentieket Firefox-szal csak IE-vel, de gyanítom, hogy Firefox-szal ok lesz. Tehát kíváncsi vagyok hogyan csinálnátok ezt meg böngészőfüggetlenül.
Köszi!
<Nincs cím>
Találtam pár hozzászólást ami ezzel foglalkozik. Lehet, hogy sikerül is megoldanom.
Ha még nem sikerült volna...
Üdv.:
nAgYu
<Nincs cím>
hogyan?
Bocsi
DISPLAY: block;
WIDTH: 100%
}
Tehát a nAgYu által beküldött megoldás volt a jó, csak én nem itt akarom megadni a méretet hanem "kintebb". Köszi a segítséget!
IE bug
IE rulez...