I've been doing web development for a long time now, but I've been hesitant to abandon tables for css due to all the problems with browser compatability. However, I'll soon be revamping a site, and I want to start separating design and content via xhtml and css. So, I'm in the process of doing some rough layouts just to get a hang of this css stuff, and I'm already encountering some nasty browser incompatibility issues... the very type of thing that turns me off to using CSS at all. However, I'm hoping some of you here can show me the light and convince me CSS is the way to go, even it isn't fully supported across all browsers yet (especially IE, the most popular browser out there).
So, here's what I've got. First, a TABLE html rough of what I'm trying to do (this isn't a real design, just a testing ground, so, no crits on the design please):
Now, here is my xhtml (not validated yet) for content:
And, if you change the style=0 in the URL above to style=1, you'll get css version:
Which links this css file in:
It looks fairly decent in FireFox, but it doesn't display properly in IE, the "Welcome" box isn't positioned correctly.
I'd like to keep the data in the order I have it in the xhtml file. I've been researching CSS Zen Garden and Stop Design among some other sites for ideas.
What I'd like, is some basic critique on my stylesheet and xhtml, are things being set up good, what could be done better, etc. AND, obviously, how to fix the descrepancy between the two browsers.
Need some newb help on CSS layout problem with IE
Very rushed at the moment. All I can say is use the tag instead of the <strong> tag - it will make your files smaller, therefore loading quicker.