سؤال

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>
هل كانت مفيدة؟

المحلول 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)

نصائح أخرى

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.)

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top