CSS/Table Layouts - Response to TA

[Pawel Kowalski]

TA made the following point in another thread about vB:

You link to a page that look like ****?

I am sooo sick and tired of people thinking css is the end all and do any graphics and tables can do...

Dont get me wrong CSS is a great tool, but that is all it is. CSS is soo poorly implemented across the different browsers it is basically only good for basic styling,

But hey here is challenge, if CSS is so great create some CSS definitions that replace the images in use here........(or come close)

I didn't want to derail that discussion so figured I would make a new thread since this is a topic that comes up a lot.

TA, you have to understand that I had a similar mindset as you. I've been doing web design since about 1998 (probably earlier) and when I started there were no standards (can't call front page a standard, can we?). Back then everything was nice and easy, you could count on 95% of your user base using IE and you really didn't have to give a crap about any other browser. In addition for me personally I never had to worry about others having to deal with my HTML back in those days. So when people were telling me coding in tables was bad I would throw a fit, plug my ears, and stick to my bad habits.

But times have changed. I just took a quick look at my stats and in the last month and only 46% of my visitors were using IE, 40% using firefox, and a whopping 8% using opera. Contrary to TA's point CSS layouts are the most efficient way of making your web sites cross browser compatible. If you can get your CSS and HTML to validate 99% of the time your web site will display in all modern browsers properly.

In addition to cross browser compatibility using CSS makes your layouts a crap load cleaner and much easier to work with. In C++, PHP, Perl, labVIEW, or any other programming language writting messy code is looked down upon. HTML is not an exception to this rule. Not only do you need to be able to go back and know how your code is layed out after time has passed but others might have to also. To back up my point I will leave with this example:

using tables:

<table>
	<tr>
    	<td>
        	Column 1
        </td>
        <td>
        	Column 2
        </td>
        <td>
        	Column 3
        </td>
        <td>
        	Column 4
        </td>
     </tr>
</table>

but in reality we would actually have to nest those tables for more complex designs:

<table>
	<tr>
    	<td>
        	<table>
            	<tr>
                	<td>
        				Column 1
                    </td>
                </tr>
             </table>
        </td>
        <td>
        	<table>
            	<tr>
                	<td>
        				Column 2
                    </td>
                </tr>
             </table>
        </td>
        <td>
        	<table>
            	<tr>
                	<td>
        				Column 3
                    </td>
                </tr>
             </table>
        </td>
        <td>
        	<table>
            	<tr>
                	<td>
        				Column 4
                    </td>
                </tr>
             </table>
        </td>
     </tr>
</table>

and this is what that code would look like if done properly in CSS:

<div style="float:left;">Column 1</div>
<div style="float:left;">Column 2</div>
<div style="float:left;">Column 3</div>
<div style="float:left;">Column 4</div>

So don't be afraid to get your feet wet with CSS. Up until the beginning of this year I certainly was. But after doing my first CSS layout I could not look back. And after about 8 months of strict CSS programming, layouts that would have taken hours to code before take a fraction of the time. And I don't have to worry about previewing my layouts in all the different browsers out there. If it looks right in IE7 and Fire Fox2 it will be sure to look right in every other standards compliant browser including Opera, FF3, Chrome, Safari, etc, etc, etc.

But hey here is challenge, if CSS is so great create some CSS definitions that replace the images in use here........(or come close)

The point of CSS is not to replace the use of images. The point of CSS is to actually make laying out images in your design much easier. What you would have to use countless nested tables for can now be done in a single CSS definition.

[the_ancient]

I am not "anti-css" I use CSS all of the time, where appropriate, but like with anything some people take that to the EXTREME, and think the CSS can replace every table every time. These people thank that tables should be abolished from the web, I disagree, Tables still hold a valuable place in the markup

[Pawel Kowalski]

I am not "anti-css" I use CSS all of the time, where appropriate, but like with anything some people take that to the EXTREME, and think the CSS can replace every table every time. These people thank that tables should be abolished from the web, I disagree, Tables still hold a valuable place in the markup

The only thing tables should be used for is tabular data, period. Everything else should be done with CSS for all the reasons I mentioned above.

[homoludens]

These people thank that tables should be abolished from the web,

They think tables should be reserved for tabulated data.

Tables still hold a valuable place in the markup

Yeah. For tabulated data.

Are you going to start arguing in favour of transparent spacer gif hacks now?

[Ron]

I've never written a css file. The closest I've come is to modify one to change some colors.

Do you have a different css file for every section of a site?

[Ron]

What's wrong with transparent spacer .gifs?

[Pawel Kowalski]

Do you have a different css file for every section of a site?

That depends on the site. For most designs you would keep everything in one file. But if you have a lot of different sections it might be easier to split it to different files. Personally I never had to do this but one application I can think of is this forum. You would have the vBulleting style sheet in one file and the jag theme stylesheet in another.

What's wrong with transparent spacer .gifs?

Absolutely nothing...if you're still living in the 90s .

[homoludens]

Do you have a different css file for every section of a site?

I usually end up doing one common file per subdomain and one refining file per section for ~70% of site sections.

A site section generally being indicated by the first part of the path name, and therefore easily handled by the front controller.

[Frank Broughton]

Great post Paul and well spoken. I have a similar experience to you with css vrs tables. I updated my main site with much use of css and once used to it was so much easier to do than using tables. I use both now but slowly getting away from table based layout.

[Ron]

MY WYSIWYG is still using tables.... but of course the proggie is about 7 years old. I may need to bite the bullet and either buy the new version or pay someone to make up a few templates.

Hey, you think I can get anyone here to build a CSS generator in PHP? How cool would that be?

[homoludens]

Hey, you think I can get anyone here to build a CSS generator in PHP?

Generate from what? A WYSIWYG interface?

Would you want to WYSIWYG some elements, give them class names and ids, and then let a script build the CSS for you?

How cool would that be?

Very cool. I'm not digging the whole WYSIWYG thing though. How do you "see" a float in order to "get" it?

[the_ancient]

The only thing tables should be used for is tabular data, period. Everything else should be done with CSS for all the reasons I mentioned above.

First off Everything Rendered in FF2 and IE7 does not render the same in FF3 or IE8.....

Further Implementation of CSS2 and starting of implementation of CSS3 in both FF3 and IE8 makes you go back and add in more "hacks" for those browsers and to be able to be backwards incompatible in IE 6,7 FF1,2.

And if you have ever done a 100% height anything in CSS you know that making a Table 100% height is 100000000x more strait forward than in CSS, since every browsers handles the hight property differently when it comes to div's

[Ron]

I dunno. What's a float?

[homoludens]

An element that floats to the left or right, displacing other elements. Floats are powerful but tricky, especially when nested.

You can use them to build TPGs, for example, by floating a bunch of block level elements to the left or right.

[homoludens]

First off Everything Rendered in FF2 and IE7 does not render the same in FF3 or IE8.....

My sites are rendering the same in FF2 as in FF3. I've had one issue thus far with parsing XML in FF3; the fix worked in FF2 as well, so no real problem.

Further Implementation of CSS2 and starting of implementation of CSS3 in both FF3 and IE8 makes you go back and add in more "hacks" for those browsers and to be able to be backwards incompatible in IE 6,7 FF1,2.

Use conditional comments with extra rules for IE versions. Then you have to spend a few days writing some new CSS for the new version of IE which you can apply to a multiplicity of sites in minutes. You can also fix a whole bunch of stuff with behaviours [sic]. Parser or renderer based CSS hacks have no place in professional design.

When IE8 Gamma or Gold or whatever is released, I'll spend a few days tidying up anything obviously broken, and devote another day or so over the following months sorted out any other funnies. It takes far more time shunting stuff from cell to cell when you need to do redesigns.

And if you have ever done a 100% height anything in CSS you know that making a Table 100% height is 100000000x more strait forward than in CSS, since every browsers handles the hight property differently when it comes to div's

There's always "display : table". Try it.

div.table{
	display : table;
	height : 100%;
	border: 1px solid #000000;
}

Hint: you might need a CC for IEx.

Are you going to tell us we shouldn't use javascript either because of differing event models?