Question

I want different menu items in different corners having a simple hover effect. Following code is working. But only right-bottom menu item is not giving proper effect in IE6 and IE7. Whats wrong?

Here is the fiddle.

CSS:

.d
{
    height:50px;
    width:50px;
    background-color:#b2b2b2;
    position:fixed !important;
    *position: absolute;
}

.da {position:absolute;}

#d1 {left:0; top:0;}
#d2 {right:0; top:0;}
#d3 {right:0; bottom:0;}
#d4 {left:0; bottom:0;}

#d1a {bottom:0; right:0;}
#d2a {bottom:0; left:0;}
#d3a {top:0; left:0;}
#d4a {top:0; right:0;}

#d1a:hover {right:-5px; bottom:-5px;}
#d2a:hover {bottom:-5px; left:-5px;}
#d3a:hover {top:-5px; left:-5px;}
#d4a:hover {top:-5px; right:-5px;}

HTML:

<div class="d" id="d1">
    <a class="da" href="#" id="d1a"><img src="images/contact.png" /></a>
</div>
<div class="d" id="d2">
    <a class="da" href="#" id="d2a"><img src="images/contact.png" /></a>
</div>
<div class="d" id="d3">
    <a class="da" href="#" id="d3a"><img src="images/contact.png" /></a>
</div>
<div class="d" id="d4">
    <a class="da" href="#" id="d4a"><img src="images/contact.png" /></a>
</div>
Was it helpful?

Solution 2

I have found following solutions for the problem:

1) to add visibility:hidden to #d3a:hover block

or

2) to add margin-left:0% to #d3a:hover block

both solutions will make the code running properly in IE6 and IE7. (Even it is working with IE5.5 too)

OTHER TIPS

IE6 and IE7 are having a hard time with the negative numbers for some reason on the BR.

Strangely enough, if you remove the #d3a {top:0; left:0} css rule, (That should be its default position anyway) the problem goes away. In fact, if you play with it...any value other than top:0, left:0 allows the browser to properly determine the hover position of the #d3a div.

Further experimentation with !important on the #d3a:hover rule will help support that this is not an issue with css applying correctly, but rather, with the browser's ability to render position correctly. (That is to say that the css style is applying...but having no effect.)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top