Re: CSS Positioning Madness

["Haas, Matt (CL Tech Sv)" <matt.haas@xxxxxxxxxxx>]

John,

I've been on the receiving side of CSS based layouts and what I've found is that anything that isn't simple is going to take a lot of work in CSS and is going to have rendering issues in the various browsers. For things like invoice displays and data entry forms (shopping carts, etc...), I always end up going back to tables. 

Semantically, tables are the wrong use in a lot of cases but some things just have to look a certain way (like our invoices -- they have to match the layout of the printed ones) and it is far easier to lay them out in tables since all of the browsers display those properly.

There are some times when tables are the right way to do things. For example, if I'm listing a bunch of products or orders (basically, stuff you could turn into a CSV file), those do really belong in a table.

Matt

-----Original Message-----
From: web400-bounces@xxxxxxxxxxxx [mailto:web400-bounces@xxxxxxxxxxxx] On Behalf Of John Taylor
Sent: Wednesday, June 10, 2009 5:38 PM
To: web400@xxxxxxxxxxxx
Subject: [WEB400] CSS Positioning Madness

Ok, so I'm making an effort to use CSS for layout instead of tables, and
it's not going well. I use VS2008 as my IDE, and after many hours of
frustration, I finally have a layout that looks correct in the designer.
Then I preview in IE7 and FF3, and neither renders even close to what I see
in the VS designer. In fact, I have three rendered windows, and three
completely different results. We're not talking about a pixel nudge here and
there, but a jumbled mess of divs all over the place.

 

Then I spend several more hours reading about CSS positioning on the web
until my eyes begin to glaze over. Just when I think I have it figured out,
I read another tutorial or article that completely contradicts what I just
learned. Take RELATIVE positioning for example; I've now read that it means
a div using relative positioning will be offset from the parent container,
from the browser viewport itself, or relative to its "normal" flow placement
(whatever the heck that would be).  One question. three different answers.
Hmmm..

 

I now have four days into this website, and I've yet to manage to even
layout my page header so that it looks reasonably correct on both major
browsers and my IDE. Of course there is a learning curve associated with any
new technology, but this is nuts. I'm just about ready to give up on CSS
positioning and go back to tables. But I hate giving up, and so would like
to take one last kick at the cat, so I'm asking for your help. Are you using
CSS for layout? If so, do you have any suggestions for a good website to use
as a tutorial and reference resource? How about those CSS Toolkits. is
anyone using those to deal with cross-browser compatibility issues?