Weird IE9 Bug with UL and hovered images in CSS

HTML & CSS
1

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!

2

Just figured it out. The window was zoomed to 105% for some reason. That was frustrating.

3

Glad you sorted it. Sometimes its the easy things we overlook :slight_smile:

4

Something that should be mentioned – if you need to resort to X-UA-Compat, IE conditionals, or any of the rest of that nonsense on such a simple layout, there is probably something fundamentally flawed with how the page is built.

Though you have jquery in there, so that’s a given.

You have a remarkably simple page with few real images – and it comes out to a whopping 300k in 18 files… The HTML isn’t too bad, if a bit non-semantic (like lists around non-lists and no lists around obvious lists?!?) but problems like the one you encounter are just a symptom of deeper rooted issues.

There is NOTHING on that page which warrants the presence of 108k of javascript… 7 to 10k MAYBE. Of course, that’s just jquery bloat and some silly lightbox script you aren’t even running.

You’re using a image replacement method that does NOT gracefully degrade images off – defeating one of the entire reasons to USE image replacement. The way you have the menu images sliced up of COURSE it added gaps and/or showing bits of the wrong menu when zoomed. There is NO reason to be using five separate 22k files there for what should probably only be a single unified 50k jpeg. (that rock pattern would hide jpeg artifacting beautifully)

To show you what I mean, I took a few moments to rewrite your page using my Accordion script which doesn’t rely on that jquery asshattery… optimized the images, made the markup a bit more semantic, etc, etc…

http://www.cutcodedown.com/for_others/lunarBuffalo/template.html

as with all my examples, the directory
Index of /for_others/lunarBuffalo

is wide open for easy access to the gooey drippy bits. Cuts the page down from your 300k original in 18 files, to just 90k in 7 files – while at the same time switching the content areas to dynamic fonts (since px on content is accessibility /FAIL/), providing graceful degradation for javascript off, CSS off, images off, and/or any combination of the above. Tested working IE 6, 7, 8 & 9, and the latest flavors each of FF, Opera, Saffy and Chrome. The page is also usable in IE5 though they get the javascript off version.

So basically, same page in 2/3rds the bandwidth and little to no cross-browser issues… and it took me about fifteen, maybe twenty minutes because of the methods I chose for building it. Said methods involve no need for X-UA-Compat or IE conditionals in the markup – again, if you have to resort to those, the methods you’re using for building the site are probably flawed.

Of course, the biggest savings in files and sizes apart from kicking jquery and the lightbox nonsense to the curb came from this:

One image to rule them all. If you can slide them one direction, you can slide them both directions.

Hope this helps, or at least gets you thinking on different ways of building pages.