Css problem with IE/FF compatibility

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 128x96 box with an image. On mouseover, a layer pops up over it with some text.

Answer 1

Here you can found about this: http://webdesign.about.com/od/internetexplorer/a/aa082906.htm

This is a part of the article:

It's actually really easy to hide styles from IE 6 but make them visible to standards compliant browsers. Use child selectors.

In one design I built, I created a two column layout that required margins and padding. This meant that I was hitting the box model differences when I viewed the page in IE 6. My first CSS style sheet for Firefox included a line like this:

div#nav { width: 150px; margin-left: 20px; }

This made the page line up perfectly in Firefox and Safari, but in IE the nav column was pushed over to the right too far.

So, I converted the line to use child selectors. The #nav div is a child of the body tag, so I changed the line to read:

body > div#nav { width: 150px; margin-left: 20px; }

Of course, doing this made the #nav div lose all it's properties in IE, so I needed to add in some IE styles to get IE 6 looking okay. I added this line to the CSS:

#nav { width: 150px; margin-left: 10px; }

The placement of this line of CSS is important if my page is still to look good in Firefox and Safari. The IE line needs to come first. Firefox and Safari will read that line and then it will be over-ridden by the body > div#nav selector lower in the document. IE 6 will read the first line and set the styles. It will then ignore the child selector, as it doesn't recognize them. When IE 7 comes along, it will act like Firefox and Safari.

By designing for a standards-compliant browser first, and then modifying your CSS to support IE's quirks, you spend a lot less time fiddling with the design and a lot more time actually designing.

Answer 2

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.)