Firefox en Chrome geven de navigatiebalk anders weer dan Internet Explorer. Al scheelt het 1px, wat kan ik hieraan doen?

Op de afbeelding is goed te zien als ik over het kopje ‘Sport’ ga, dat de het hover plaatje 1px te ver doorgaat naar onder. Ook al is het maar een klein schoonheidsfoutje ik zou er toch graag van af willen.

Mijn CSS-code:
#headernav ul {text-align:left;  margin:8px 0 0 -40px;}
#headernav ul li {list-style-type:none; font:13px Arial ; padding: 0 0 0 0; display:inline;}
#headernav ul li a {text-decoration:none;  color:white; font-weight:bold; padding: 15px 10px 10px 10px; }
#headernav ul li a:hover {color:#0691C4; background-color:#fff; margin:-2px -1px 0 -1px; -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px; border-top: 1px solid #999999; border-left: 1px solid #999999; border-right: 1px solid #999999;
-moz-box-shadow: inset 0 22px 22px -22px #BBBBBB; -webkit-box-shadow: inset 0 22px 22px -22px #BBBBBB; box-shadow: inset 0 22px 22px -22px #BBBBBB; }

Ik zou dan moeten zorgen dat de code in Firefox en Chrome wel goed weergegeven wordt en een apart script maken voor IE.
Moet ik dan met een gaan werken hoe zorg ik dan dat IE deze code verwerkt in plaats van bovenstaande bij de CSS-code?
Waar moet ik die IE code plaatsen? Zijn er nog andere oplossingen?

Weet jij het antwoord?

/2500

In je code zie ik zo snel geen probleem, dus het zou kunnen dat dit simpelweg een afwijking is van IE. Als je een linkje hebt met een voorbeeld van het probleem, dan is het wel gemakkelijker om naar de oorzaak te zoeken. Wanneer we te maken hebben met een afwijking van IE (bijvoorbeeld een alternatieve interpretatie, of een bugje in IE) zou ik je aanraden om het zo te laten. Zoals je aangeeft kun je werken met een conditioneel element, deze plaats je in de head van je pagina, na je gewone css (code of link). code die je hier plaatst, bijvoorbeeld om de hover afbeelding een pixel omhoog te plaatsen, overschrijft voor IE de standaard css omdat je standaard css erboven staat. Andere browsers negeren de extra toevoeging en blijven dus werken zoals nu. Echter, deze code toevoegen voor 1 pixel verschil, doet naar mijn mening meer kwaad dan goed. je pagina wordt namelijk groter (zwaarder), daarom raad ik aan om alleen conditionele code te gebruiken voor functionele problemen (bijvoorbeeld wanneer een menu knop deels buiten beeld valt). Nog een nadeel: indien we te maken hebben met een bugje in IE, en er komt een nieuwe versie uit, is het probleem misschien wel opgelost. Maar dan wordt je eigen oplossing nog steeds uitgevoerd, en staat je hover dus voor de nieuwe IE versie een pixel te hoog. je kunt dit oplossen door je conditionele statement aan te passen met een versienummer. je kunt mikken op 1 specifieke versie [if IE9] of bijvoorbeeld op een specifieke versie en alle eerdere versies [if lte IE9]. voor meer informatie hierover: http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx zie de tabel met "operators" onder "Syntax of conditional comments"

Bronnen:
http://msdn.microsoft.com/en-us/library/ms...

Stel zelf een vraag

Ben je op zoek naar het antwoord die ene vraag die je misschien al tijden achtervolgt?

/100