CSS Woes FF/IE?

Question

Ok... I can get it to work in one or the other, but not both simultaneously.

This one works in IE...
http://www.nlgaming.com/test/ie.html

This one works in FF
http://www.nlgaming.com/test/ff.html

I am just trying to get all the box positioned correctly... The css and everything is in the HTML file. Please view both in both browsers to see my problem... Any ideas? Thanks.

Making it absolute is causing everything to stack on top of one another... but it does look the same in both browsers... :\

Positioned absolute.
http://www.nlgaming.com/test/abs.html

Answer 1

try using absolute position on your positioned elements.

position:absolute;

can you post a link to the absolutely positioned version? stacked on top generally means that they are inside a relatively positioned (or unpositioned) element. the other thing i would wonder about is the float. i never use float as it tends to have unpredictable results.

Answer 2

When you use position:absolute you have to give it a position (using top: yyypx; left: xxxpx, e.g.) or it will all go to the top left.

I haven't looked at your coding in detail, but in general, Firefox is more compliant to css positioning standards than IE, so the usual design approach is to design for FF and then patch it for IE. Google on "box model hack" for some insight into what the problems with IE are and how to deal with them. But before you do anything else, make sure your css validates. When my IE and FF views are radically different, I often find it's because of some error in my style block that the two browsers try to work around in different ways.

Answer 3

This is pretty easy to fix, start with the firefox version

1) get a doctype and put it before your html tag. HTML 4.01 Transitional is probably easiest.
2) remove float: top from your styles. when you have float: left; float: top; the top overrides left in internet explorer, but because top is not a valid value for float firefox ignores it. values for float can be ( left, right or none)

get rid of the second < /body> and < /html> at the end of your html

Don't start absolute positioning things, it will be a disaster when you want to move things around.

get a doctype from here: http://alistapart.com/stories/doctype/