1 reply [Last post]
nickeh
Offline
newbie
Sweden, umeå
Last seen: 16 years 8 weeks ago
Sweden, umeå
Joined: 2003-09-24
Posts: 1
Points: 0

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

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