CSS vertical positioning problems...

[Steve]

Ok, so i have a DIV element, position absolutely (see screenshot). IE seems to render it correctly, yet KHTML and Gecko browsers (Safari / Firefox / Camino) seem to add extra pixels to the top of the page. Why is this, and how can i get around it?

Here's how it's implemented into the xHTML. I can't quite work out WHY these browsers add more vertical pixels, than that that's specified in the CSS file.

Edit: Is this due to Internet Explorer now allocating a 'Live Width / Height' which I suppose these newer browsers DO support, thus meaning all elements are shifted down slightly?

I just read -

Live width and height refers to the display area of the browser. The live dimensions, obviously, are always less than the than full window dimensions.

If this is what is causing the issue how could i achieve the position I am after? Given that IE will never be in sync, with the other browser - and therefore ruining what I am trying to achieve...

Edited March 21, 2005 by Steve

[Marc A.]

I don't know a direct solution, but I (among many other CSS designers) start with a clean slate by having this at the top of your style sheet: * {margin:0px;padding:0px;}

This makes sure EVERYTHING has the same amount of margin and padding (0px), which helps solve soooooo many spacing issues between browsers.

I know it's not a direct solution, but it might get you on track.