[CSS] background-color van hover doet marges veranderen

[Verwijderd]

Hoi,

Een vreemd probleem, allesinds zit ik mij er een uur suf op te kijken ... misschien is het iets dom, maar ik kijk er over.

Als je surft naar http://hoaxer.be/dump/test.html zie je een menu, in IE7 / FF2 / FF3 / Safari veranderd de background-color van het menu links, echter met IE6 krijg ik dit wanneer ik over het menu ga :

Het rekt het uit naar beneden ...


Het enige verschil in de css van het menu links en rechts is de de background-color op de hover

#dropdown ul li a:hover { text-decoration:none; text-align:center; background-color:#e04516; color:#fff; }
#dropdown2 ul li a:hover { text-decoration:none; text-align:center; background-color:#bc411c; color:#fff; }

menu links

Cascading Stylesheet:

#dropdown       { width:465px; float:left; padding:3px 5px; display:inline; }
#dropdown       { border-top:2px solid #000; border-bottom:2px solid #000; background-color:#ac3511; color:#fff; font-size:10px; }

#dropdown ul { margin:0px; padding:0px; }

#dropdown ul li         { width:140px; margin:0px 5px; float:left; position:relative; }
#dropdown ul li         { list-style:none; }
#dropdown ul li a       { width:140px; padding:2px; display:block; }
#dropdown ul li a       { text-decoration:none; text-align:center; background-color:#bc411c; color:#fff; }
#dropdown ul li a:hover { text-decoration:none; text-align:center; background-color:#e04516; color:#fff; }

menu rechts

Cascading Stylesheet:

#dropdown2      { width:465px; float:left; padding:3px 5px; display:inline; }
#dropdown2      { border-top:2px solid #000; border-bottom:2px solid #000; background-color:#ac3511; color:#fff; font-size:10px; }

#dropdown2 ul { margin:0px; padding:0px; }

#dropdown2 ul li        { width:140px; margin:0px 5px; float:left; position:relative; }
#dropdown2 ul li        { list-style:none; }
#dropdown2 ul li a      { width:140px; padding:2px; display:block; }
#dropdown2 ul li a      { text-decoration:none; text-align:center; background-color:#bc411c; color:#fff; }
#dropdown2 ul li a:hover { text-decoration:none; text-align:center; background-color:#bc411c; color:#fff; }

... waarom oh waarom rekt het menu links uit als de background-color anders is in Internet Explorer 6

note: ik heb al geprobeerd met vaste heights, height auto, .... het maakt geen verschil
note 2 : ik weet dat de css 'mooier' kan, maar ik wil uitsluiten dat het probleem ergens anders mee te maken heeft

[Iska]

Ook nog een extra 'margin' al geprobeerd?? Als je het egt niet werkend krijgt zou ik gewoon de IE6 tags gebruiken in HTML en hem daarna afstellen op IE6 (http://www.quirksmode.org/css/condcom.html)

[Verwijderd]

nog een uurtje prutsen en voila ...

Cascading Stylesheet:

#dropdown       { width:465px; float:left; padding:3px 5px; display:inline; }
#dropdown       { border-top:2px solid #000; border-bottom:2px solid #000; background-color:#ac3511; color:#fff; font-size:10px; }

#dropdown ul { margin:0px; padding:0px; }

#dropdown ul li         { width:140px; margin:0px 5px; float:left; position:relative; }
#dropdown ul li         { list-style:none; }                        
#dropdown ul li a       { width:140px; padding:2px 0px; display:block; }
#dropdown ul li a         { text-decoration:none; text-align:center; background-color:#bc411c; color:#fff; }
#dropdown ul li a:hover { text-decoration:none; text-align:center; background-color:#bc411c; color:#fff; }

een extra margin was niet de oplossing, de padding van de #dropdown ul li a veranderen naar padding:2px 0px;

blijft altijd een vreemde bedoeling IE6

toch bedankt voor de tip!

[ Voor 33% gewijzigd door Verwijderd op 30-09-2008 12:13 . Reden: edit: typo's ]

[moozzuzz]

Lag het niet aan 't feit dat *ergens* in je CSS de a:hover gedefinieerd was met een andere padding? (dat is wat ik het logische zou vinden).

[Verwijderd]

Zoals je zelf kan zien in de code op http://hoaxer.be/dump/test.html is er nergens een afwijkende padding op een hover ... het zou inderdaad een logische verklaring zijn maar dat is het niet