CSS Positioning vs

							CSS Positioning vs. HTML Tables: HELP!
Jean Reising Fermilab

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!