Merits of CSS sites over Tabled sites

Suresh Kumar — Sun, 28 Jun 2009 07:51:27 +0000

Always you may have heard the terms like tableless designs, CSS based sites etc. If you have always thought that why you should leave table based designs and take tableless designs, then here are the suggestions to your thoughts. The key benefits of CSS based sites on tabled sites are:

Using CSS, sites code reduction will be 1/5th comparing to tabled sites.
The site’s code is now fully semantic. It is not only understandable to human but also to search engines.
Reduction in code results in fast loading of pages helping users to browse the site easily which also reduce the bandwidth consumption.
CSS and HTML codes are validated ensuring consistence of the site in different platforms of operating systems and browsers.
Changing the way to use CSS and HTML improved the site’s crawl for search engine spiders, who cannot understand JavaScript based dynamic codes.
Removal of stylish flash titles and banners, with search engine friendly attractive CSS titles and banners.

Thus these helped users as well with fast loading and properly displaying sites, with easy understanding of content placement. This also helped search engine spiders to crawl sites.

There are also some demerits of using CSS sites.

It may not similar in all browsers and there may slight difference in different browsers. You have to do some cross-browser compatibility tests and fixes. But overall it gives you more control and benefits than tabled designs. So start designing CSS based HTML sites, rather than table based sites.

Some of the websites I did using CSS are

W3C Validated CSS with IE Hacks

Suresh Kumar — Fri, 26 Jun 2009 05:02:57 +0000

Whenever there is a problem in validation because of IE hacks. Now here is the way to overcome the error to pass the validation.

The general fix for IE 6 is “_ ” followed by a property and value

Example (_margin: 5px; )

For IE 7 “*” followed by a property and value

Example (*margin: 5px ; )

But this will not get passed in W3C validation service.

Instead of setting property like this

h2 {*margin: 10px ;}

For IE 6 and below

* html h2 {margin: 10px ;}

IE 7 and below

*:first-child+html h2 {margin: 10px ;}

* html {margin: 10px ;}

IE 7 only

*:first-child+html h2 {margin: 10px ;}

Let assume a CSS like this. If

{

padding: 5px;

}

*:first-child+html p

{

padding:10px;

}

* html p {

padding:10px;

}

Try the above CSS and check.

IE7 and IE6 paragraph padding will be 10px and all other browsers except IE Paragraph padding will be 5px;

Hey developers, now cross browsers issues can be solved with a proper standard W3C validation…

This will help out to style your website with proper web standards… Happy Styling

Suresh Online » CSS

Merits of CSS sites over Tabled sites

W3C Validated CSS with IE Hacks