CSS-sel megoldott lista nem jó szélességű IE-ben

MrPrise · 2005. Nov. 5. (Szo), 15.20

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:

<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>


<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>

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!

■

HTML, CSS, JavaScript, Ajax

csirip

<Nincs cím>

MrPrise · 2005. Nov. 5. (Szo), 15.46

Hopsz. Előbb itt is rá kellett volna keresnem úgy látom...
Találtam pár hozzászólást ami ezzel foglalkozik. Lehet, hogy sikerül is megoldanom.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Ha még nem sikerült volna...

nAgYu · 2005. Nov. 7. (H), 08.06

Valahogy így:

...
.item-list A {
display: block;
width: 180px;
}
...


...
.item-list A {
display: block;
width: 180px;
}
...

Nálam működik (IE6+SP2)

Üdv.:
nAgYu

A hozzászóláshoz regisztráció és belépés szükséges
új téma

<Nincs cím>

MrPrise · 2005. Nov. 7. (H), 11.26

Köszi. Sikerült megoldanom.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

hogyan?

Hojtsy Gábor · 2005. Nov. 7. (H), 11.40

Ha már a közösséghez fordultál a kérdéssel, akkor úgy lenne korrekt, ha szépen leírnád, hogy mi volt a megoldás. Akkor lenne értelme ennek a témának, különben nincs...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Bocsi

MrPrise · 2005. Nov. 8. (K), 13.30

Bocsi, de mivel több téma is van fent ahol le volt írva a megoldás (itt találtam meg én is), gondoltam nem írom le újra. Egyébként a fentiből nekem a width:100% hiányzott. Pontosabban innen:

.item-list A {
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!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

IE bug

Jano · 2005. Nov. 8. (K), 14.17

Sajnos ez egy IE bug. Ha nem adsz meg a disply:block-ra modósított linknek explicit szélességet akkor függölegesen "kitüremkedik".

A hozzászóláshoz regisztráció és belépés szükséges
új téma

IE rulez...

MrPrise · 2005. Nov. 8. (K), 15.27

Még csak most kezdtem el komolyabban foglalkozni a webes dolgokkal, de máris kezdem magam úgy érezni mintha egy olyan programozó lennék aki írt egy programot, de nem tudja hogy az miért ír ki A betű helyett B-t amikor a programjában minden ok, megfelel a szabványnak és A betűt kellene kiírnia. Arra nem is gondolnék egy program esetében, hogy esetleg a fordítóprogramban van a hiba ha előtte azzal már sok más programot lefordítottam és azoknál nem volt gond. Most már annyiból "könnyebb" a helyzetem, hogy gyanakvóbb leszek és ha valami nem úgy néz ki ahogy kellene neki akkor megnézem az IE bug listát. ;-) Persze párhuzamosan nézem Firefox-ban is, már akkor is keresgélek ha 2 böngészőben máshogy néznek ki a dolgok. Köszi!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés