Geek Answers Handbook

IE 6, 7 hover works for all angles except the bottom right

I want different menu items in different angles to have a simple hover effect. The following code works. But only the menu item in the lower right does not give the desired effect in IE6 and IE7. What's 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>
+4
source share
2 answers

I found the following solutions to the problem:

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

or

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

both solutions will make the code correct in IE6 and IE7. (Even it works with IE5.5 too)

+2
source

IE6 and IE7 have difficulty with negative numbers for any reason on BR.

Oddly enough, if you delete # d3a {top: 0; left: 0} css rule, (in any case, this should be the default) the problem goes away. In fact, if you play with it ... any value other than the top: 0, left: 0, allows the browser to correctly determine the hover position for the # d3a div.

Further experimenting with! important in the rule # d3a: hover will help to support that this is not a problem with the correct CSS setting, but rather with the ability of the browser to correctly display the position. (That is, the css style applies ... but without effect.)

+2
source

More articles:


All Articles