<LiNE> Tectonics shape the world, tagTONiC shapes the world wide web </LiNE>

Verlies focus bij hover IE9 (bug?)

Publicatiedatum: 30-11-2011
Categorie: tips, tricks and tragedies
Auteur: Marinka Noordhout

Tijdens de bouw van een simpel uitklap menu voor de site www.twentyfiveverkoopstyling.nl liep ik in Internet Explorer 9 tegen een vreemd verschijnsel op. Ik verloor focus door de ruimte tussen de menuitems.

In het menu is duidelijk te zien dat er een ruimte zit tussen de submenuitems. Hoewel bij iedere andere browser dit met een simpele margin gedaan kon worden, bleek IE9 er andere ideeën op na te houden. Verliet ik met de muis een menuitem om naar de onderliggende te gaan, klapte het menu genadeloos dicht wanneer ik de tussenruimte raakte.

Van alles geprobeerd met paddings en margins in zowel de <li> als de <a> tag, maar niets mocht baten. Dit is uiteindelijk de bizarre oplossing geworden.

Plaats via CSS in de <li> een transparant gifje (4px bij 4px is genoeg) als achtergrond plaatje:
.nav li { height: 55px; background: url(../images/trans.gif) repeat; }

Maak de betreffende <a> tag gewoon wat kleiner en de transparante tussenruimte werkt nu ook in IE9:
.nav li a { display: block; background-color: #565759; height: 45px; line-height: 45px; }

Een beetje vreemd... maar het werkt!

« Overzicht nieuws en artikelen