SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird IE9 Bug with UL and hovered images in CSS

    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:

    Code:
    <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:

    Code:
    <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:

    Code:
     #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. #2
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just figured it out. The window was zoomed to 105% for some reason. That was frustrating.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by LunarBuffalo View Post
    Just figured it out. The window was zoomed to 105% for some reason. That was frustrating.
    Glad you sorted it. Sometimes its the easy things we overlook

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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_other.../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:
    http://www.cutcodedown.com/for_other...s/sideMenu.jpg

    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •