CSS Positioning vs. HTML Tables:HELP!

Jean ReisingFermilab

CSS Introduced

YEAH!!!

Easy way to update pages

Better control of design

CSS Positioning Introduced

Boo!!! In concept, yeah!!! Create a layer Add text or design element Move anywhere Easy and quick intricate design Page more accessible No need for a table, w/in a table, w/in a

table

Sing it Mick

You Can’t Always Get What you Want

Case in Point

http://lss.fnal.gov/interlab/benefits_table.html

Table layout stays consistent across all browsers – pretty

However, take out the table and use CSS positioning, and . . . . . .

Case in Point (cont’d)

http://lss.fnal.gov/interlab/benefits_css_netscape.html

http://lss.fnal.gov/interlab/benefits_css_firefox.html

Page breaks in Netscape

Page breaks in Firefox

Case in Point #2

http://lss.fnal.gov/interlab/css_example1_ie.html

In IE, pretty

But, I’m hearing Mick again . . . .

http://lss.fnal.gov/interlab/css_example1_netscape.html

http://lss.fnal.gov/interlab/css_example1_firefox.html

Frustrating

If I was getting what I wanted, using CSS, the page would have been designed in 10 minutes

Since the CSS pages broke, design time increased to over 30 minutes – not to mention wasted time it took to try to get CSS to work

What to Do?

Keep using tables? So much for accessibility (Sorry W3C)

Use CSS?Pray no one uses Firefox

Find a work around?How?

Wait until browsers catch up to W3C recommendations?

Final Thoughts

Be aware if designing in CSS positioning for the first time

If you have had success, send me tips, tricks, work-arounds

Jean Reising

joan@fnal.gov

630-840-6010

Disclaimer

To optimally view this site, come to my office and I’ll show it to you on my system!