[HTML + CSS] MouseHover probleem in IE*

[Verwijderd]

Beste mensen,

we zitten hier met een redelijk vreemd probleempje. We hebben een list met links, gebruikt als navigatie menu. Hier staan afbeeldingen bij. Deze zijn mbv CSS aan de achtergrond van het LI item toegevoegd. Vervolgens is er ook een hover actie, welke een ander plaatje op de achtergrond plaatst. Dit plaatje heeft exact dezelfde dimensies alleen de inhoud is ingekleurd.
Nu is het probleem; bij de mouseover verspringt de afbeelding bij instellingen, de rest vrspringt niet!

source html list:

code:

<ul>
          <li class="opties_profiel"><a href="/demo/portaal/teacher/wiewatwaar/mijnprofiel/">Profiel</a></li>
          <li class="opties_instellingen"><a href="/demo/portaal/teacher/home/instellingen/">Instellingen</a></li>
          <li class="opties_zoeken"><a href="/demo/portaal/teacher/home/zoeken/">Uitgebreid zoeken</a></li>
          <li class="opties_help"><a href="#" onClick="window.open('/demo/common_files/pages/help_teacher.php','popup','width=600,height=550,scrollbars=yes,location=no,toolbar=no');">Help</a></li>
          <li class="opties_uitloggen"><a href="/demo/portaal/logout.php">Uitloggen</a></li>
        </ul>

CSS source

code:

#tpl_opties .opties_profiel { background: url(/demo/common_files/icons/options_profiel.gif) no-repeat right center; }
#tpl_opties .opties_instellingen { background: url(/demo/common_files/icons/options_instellingen.gif) no-repeat right center; }
#tpl_opties .opties_zoeken { background: url(/demo/common_files/icons/options_zoeken.gif) no-repeat right center; }
#tpl_opties .opties_help { background: url(/demo/common_files/icons/options_help.gif) no-repeat right center; }
#tpl_opties .opties_uitloggen { background: url(/demo/common_files/icons/options_uitloggen.gif) no-repeat right center; }

#tpl_opties .opties_profiel a:hover { color: #C00; background: url(/demo/common_files/icons/options_profiel_active.gif) no-repeat right center; }
#tpl_opties .opties_instellingen a:hover { background: url(/demo/common_files/icons/options_instellingen_active.gif) no-repeat right center; }
#tpl_opties .opties_zoeken a:hover { background: url(/demo/common_files/icons/options_zoeken_active.gif) no-repeat right center; }
#tpl_opties .opties_help a:hover { background: url(/demo/common_files/icons/options_help_active.gif) no-repeat right center; }
#tpl_opties .opties_uitloggen a:hover { background: url(/demo/common_files/icons/options_uitloggen_active.gif) no-repeat right center; }

Afbeeldingen:
Mouse over
Idle state


Zoals wij hier kunnen zien, is er geen verschil in de links. Waarom de rest het perfect doet, maar instellingen een pixel verspringt (omhoog) is daarom een raadsel. Ook als twee maal dezelfde afbeelding gebruikt wordt, verspringt de hover.

Handig om toe te voegen: Gebeurd alleen in IE.

Is er iemand die hier een frisse blik op kan werpen?

[whoami]

HTML en CSS Horen thuis in Webdesign.
Vandaar dat ik dit topic verplaats.
Verzin in het vervolg ook even een geschikte titel aub
-> WEB

[AK47]

code:

#tpl_opties .opties_profiel { background: url(/demo/common_files/icons/options_profiel.gif) no-repeat right center; }

#tpl_opties .opties_profiel a:hover { color: #C00; background: url(/demo/common_files/icons/options_profiel_active.gif) no-repeat right center; }

Waarom onder toekennen aan a en boven niet?

[ Voor 28% gewijzigd door AK47 op 05-12-2006 12:09 ]

[Verwijderd]

Oh sorry, wat stom.
Denk dat ik met mijn gedachte weer eens ergens anders zat.
Excuses voor het verkeerd posten.

@AK47,

Bedankt man, dat was het probleem.

[ Voor 29% gewijzigd door Verwijderd op 05-12-2006 12:08 ]

[RM-rf]

'de css-shorthand background: url(file.gif) no-repeat right center; is geen valide CSS

wat betreft de positionering van de background moet je eerst de vertiucale positionering en dan de horizontale...:
ik vermoed dat background: url(file.gif) no-repeat center right; het probleem misschien al oplost.

edit
probleem was toch anders, oplossing AK47

[ Voor 8% gewijzigd door RM-rf op 05-12-2006 12:15 ]

[BtM909]

RM-rf schreef op dinsdag 05 december 2006 @ 12:14:
'de css-shorthand background: url(file.gif) no-repeat right center; is geen valide CSS

wat betreft de positionering van de background moet je eerst de vertiucale positionering en dan de horizontale...:

Hoe bedoel je dat? shorthand parameters worden vziw onafhankelijk van de positie geevalueerd?

[Zoefff]

BtM909 schreef op dinsdag 05 december 2006 @ 14:27:
[...]

Hoe bedoel je dat? shorthand parameters worden vziw onafhankelijk van de positie geevalueerd?

Ja, maar de background-position wordt gezien als 1 ding, ook al zijn het mogelijk meerdere woorden. Waarbij afaik "right center" niet correct is (maar "center right" wel).

[BtM909]

Dat maakt niks uit als ik de specs zo lees (en de voorbeelden erbij bekijk):

http://www.w3.org/TR/CSS2...opdef-background-position

If only one percentage or length value is given, it sets the horizontal position only, and the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of keyword, length and percentage values are allowed, (e.g., '50% 2cm' or 'center 2cm' or 'center 10%'). For combinations of keyword and non-keyword values, 'left' and 'right' may only be used as the first value, and 'top' and 'bottom' may only be used as the second value. Negative positions are allowed.

[RM-rf]

BtM909 schreef op dinsdag 05 december 2006 @ 14:27:
[...]

Hoe bedoel je dat? shorthand parameters worden vziw onafhankelijk van de positie geevalueerd?

nee, ik had het idd fout, zowel 'right center kan alswel 'center right', is volledig valide

[Zoefff]

Daar moet ik me inderdaad bij aansluiten, excuus

Er wordt wél onderscheid gemaakt als je een combinatie van keywords en waarden gebruikt, je moet dan expliciet het formaat "x, y" aanhouden. Daar vergiste ik me stiekem een beetje mee