How do you get CSS DIV layout to look correct cross browser?

[celebritymusic]

Hi

I'm building a new site, and tried doing it using CSS DIVs instead of tables, as I read it's a better practice.

I was testing it in IE7, and all was well. Then I tested it in Netscape and Firefox, and the DIVs were way out. Then I tested in IE6, and it's out in a different way. The site that I modeled mine on uses DIV layouts, and theirs is fine in all browsers.

It seems padding and margins are treated differently in the browsers, so how do you successfully use DIVs to layout your site?

The site is at www.bigbadroo.com.au/litecommerce - still very much under construction

Cheers

Shaun

[EXreaction]

There is no reason to write your code only one way because some people say it is better.

What ever way works best is the way you should do it, not the way a bunch of kiddies say it "should" be done. If both can produce the same thing do whatever is easier.

[Whir]

If by "kiddies," you mean W3C, then I would have to say that I disagree with you.


The only way to find the balance between IE rendering and everyone else is to experiment. I use an all <div> layout on 95% of my sites now, but figuring out how to get IE and Firefox to render them the same way was just tweaking until it worked.

I think I try to use padding and margin on the content more than the container, because it seems to work better for cross-browser compatibility. Obviously there are times when you simply have to put margin on the container, for spacing cells with borders for instance, otherwise...

[celebritymusic]

OK - I'm going through the site, cleaning it up bit by bit so it looks close enough to the same in both browsers.

I've got the top login header the same.

The next DIV down called wrapper is fine in Firefox, but it wants to sit about 20px down the page in IE. It only does this before the user has logged in, and then the page jumps up where it should be. I thought it might be one of the login widgets causing the problem, but can't see where.

Any ideas as to what might be going on? the top divs and wrapper div have margins of 0

Cheers

Shaun

[Whir]

IIRC, IE and Firefox set up the space between div elements differently, that may be it. Or if it's a script login, it might be adding a space for some random reason from that.