Drydo's Blog

Teenager of the Internet

This blog hosted by:
http://blogs.vbcity.com
  Home :: Syndication  :: Login   Community Forums   :: vbCity.com   :: DevCity.NET  

Firstly, happy new year to everyone - I hope you had a good'un.  For me, I didn't realise that turning 30 would automatically bracket me into the 'crap' Christmas presents arena - but it did and I'm sure you can picture the joy on my face as the only present I got this year (yes, only present) was a pair of socks.  Ho hum - glad I bought the boy a RC monster truck now.

Anyway, a new year and new projects to work on.  Most notably a few interesting ASP.NET projects, something I've been keen to get back into considering my previous Web Development pedigree (as it were).  Dovetailed into these developments is the consideration that needs to be given with the wave of CSS based design that seems to be mentioned every half a minute (and that fact of customising content for various visitors, e.g. text readers and PDAs, is quite a high priority for these projects). 

Until six months ago before I was introduced to the eye-opening www.csszengarden.com, I had liberally used tables for structure and content formatting, but as we all know using tables for structures is so 2001 darling!  Note: I’ll leave the reasons of using CSS design over other methodologies to the other 101 commentators on the web.  But implementing CSS for design use is pretty cool and you can do some fantastic effects (I'm actually intending to provide a real-world example of translating a site design using CSS in the near future).  However, there are elements of CSS based design such as content layout that might take 2 minutes if you use a table * - but finding a CSS 1.0 alternative is completely maddening!

* - Tables should be used for tabular data - see W3C for details.

For example, let's say I'm looking to display my content in the following format...

Table Layout

How this is pretty easy using a table (and you can check out the original just here) [Note: I taken a completely HTML format approach with this example]...

However, simulating this design using nothing but CSS is quite a pain and the amount of articles I found on the web on formatting content using a tabular style in CSS 1.0 are pretty limited.  Anyhoo, I thought I would spend some time attempting to emulate the tabular style in CSS and came up with the following CSS content structure example for your perusal....

And here are the results in the various browsers I have installed (Screenshots)....

Internet Explorer 6.0
Firefox 1.0.7
Netscape 6.2

In short, not bad considering and although Netscape doesn't paint the backgrounds correctly.  The overall effect is not that diminishing and to be fair, Netscape browser usage is running at the 0.25% to 0.50% ratio at the moment (accordingly to various sources) - so I think I'll sleep OK tonight.

So - if you looking for a slightly kooky example of CSS 1.0 emulating a tabular design- this post hopefully will help.  And of course, if you've got any comments about how it displays in your browser, feel free to post up.

Have fun - M

posted on Wednesday, January 11, 2006 11:42 AM