I’m working on making a simple navigation box on the right side of a page. I basically have five image-links in a UL that have a hover property in the CSS that sets the background-position so there is the hover effect.
It works fine in Firefox, Safari, Chrome AND IE7. However, fire up IE9 and all of the images have extra vertical margin spacing or something below them by about 1px and when you hover the placement is off by 1px or 2px.
The issue can be viewed here
First of all I disabled the automatic IE9 compatibility view by having:
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
For some reason compatibility view was being turned on by IE9 which messed up my element floating.
Here is my HTML:
<div id="right">
<ul id="greenpractices">
<li id="rightmission_water"><a href="water.html">Water</a></li>
<li id="rightmission_air"><a href="air.html">Air</a></li>
<li id="rightmission_innovation"><a href="innovation.html">Innovation</a></li>
<li id="rightmission_energy"><a href="energy.html">Energy</a></li>
<li id="rightmission_design"><a href="design.html">Design</a></li>
</ul>
</div>
And the CSS:
#right {
float: left;
display: inline;
width: 286px;
border-top: 1px solid #686868;
padding: 17px 16px 0px 17px;
}
ul#greenpractices {
list-style-position: outside;
list-style-type: none;
width: 286px;
height: 260px;
}
ul#greenpractices li, ul#greenpractices li a, ul#greenpractices li a:active, ul#greenpractices li a:visited {
position: relative;
display: block;
width: 286px;
height: 52px;
text-indent: -99999px;
}
ul#greenpractices li a:hover {
background-position: 0 0;
}
li#rightinnovation_innovation a {
background: url('images/rightinnovation_innovation.jpg') bottom;
}
li#rightinnovation_air a {
background: url('images/rightinnovation_air.jpg') bottom;
}
li#rightinnovation_water a {
background: url('images/rightinnovation_water.jpg') bottom;
}
li#rightinnovation_energy a {
background: url('images/rightinnovation_energy.jpg') bottom;
}
li#rightinnovation_design a {
background: url('images/rightinnovation_design.jpg') bottom;
}
Thanks to anyone who can help!