CSS Positioning vs. HTML Tables: HELP!

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!

CSS Positioning vs. HTML Tables: HELP!