Forum Moderators: not2easy

Message Too Old, No Replies

hover links with div - fine in all but IE8

         

Readie

11:20 am on Mar 24, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Just a note: I've "fixed" this issue by forcing IE7 compatability mode in IE8.

---

Right, I have some hover buttons on one of my sites which are done with a div background-image attribute, with the actual link being a transparent .gif image on top.

This looks fine in firefox, chrome, opera, safari, IE6 (though the actual hover effect fails for IE6) and IE7.

In IE8, however, it adds about 50px worth of what seems to be right margin (but setting margin-right: 0px; has no effect) - which naturally screws up the entire page.

Just wondering if anyone could take a peek at the code and offer a reason as to why this happens?

img.navigation {
height: 30px;
width: 189px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
}

div.nav_home {
height: 30px;
width: 189px;
background-image: url('/images/navigation/home.png');
padding: 0px;
border: 0px;
margin-left: 1px;
margin-right: 0px;
}

div.nav_home:hover {
height: 30px;
width: 189px;
background-image: url('/images/navigation/home_hover.png');
padding: 0px;
border: 0px;
margin-left: 1px;
margin-right: 0px;
}
<div class="nav_home"><a href="/"><img class="navigation" src="/images/navigation/nav_blank.gif" border="0" alt="Home" title="Home" /></a></div>

drhowarddrfine

1:27 pm on Mar 24, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



:hover only works on <a> in IE6.