Hover werkt niet goed in FF

[Verwijderd]

In IE werkt het allemaal goed maar in FF komt er een vreemd vakje omheen en als ik dan klik word active link helemaal niet weergegeven.

Weet iemand waarom dit is? BVD!

Link naar website: http://www.s-v-k.nl/stefa...werp02/website/index.html


Stukje code:

Cascading Stylesheet:

#menu {
    list-style: none;
}

#menu li {
    text-decoration: none;
    border-bottom: 2px solid;
    border-bottom-color: #ff69b4;
    padding: 2px 0 2px 0;
    font-size: 13px;
}

#menu a:link {
    text-decoration: none;
}

#menu a:visited {
    text-decoration: none;
}

#menu li a:active {
    font-size: 13px;
    text-decoration: none;
    background-image:url("../images/buttonbg02.jpg");
    background-repeat: no-repeat;
    display: block;
}

#menu li a:hover {
    background-image:url("../images/buttonbg01.jpg");
    background-repeat: no-repeat;
    text-decoration: none;
    display: block;
}

HTML:

<ul id="menu">
                            <li><a href="#" >Home</a></li>
                            <li><a href="#" >Over ons</a></li>
                            <li><a href="#" >Voorstellingen</a></li>
                            <li><a href="#" >Agenda</a></li>
                            <li><a href="#" >Nieuws</a></li>
                            <li><a href="#" >Fotoboek</a></li>
                            <li><a href="#" >Forum</a></li>
                            <li><a href="#" >Gastenboek</a></li>
                            <li><a href="#" >Contact</a></li>

</ul>

[ Voor 2% gewijzigd door RobIII op 03-10-2007 12:47 . Reden: Code tags toegevoegd ]

[Cartman!]

Wat heb je zelf al geprobeerd?
GoT is geen plek waar je alles kan neergooien en verwachten dat wij het even fixen.

[Verwijderd]

Ik zou niet weten wat ik moet proberen.... Ik kan er op internet ook vrij weinig over vinden. Ik weet dat de a in: #menu li a:hover alleen in IE werkt. Maar hoe ik dat in FF kan laten werken weet ik niet....

[RobIII]

Waarom kunnen mensen de code tags toch telkens niet vinden?

Wat bedoel je met vreemd vakje? Ik zie niets? En de hover lijkt het hier ook prima te doen? Ik zie eig'k geen verschillen tussen IE en FF, behalve de "active" dan?

En heb je je al eens verdiept in de CSS selector pseudo classes die je gebruikt?

[ Voor 62% gewijzigd door RobIII op 03-10-2007 12:52 ]

[Verwijderd]

Als je op een link klikt komt er bij mij zo'n gestippeld lijntje omheen.

[RobIII]

Verwijderd schreef op woensdag 03 oktober 2007 @ 12:52:
Als je op een link klikt komt er bij mij zo'n gestippeld lijntje omheen.

Dat is normaal Als je de page niet reload (href="#") dan blijft dat zo; reload je de page wel, dan zul je met een extra class-je even moeten aangeven welk menu-item "geselecteerd" is.

[ Voor 28% gewijzigd door RobIII op 03-10-2007 12:54 ]

[Verwijderd]

Nee ik heb me nog niet in de CSS selector pseudo classes verdiept. Misschien moet ik dat eens gaan doen.

[Verwijderd]

RobIII schreef op woensdag 03 oktober 2007 @ 12:53:
[...]

Dat is normaal Als je de page niet reload (href="#") dan blijft dat zo; reload je de page wel, dan zul je met een extra class-je even moeten aangeven welk menu-item "geselecteerd" is.

Ok thx!

[Cartman!]

Zoek voor het stippellijntje eens op 'focus' en 'blur' op elementen.

edit: je kunt zoals je ziet berichten wijzigen. 2 posts van jezelf direct achter elkaar is not done.

[ Voor 44% gewijzigd door Cartman! op 03-10-2007 13:15 ]

[crisp]

Dat stippellijntje is de :focus outline CSS property die Firefox in z'n default stylesheet heeft staan. Dat is zo uit te schakelen:

Cascading Stylesheet:

#menu li a:focus {
  outline: none;
}

Maar vanuit accessibility oogpunt is het beter om het gewoon default te laten

[Verwijderd]

crisp schreef op woensdag 03 oktober 2007 @ 13:38:
Dat stippellijntje is de :focus outline CSS property die Firefox in z'n default stylesheet heeft staan. Dat is zo uit te schakelen:

Cascading Stylesheet:

#menu li a:focus {
  outline: none;
}

Maar vanuit accessibility oogpunt is het beter om het gewoon default te laten

Het werkt. thx!