Website Design with css/xhtml versus Tables

There are many articles and tutorials on how do make completely table less website designs and the merits thereof as opposed to using tables for layouts. Many website designers and website design companies have made the attempt to move from the old world table based layouts to pure css designs. Some have made it to the elite league of pure table less website designers yet many have either reverted back to table based designing or a mixed mode. This article is about the practical considerations and typical hurdles that all web design companies face in making this transition. And yes this is from our own experience.

The first and most challenging hurdle is to stop thinking about website designs as rows and columns. Believe me it is not as easy as it sounds. For many years website designers have lived and breathed table based layouts. Interestingly leading tools like Photoshop have also in part made this easier. It is common knowledge that you can slice a layout in Photoshop and export the html. What it does is create convenient table based designs and the reason why web design companies prefer this route is clear to understand. Time. In our opinion it takes 4 to 5 times the amount of time in making a pure css based template than hack around with the exported Photoshop html to get the page going. Most website design companies are paid on project basis but their effort is costed in time. So would clients be willing to pay more for pure css layouts as compared to table based designs? In our experience few clients are knowledgeable to ask for pure css designs and few care enough to pay more. So commercials take precedence over standards.

If however one were to take the first step towards making pure css designs most website design companies are faced with the next hurdle - browser incompatibilities. We have, in our initial days made perfect css layouts that are well tested in Internet Explorer to find that they look a complete mess in Firefox or Opera. This itself is sufficient for some website designers to throw in a container table to "hold the layout together". In our experience the two most conceptually challenging adjustments have been:

1. Website design with css Challenge 1 - The box model bug of IE 6.

This causes the padding given to any div get added to its width whereas in Firefox et.al the actual width is taken. There are many solutions and hacks floating on the net to get around this but we have followed a simple principle - no div is attached both padding and width. Its either or and works like a charm. So what do we need to do if we need both? Simple, nest 2 divs and attach width to the outer and padding to the inner - much like this:

<div id="outer" style="width:200px">
     <div id="inner" style="padding:5px;">
          Content
     </div>
</div>

2. Website design with css Challenge 2 - Vanising Container Div

The second most common and frustrating experience is to have a container div vanish in Firefox. Most website designers initially are at a loss as to where the nice background vanishes all of a sudden. This is a pretty simple problem to overcome and the problem really lies if the container div has child divs floated inside, something like this:

<div id="outer" style="background-color:#990000;">
     <div id="inner-float-left">
          Left Content
     </div>
     <div id="inner-float-right">
          Right Content
     </div>
</div>

Lo and behold suddenly the background color seems to have vanished! The solution we have enforced at the website design stage itself is to ensure all contained divs are cleared as below so the headaches later can be avoided:

<div id="outer" style="background-color:#990000;">
     <div id="inner-float-left">
          Left Content
     </div>
     <div id="inner-float-right">
          Right Content
     </div>
     <div style="clear:both">
</div>

A small line of markup and the background is back where it should be. Wasnt too hard was it, just takes a little getting used to i guess

That concludes part 1 of the website design using css practical walk through. In the comming sections we will look at some more common hurdles and how the end is worth all the hardships and learnings for any website design company hoping to make it through to the next decade.