Why does my CSS create 4 totally different looks in 4 different browse

How do you deal with how different browsers treat CSS?

[wickwood]

I have been making web-pages very efficiently DreamWeaver, but completely avoiding CSS because even the simplest things never seem simple with it when I go from browser to browser.

But after reading some books like "CSS: The Missing Manual", I thought I should give it another try because it appears that it would help me in the long run. From what I understand the SE love you more if you separate out your styling from your content, and also, it is my understanding that many of the styling tags of HTML are on their way out for being supported.

So I decided I would remake this "table" that needs to be edited from time to time with CSS.

<No site specifics, thanks. See TOS #13 [WebmasterWorld.com]>

After creating it and finally getting it to look right in DreamWeaver, I tested this page in 4 browsers on 2 Operating Systems:
FireFox - Mac and Windows
IE7 - Windows
Safari - Mac

The Result:
The page looks COMPLETELY different in every single one of them!
It's similar, but not exactly the same, in FireFox for Mac and Windows.
It shows up exactly as I expect it to in Safari (of course, I have a Mac bias).
And it is COMPLETELY MESSED up in IE7!

HELLLPPP!

My goal is to create this "table" with CSS only, and if need be some javascript to change the text in the blue box.

But right now, I would just like things to show up consistently from browser to browser. This is why I gave up with CSS before. It didn't seem to matter how closely I followed a tutorial, it never worked when I went to test.

By the way, I created this with Doc Type of XHTML 1.0 Strict, because I thought that would give me the best chance of it showing up correctly in all the browsers. It passed easily on the validation test at [validator.w3.org...]

Any advice you can give me on this would be greatly appreciated.

[edited by: SuzyUK at 6:41 am (utc) on Jan. 15, 2007]

[Setek]

I just wanted to say you've done really well, making sets of

div

s mimic a table. While not working in all browsers, it's still a complicated layout to accomplish :)

However, I'm sorry to inform you that your effort has been misplaced.

Using CSS-P (CSS-Presentation) to remove presentation from structure is a very good reason indeed - however, it's only applicable when necessary.

You have a table of data - so you should be using a table. Semantics determine your data to be tabular, and tables are still very much correct and usable when tabular data fills them.

Instances where you would remove presentation from structure would be those sites where the header image is in a table cell with a column span of two, the menu is in another row with the content cell, and the footer is in another row below that, with a column span of two (in other words, using structure to determine presentation.)

So, while using CSS-P to rid that awful habit is good, using CSS-P to remove a semantically correct set of tabular data from a table format... is about just as bad.

[edit]

I forgot to say...

Welcome to Webmaster World :)

Please remember you're not allowed to drop URIs like that - please see the Webmaster World Terms of Service [webmasterworld.com] and the CSS Forum Charter [webmasterworld.com].

[/edit]

[edited by: Setek at 4:46 am (utc) on Jan. 15, 2007]