5 berichten aan het bekijken - 1 tot 5 (van in totaal 5)
  • Q:
    Bijdrager
    freshface

    [CSS] in ol probleem [IE]

    Hey

    Op mijn eigen site http://www.freshface.be heb ik al gemerkt dat het eerste <li>-element in een lijst niet werkt in internet explorer op pc.
    De link werkt wel, maar het hoveren niet.
    De achtergrondkleur verandert niet.

    Hier staat de css file die dat regelt: http://www.freshface.be/styles/misc.css en dit is de code

    [code:1:f741a5b9cb]
    #content-right ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    }

    #content-right li
    {
    color:#39372C;
    border-bottom:1px solid #E4DBC3;

    }

    #content-right li a:link,
    #content-right li a:visited
    {
    text-decoration:none;
    display:block;
    color:#39372C;
    padding:3px 0 3px 25px;
    }

    #content-right li a:hover
    {
    padding-left:23px;
    text-decoration:none;
    display:block;
    background:#E4DBC3;
    border-left:2px solid #39372C;
    }
    [/code:1:f741a5b9cb]

    Iemand een idee?

    Bijdrager
    addyboy

    hmm, internet explorer zou in principe a’s wel moeten hoveren, maar ik denk dat het toch iets heeft te maken met het feit dat IE alleen a’s kan hoveren. Misschien dus even een behavior gebruiken voor IE:

    http://www.xs4all.nl/~peterned/csshover.html (volgens mij was dat de link naar de juiste hover behavior, maar weet het niet zeker)

    Dan kun je namelijk gewoon li:hover of iets dergelijks doen, en doet IE het ook

    Geblokkeerd
    Geanonimeseerde gebruiker

    het is een (van de vele) IE bugs geef je link een width en zet voor de niet debiele browsers daarna de width weer op auto met een ancestor ….

    #navigatie li
    {
    float:left;
    margin:0px;
    padding:0px;
    }

    #navigatie a
    {
    padding:0px 20px;
    text-decoration:none;
    display:block;
    float: left;
    width: .1em; /* maakt blocklevel links in IE clickable */
    }
    /* iemac ellende met floats opruimen */
    #navigatie a {float:none;} /* einde hack*/

    html>body #navigatie a {width:auto;}

    Bijdrager
    tennapel

    levski, dat is de hack voor IE/Mac, IE/Windows gaat zich daar niets van aantrekken.

    Ik heb wat zitten testen en het lijkt een combinatie van wat factoren te zijn. Ik kan het probleem alleen niet zo snel reduceren en gezien de omvang van de css is me dat ook wat teveel van het goede.

    Als je wilt traceren waar het probleem zit zou ik de volgende stappen ondernemen:
    zorg dat er nergens floats meer in zitten (uitcommentarieren).
    bouw vervolgens de CSS van het menu stap voor stap op en kijk wanneer IE de fout in gaat.
    Als je dat opgelost hebt, voeg de floats toe voor de layout en bekijk of IE zich dan nog steeds netjes gedraagt.

    Een wilde gok, maar als je het volgende toevoegt:
    [code:1:666cb4b7cc]
    * html #content-right ul {
    height : 1%;
    }[/code:1:666cb4b7cc]
    zou IE zich wel eens opeens kunnen gaan gedragen.

    Bijdrager
    freshface

    Bedankt tennapel.
    Je wilde gok werkt.

5 berichten aan het bekijken - 1 tot 5 (van in totaal 5)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.