#footer a, #footer a:visited

[Verwijderd]

Cascading Stylesheet:

#footer {
    width: 960px;
    margin: 0 auto;
    height: 30px;
    background: url(../images/footer_bg.gif) no-repeat;
    padding-top: 45px;
    color: #a1a1a1;
}

#footer a, #footer a:visited {
    color: #d74b00;
    text-decoration: none;
}

#footer a:hover, #footer a:active {
    color: #ff5900;
    border-bottom: 1px dotted #a1a1a1;
}

Met deze code krijg ik in FF wel een dotted border op a:hover onder de link, in IE niet.

Iemand een idee?

[krvabo]

IE(6) ondersteunt geen :hover.

IE7 weet ik niet

Oplossing.. ehm.. javascript? (onmouseover.. )

[ Voor 62% gewijzigd door krvabo op 07-07-2007 19:55 ]

[Verwijderd]

Huh? IE6 geen :hover? Hoe kan het dan dat de link wel van kleur verandert? Het gaat om een tekstlink btw

[krvabo]

Verwijderd schreef op zaterdag 07 juli 2007 @ 19:58:
Huh? IE6 geen :hover? Hoe kan het dan dat de link wel van kleur verandert? Het gaat om een tekstlink btw

Ah sorry, een <a> wordt idd wel ondersteunt.

Maarehm, doe eens bij de :hover en :active ervoor:

Cascading Stylesheet:

text-decoration: none; 

[edit] Zoals je dus daarboven ook doet

[ Voor 5% gewijzigd door krvabo op 07-07-2007 20:06 ]

[Verwijderd]

Mmm helaas dat werkt niet! Vind het wel weer een typische IE bug, die *** browser zit altijd te zeiken!

EDIT: Het gaat om deze pagina, onderaan de footer:

http://www.rudolfbos.nl/q/final/

[ Voor 30% gewijzigd door Verwijderd op 07-07-2007 20:09 ]

[Mei]

IE kent :active niet. Volgens mij skipt IE dan de hele regel. Maakt dus even twee aparte stijldefinities aan, eentje met :hover en eentje met :active. Ditzelfde gebeurt als je child selectors op een regel gebruikt:

Cascading Stylesheet:

li li, li>a{color:red;}

IE snapt de li li wel, maar omdat het li>a niet kent slaat het de hele regel over, waardoor ook de dingen die IE wél kent niet toegepast worden.

[Verwijderd]

Helaas, ook dat werkt niet.

[Mei]

Hoe heb je het geprobeerd? Ik bedoelde dus zoiets:

code:

li a{color:red;}
li>a{color:red;}

en niet

code:

li a,
li>a
{color:red;}

(Zeg het maar even voor de zekerheid)

[Verwijderd]

Ja, heb het geprobeerd. Maar helaas zonder resultaat.

[krvabo]

Het lijkt er inderdaad op dat het niet echt lekker kan.

Ik heb de pagina even gesaved om wat lokaal te testen, maar inderdaad..

Cascading Stylesheet:

border: 1px solid black;

op het :hover-element geeft alleen links en rechts een border, boven en onder niet.

[Verwijderd]

Dan zou je misschien denken dat het iets met padding of margin te maken heeft? Maar ook daar heb ik nu even mee gestoeid en maakt allemaal niks uit.

[krvabo]

Verwijderd schreef op zaterdag 07 juli 2007 @ 20:47:
Dan zou je misschien denken dat het iets met padding of margin te maken heeft? Maar ook daar heb ik nu even mee gestoeid en maakt allemaal niks uit.

Klopt, het enige wat tot nu toe is gelukt bij mij is

Cascading Stylesheet:

vertical-align: super;

mee te geven.. dan werkt het wel, maar dan zit je link ineens een paar mm hoger

[Verwijderd]

Haha, nee daar zit ik nou ook weer niet op te wachten ;-)

[Verwijderd]

Typisch geval van klok en klepel, maar heeft dit niet te maken met het haslayout-probleem?

Edit:
Om dit te checken zou je volgens MSDN als extra css

Cascading Stylesheet:

zoom:1;

toe moeten voegen.

Edit 2:
O ja, 1px dotted borders worden als dashed weergegeven in IE<7. Misschien ook handig om te weten...

[ Voor 65% gewijzigd door Verwijderd op 07-07-2007 22:05 ]

[krvabo]

Hm, bijna-fix..

Cascading Stylesheet:

#footerL a:hover {
    color: #ff5900;
    text-decoration: none;
    display: inline-block;
    margin-bottom: -3px;
    border-bottom: 1px dashed black;
}

Nu verspringt de tekst nog een heel klein beetje.

Teksten waar ik wat aan had:
http://www.satzansatz.de/cssd/onhavinglayout.html
http://www.tek-tips.com/v...ad.cfm?qid=1381446&page=1

[edit] Door er nog een margin-top bij te geven verspringt de tekst niet meer, maar alleen de link.

[ Voor 11% gewijzigd door krvabo op 07-07-2007 21:10 ]

[Verwijderd]

Het moet simpeler kunnen, slaat natuurlijk nergens op dat je een border-bottom op zo'n omslachtige manier moet topassen en dat het dan uiteindelijk ook nog verspringt. Zit er niet een typefout in die ik over het hoofd zie, of een fout in de structuur oid?

[krvabo]

Typfout? nee.

Je code ziet er netjes uit, en ook de opbouw.
Het enige hoe je het nog zou kunnen oplossen (geloof ik) is als je verder geen flow zou gebruiken, dan kan je een display: block; float: left; gebruiken. Dat lost het geloof ik ook op. Als je dat nu doet dan komt de link op de volgende regel te staan door display: block;.

Uiteindelijk kom je hier denk ik niet echt uit zonder trial-en-error. Blame IE