Absolute position of DIVs in IE and FF

[lynn168]

I use a DIV to hold my content, and it shows up different in IE and FF. In IE the DIV seems to be 300px wide, while it shows up as 315px in FF. Also, in IE it's positioned slightly higher than in FF.

I think I might be having the same problem as

http://webdeveloper.com/forum/showthread.php?t=121977
and
http://webdeveloper.com/forum/showthread.php?t=131908


This is the CSS I'm using (there are no other DIVs with z-index:3):

#content {
position: absolute;
top: 184px;
left: 350px;
width: 300px;
height: auto;
z-index: 3;
background-color: white;
border: 1px solid #d9d9d9;
padding: 8px;
}

and the HTML

<div id="content" style="border-bottom: solid 50px #b2e2c1;">

bla bla

bla

</div>

My site is not valid (because honestly, I don't know how to correct the errors in my coding a validator shows), so is that the problem or something else?

[Centauri]

As the div is set at 300px, padding at 8px and border at 1px, then total width = 300+8+8+1+1 = 318px. If IE is showing it at 300px, then IE is in quirks mode due to invalid doctype - put a valid doctype (like 4.01 strict) at the top of your page and see what happens then.

Cheers
Graeme

[ToonMariner]

If it doesn't upset your site too much you can change the doc type - using xhtml strict makes IE render the box model properly.