Question

I have this code:

#left-nav #left{
  width:100px;
  height: 99px;
  float:left;
  border-bottom: 1px solid #344a53;
  margin-top:-1px;
}

I want to be able to only do the margin-top:-1px if it is not IE7 or IE8. Also does anyone know this problem with cross browser compatibility? I have to divs side by side in another div, but for some reason in chrome firefox and IE8, I have to use the margin-top: -1px because the div on top was 1 pixel down.

Example:

<div id="header"></div>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>

The left and right div for some reason is 1 pixel from touching the header, but the container still touches it perfectly.

Answer 1

Quick and easy way is to use the IE conditionals.

<!--[if IE 6]>
 <link type="text/css" rel="stylesheet" href="/ie6.css" />
<![endif]-->

You can also use stuff like

<!--[if IE lte 7]>

For if IE is version 7 or lower.

See http://www.quirksmode.org/css/condcom.html for more information