Wed, 2003-09-24 14:17
Hi!
I'm trying to do a rollover menu in CSS and HTML
It's working fine in most browsers including IE 6 Quirk mode
But it does not work as planed in IE 5
I've set at margin sized 2 px at the bottom of every button.
The problem is that in IE 5 the margin is removed from the button two buttons up.
#left { position: absolute; top: 120px; left: 10px; width: 170px; } #secmen { position: relative; width: 170px; margin: 0px 0px 10px 0px; border: 1px solid #000; padding: 4px; background-color: #82ADD9; font-family: Arial, Helvetica, sans-serif; font-size: 14px; } html>body #secmen { width: 162px; } #secmen a { display: block; padding: 2px 2px 2px 24px; margin: 0px 0px 2px 0px; width: 160px; background-color: #82ADD9; background-image: url(./img/meny.gif); border: 1px solid #000; color: #000; text-decoration: none; } html>body #secmen a{ width: 134px } #secmen a:hover, #secmen a:focus{ margin: inherit; background-color: #82ADD9; background-image: url(./img/hover.gif); } HTML: <div id="left"> <div id="secmen"> <h1>Huvudmeny</h1> <a href="#">Länk 1</a> <a href="#">Länk 2</a> <a href="#">Länk 3</a> <a href="#">Länk 4</a> </div> </div>
I just can't figure out how to solve the problem.
It's strange since it's not the element that i put the mouse on that changes!!!
//
nicklas
Wed, 2003-09-24 20:27
#1
Margin bug in IE5??
Hi nickeh,
Try removing the #secmen a:focus
#secmen a:hover{ margin: inherit; background-color: #82ADD9; background-image: url(./img/hover.gif); }
Hope that helps