Question

I have some CSS that doesn’t behave correctly with IE8. It works fine with FF3, but in IE8 there are white boxes in between the list items and the whole thing is buggy.

here is the css in question

#golist {
    width:900px;
    margin-top:20px;
    margin-right:auto;
    margin-left:auto;
}
#listing {
  list-style:none;
  margin:0;
  padding:0;
}
    #listing li {
        float:left;
        display:block;
        width:128px;
        background:#fff;
        border:1px solid #000000; 
        height:96px;
    }
    #listing li a {
        border:none;
    }
    #listing p {
        margin-bottom:0;
    }


    /* ---- show-hide elements ---- */

    #listing li .show{
        display:block;
        width:128px;
        height:96px;
    }
    #listing li .hide {
        color:#121212;
        text-align: left;
        height: 0;
        overflow: hidden;
        background-image:url(bghover.png);
    }
    #listing li:hover .hide, #listing li.over .hide {
        cursor: pointer;
        height: 96px;
        width:128px;
        text-align:center;
    }
    #listing li:hover .show, #listing li.over .show {
        height: 0;
        overflow: hidden;
    }

    #listing li a, #listing li a:visited, #listing li a:active {
        color:#121212;
        font-size:12px;
        text-decoration:none;
    }
    #listing li a:hover {
        color:#121212;
        text-decoration:none;

    }

And here is the code itself:

<div id=golist>
  <ul id=listing>
    <li class=show>
      <a href=#>
        <img src=images/image.jpg height=96px width=128px border=0>
      </a>
      <div class=hide>
        <a href=link.html>Link</a>
        <p>Some info</p>
      </div>
    </li>
  </ul>
</div>

The idea is to have a 128×96 box with an image. On mouseover, a layer pops up over it with some text.

Answer 1

Start by clearing all of the default padding and margins in your css file using:

* { padding: 0; margin: 0 }

Then you’ll have to adjust your code accordingly as every browser adds its own padding and margins to all attributes.

Once you get it to the point where you’re happy with it in Firefox and Safari, use conditional statements to pull in the appropriate IE stylesheet:

<!--[if IE 6]><link href="css/CSSName_IE6.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 7]><link href="css/CSSName_IE7.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 8]><link href="css/CSSName_IE8.css" rel="stylesheet" type="text/css"><![endif]-->

In your stylesheets only override what needs overriding:

Master CSS

.iframestyle { float: left; margin-right: 3px; width: 305px; }

IE 6

.iframestyle { width: 309px; height: 263px; }

IE 7

.iframestyle { width: 309px; margin-top: 0px; }

IE 8

.iframestyle { width: 305px; margin-top: 0px; }

(For whatever reason IE 8 may need a redeclaration of width.)