CSS Top Property different between Internet Explorer and FireFox

Question

I've been trying to search for this in stackoverflow but I couldn't find the answer.

Browsers I am using for testing: Firefox 3.6.8 Internet Explorer 6.029

I am creating a box and positioning it via the position:absolute and top and left properties:

#testBox {
  top:10px;
  left:480px;
  width:220px;
  padding:3px;
  position:absolute;
  font-size:14px;
  text-align:center;
}

<div>
  <div>
  <span style="position:relative;">
    <span id="testBox">
    testtesttesttesttest<br />
    </span>
  </span>
</div>

What is happening is the "testBox" span is up further in IE than FireFox. Is there something I can do to fix this problem? Thanks, Roy

Answer 1

Ie6, will be the problem, specifically the 6 part.

You will most likely need to define different rules in a different style sheet. Look into conditional statements: http://creativebits.org/webdev/ie_conditional_css

Also you can try using a css reset, it will make things easier down the line: http://www.yahooapis.com/yui/3/cssreset/

Answer 2

I don't know of a non-hackish method, but you can use conditional HTML (ie, a hack) to change top in IE6. Put this after your CSS, in the HTML.

<!--[if lt IE 7]>
    <style type="text/css">
            #testBox {
               top: 20px; // or whatever
            }
    </style>
<![endif]-->