[CSS]List werkt maar half in IE

[TeeDee]

Goedenavond, ik ben nu geruime tijd bezig om een raar irritant probleem in IE op te lossen.

Onderstaande HTML:

HTML:

        <ul id="navigation">
            <li><a href="default.html" id="nav_witproces" title="Wit Proces">Wit-Proces</a></li>
            <li><a href="default.html" id="nav_voorenna" title="Voor en Na">Voor en Na</a></li>
            <li><a href="default.html" id="nav_instruct" title="Instructies">Instructies</a></li>
            <li><a href="default.html" id="nav_qa" title="Vraag en Antwoord">Vraag en Antwoord</a></li>
            <li><a href="default.html" id="nav_bestelpagina" title="Bestelpagina">Bestelpagina</a></li>
            <li><a href="default.html" id="nav_reactiesklanten" title="Reacties Klanten">Reacties Klanten</a></li>
            <li><a href="default.html" id="nav_hoofdpagina" title="Hoofdpagina">Hoofdpagina</a></li>
        </ul>

in combinatie met deze CSS:

Cascading Stylesheet:

/* Navigation */
#navigation {
padding-top:36px;
}

#navigation li {
    list-style-type:none;
    float:left;
    margin:0;
    padding:0;
}

#navigation a {
    font-weight:bold;
    text-transform:uppercase;
    text-decoration:none;
    color:#fff;
    font-size:9px;
    display:block;
    padding-left:10px;
    padding-top:4px;
}

/* subtracted 10px for padding-left */
#nav_proces {
    width:84px;
    height:20px;
}

#nav_voorenna {
    width:85px;
    height:20px;
}

#nav_instruct {
    width:92px;
    height:20px;
}

#nav_qa {
    width:122px;
    height:20px;
}

#nav_bestelpagina {
    width:96px;
    height:20px;
}

#nav_reactiesklanten {
    width:111px;
    height:20px;
}

#nav_hoofdpagina {
    width:89px;
    height:20px;
}
/* mouse overs */
#nav_proces:hover {background-image:url('i/buttons/proces_hover.jpg');}
#nav_voorenna:hover {background-image:url('i/buttons/voor_en_na_hover.jpg');}
#nav_instruct:hover {background-image:url('i/buttons/instructies_hover.jpg');}
#nav_qa:hover {background-image:url('i/buttons/vraag_en_antwoord_hover.jpg');}
#nav_bestelpagina:hover {background-image:url('i/buttons/bestelpagina_hover.jpg');}
#nav_reactiesklanten:hover {background-image:url('i/buttons/reacties_klanten_hover.jpg');}
#nav_hoofdpagina:hover {background-image:url('i/buttons/hoofdpagina_hover.jpg');}

zorgt voor het volgende probleem.

De elementen "nav_qa", "nav_bestelpagina" en "nav_reactiesklanten" blijven 'gehoverd'. Dat wil zeggen, met een onmouseout gaan ze niet terug naar de default. De rest van de elementen werken perfect.

Wat heb ik geprobeerd (en zonder resultaat dus)
• de ID's aangepast. nav_qa was eerst nav_vraagenantwoord. Ik dacht, misschien de lengte van de ID naam
• a#nav_qa een background-image:none; gegeven.
• de anchors hadden eerst een # deze heb ik veranderd in default.html. Zodra er geklikt wordt zie ik de background zwart worden bij een mouseout.
• voor #nav_qa:hover stond er eerst a#nav_qa:hover
• alle CSS ervoor en erna verwijderd.

Wat nog 'gekker' is: Zodra ik hover over een van de boosdoeners en ik open een window eroverheen, ga weer terug dan is het weer zoals het moet zijn.

Ik ben niet zozeer te einde raad, maar het is ontzettend irritant. In Firefox werkt het allemaal prima. In IE ook wel, behalve op die 3 na dus.

[Rowanov]

Geef eens een basis mee in de vorm van a:link, dat helpt allicht. Je hebt standaard trouwens ook geen achtergrond gedefineerd, maar daarvan vraag ik me af of het nodig is.

[BasieP]

kan je een voorbeeld online zetten? (testcase)
dan kunnen we iig kijken of het aan jouw browser of aan de browser in het algemeen ligt

[ Voor 196% gewijzigd door BasieP op 31-10-2006 23:38 ]

[TeeDee]

De testcase is te vinden op http://teedee.dynu.com/open_dir/testcase/default.html

[ Voor 86% gewijzigd door TeeDee op 01-11-2006 00:32 ]

[TeeDee]

Hmm, ik zie nu net dat de testcase niet helemaal compleet is. (Proces werkt niet) Maar het probleem komt wel naar voren, dus bij mij is het gewoon te reproduceren.

Op mijn werk (nu) en thuis (gisteravond).

Het betreft hier op beide machines IE 6.

[ Voor 4% gewijzigd door TeeDee op 01-11-2006 09:40 ]

[Verwijderd]

Heeft toch te maken met het ontbreken van de waarde voor background-image in de stijl voor je a-elementen, in de niet-hover status.

code:

a, a:visited, a:active {
    display: block;
    height: 20px;
    background-color: black;
    color: white;
    padding: 10px;
    background-image: url('');
}

a:hover {
    background-image: url('afbeelding.jpg');
}

[TeeDee]

Maar dan zou het bij alle buttons zo moeten zijn toch? Of is dat gewoon raar gedrag van IE?

Verwijderd schreef op woensdag 01 november 2006 @ 09:41:
Heeft toch te maken met het ontbreken van de waarde voor background-image in de stijl voor je a-elementen, in de niet-hover status.

code:

a, a:visited, a:active {
    display: block;
    height: 20px;
    background-color: black;
    color: white;
    padding: 10px;
    background-image: url('');
}

a:hover {
    background-image: url('afbeelding.jpg');
}

Voor zover ik kan zien heb ik jouw tip ingebouwd, maar het resultaat blijft hetzelfde.

[ Voor 75% gewijzigd door TeeDee op 01-11-2006 09:49 ]

[TeeDee]

Hmm, ik heb nog even zitten rommelen met background colors e.d. om te checken waar dat zwart (na een onClick) vandaan kwam, maar daar kan ik niks over zeggen.

Verder heb ik de tip van ivy nog verder doorgevoerd door ook op de a#[id] een background-image:url(''); te plaatsen maar ook dat geeft geen resultaat.

[OxiMoron]

Is background-image: none; niet beter?

Dat is volgens mij de default waarde.

[TeeDee]

OxiMoron schreef op woensdag 01 november 2006 @ 16:41:
Is background-image: none; niet beter?

Dat is volgens mij de default waarde.

Aangepast, en wederom zonder resultaat. De vraag is nu: krijgen jullie ook het 'Fenomeen' te zien als je de testcase met IE bekijk?

Nog even voor het mooie een test met Opera en Safari gedaan op de testcase en deze doet het naar verwachting ook perfect.

[ Voor 32% gewijzigd door TeeDee op 01-11-2006 17:03 ]

[user109731]

IE valt over je padding op de a. Bepaalde stukken worden dan niet goed gerepaint lijkt het. Een a:hover { zoom:1 } lost het hier wel op, maar het lijkt toch ook weer geen hasLayout issue, want je gebruikt al o.a. height en width.

Best wel interessant opzich

Het lijkt in IE7 gefixt overigens.

[ Voor 12% gewijzigd door user109731 op 01-11-2006 17:13 ]

[TeeDee]

Hmm, ik heb die zoom nu toegevoegd (padding nog maar niet aangezeten ) en dat lost het op.

Nu nog even lezen wat dat hele zoom gebeuren doet/is.

Het rare is dat het dus alleen die 3 elementen was.

Edit:
Heeft dat te maken met het hasLayout gedoe? Wist ik niet. Verder lezen.

Edit 2:
De url naar de testcase is veranderd!

[ Voor 49% gewijzigd door TeeDee op 01-11-2006 17:19 ]