[css] li:hover wel in ie7 en ff maar ineens (?) niet in ie6 - Softwareontwikkeling

donderdag 17 januari 2008 21:08

Acties:

huh ?

Topicstarter

Ben bezig met een 3 kolommen template (eerste poging om fatsoenlijk css/xhtml te gebruiken) en wil bij een <li>-tag een hover (mouseover dus) te doen. Dat heb ik op de volgende manier gedaan:

Cascading Stylesheet:

.moduleBlock ul li:hover
{
    background-color:white;
}

Werkt in ie7 en in ff2, heb geen ff1 dus kan het daarin niet testen. Ik wil dat de template op zijn minst in ie6, ie7 en ff2 werkt.

Verder heb ik een jscript die de achtergrond verplaatst. Wederom in ie7 en ff2 gaat het prima maar in ie6 knippert heel nerveus het pijltje/zandlopertje muispijltje..

Ik zou graag weten wat ik fout heb gedaan of waarom het niet werkt (css fout in ie6 ?)

Binnen 5 minuten staat de pagina waarover ik het heb op inet
De webpagina is hier te vinden

[ Voor 5% gewijzigd door shades op 17-01-2008 21:10 ]

https://k1600gt.nl

donderdag 17 januari 2008 21:19

Acties:

Copyman

Dode muis

In IE6 kan je de hover pseudo-class alleen maar toepassen op het anchor element. Nu weet ik niet precies wat je van plan bent, maar je kan het oplossen door een anchor in je list-item te zetten en hier vervolgens je :hover van stylen.

Zeer belangrijke informatie: Inventaris

donderdag 17 januari 2008 21:25

Acties:

shades

huh ?

Topicstarter

Copyman schreef op donderdag 17 januari 2008 @ 21:19:
In IE6 kan je de hover pseudo-class alleen maar toepassen op het anchor element. Nu weet ik niet precies wat je van plan bent, maar je kan het oplossen door een anchor in je list-item te zetten en hier vervolgens je :hover van stylen.

Wat ik van plan ben ? dat kan je dus zien als je ie7/ff hebt. Er komt wel een <a>-tje te staan omdat het uiteindelijk een link wordt maar dat achtergrond zal niet verder gaan dan de test van die link lang is...

Is erg geen oplossing via css te maken voor dit probleem ?

Ook enig idee waarom die jscript loopt te bokken ?

[ Voor 4% gewijzigd door shades op 17-01-2008 21:33 ]

https://k1600gt.nl

donderdag 17 januari 2008 21:33

Acties:

f.v.b

Je kan de a de volledige breedte van de li geven door er een display: block op te zetten. Dat heeft meteen het voordeel dat bezoekers niet op de tekst hoeven te klikken maar de volledige breedte van het menu kunnen gebruiken.

Als je dan de hover op de a zet, dan werkt het ook in IE 6.

Ook enig idee waarom die jscript loopt te bokken ?

???

Don't erase all files?
[Yes] [No]

donderdag 17 januari 2008 21:38

Acties:

Toolskyn

€ 500,-

Eventueel kun je ook het behaviour bestandje van deze pagina gebruiken. Dan kun je op alle elementen :hover toepassen.

gewooniets.nl

donderdag 17 januari 2008 21:41

Acties:

shades

huh ?

Topicstarter

f.v.b schreef op donderdag 17 januari 2008 @ 21:33:
Je kan de a de volledige breedte van de li geven door er een display: block op te zetten. Dat heeft meteen het voordeel dat bezoekers niet op de tekst hoeven te klikken maar de volledige breedte van het menu kunnen gebruiken.

Als je dan de hover op de a zet, dan werkt het ook in IE 6.

[...]

???

Ej, die techniek ken(de) in (nog) niet. Ga het proberen. Over dat jscript verhaal. De body-tag ziet er als volgt uit:

HTML:

1	<body onload="ShiftBanner();">

Inhoud van shiftbanner:

JavaScript:

// instellingen van de ShiftBanner ------------------------ //
var picLength = 1243;
var shiftSpeed = 1;
var shiftStep = 1;
var shiftStart = 0;
var shift = shiftStart;
var direction = Math.random();
var t;
if (direction >= 0.5) { shiftStep = shiftSpeed * -1; }
// -----------------------------------------------------

/*
    simpel scriptje om achtergrond te shiften
*/
function ShiftBanner()
{
    var pic = document.getElementById('bannerContainer').style;
    pic.backgroundPosition = ' ' + shift + 'px';
    shift = shift + shiftStep;
    
    if (shift > picLength)
    {
        shift = shiftStart;
    }
    
    t = setTimeout('ShiftBanner()',100);
}

In ie6 verandert het muispijltje in een muispijltje + klein zandlopertje en knippert nerveus. In ie7 en ff is dat niet het geval. Vind ik nogal vreemd..

Toolskyn schreef op donderdag 17 januari 2008 @ 21:38:
Eventueel kun je ook het behaviour bestandje van deze pagina gebruiken. Dan kun je op alle elementen :hover toepassen.

Dat is helemaal geen oninteressante pagina en ga ik zeker even even "tot me nemen" maar ik probeer het eerst even met display:block.

edit 1:
display:block werkt dus.

edit 2:
Vraagje nog: welke tags mag je nu binnen een <a> plaatsen.. Ik had begrepen dat <div> binnen <a> uit den boze is maar wat als je nu het volgende wilt: (ff code voor het uitlijnen)

code:

1 2	» 1-'08 dit is een tekst [3] » 12-'08 dit is een andere tekst [35]

Iedere regel moet dus een link worden. dacht eerst aan het onderstaande maar volgens mij gaat dat niet werken. Beetje prutsen met float of margins maar ja.. tabel van 1 regel zou hier beter werken denk ik

HTML:

1	<a href="#"><div>»</div><div>12-'08</div><div>dit is een andere tekst</div><div>[35]</div></a>

[ Voor 27% gewijzigd door shades op 17-01-2008 22:14 ]

https://k1600gt.nl