CSS Positioning vs' HTML Tables: HELP

1
CSS Positioning vs. HTML TablesHELP!

• Jean ReisingFermilab

2
CSS Introduced

• YEAH!!!
• Easy way to update pages
• Better control of design

3
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

4
Sing it Mick

• You Cant Always Get What you Want

5
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 . . . . . .

6
Case in Point (contd)

• 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

7
Case in Point 2

• http//lss.fnal.gov/interlab/css_example1_ie.html
• In IE, pretty
• But, Im hearing Mick again . . . .
• http//lss.fnal.gov/interlab/css_example1_netscape
  .html
• http//lss.fnal.gov/interlab/css_example1_firefox.
  html

8
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

9
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?

10
Final Thoughts

• Be aware if designing in CSS positioning for the
  first time
• If you have had success, send me tips, tricks,
  work-arounds

11
Jean Reising

• joan_at_fnal.gov
• 630-840-6010

12
Disclaimer

• To optimally view this site, come to my office
  and Ill show it to you on my system!