HTML Utopia: Designing Without Tables Using CSS

[ArticleBot]

This is a dedicated thread for discussing the SitePoint article 'HTML Utopia: Designing Without Tables Using CSS'

Awsome primer thanks for the boost in a new directions

[dethfire]

maybe in a few years... I still find that some browser on some platform that really messes up the css. More often that not it's IE on either Mac or PC.

[Jules]

It's already been a few years!

I run our Melbourne based Web Dev division and I've found that our clients are more impressed with forward compatibility than backward compatibility. We actually charge extra if the client insists on designing for Netscape4.

We are now coding the majority of our sites without tables for layout. As a result we've enjoyed faster development times. By using the XHTML 1.0 Strict DTD (and validating our code), we are spending less time chasing down idiosyncratic bugs in each browser.

The key is to clearly understand the 'box model' and the workarounds required for IE5 and 5.5. You must also remember to leave out the xml prolog to prevent IE6 behaving like IE5. See tantek's box model hack for a great explanation and work around.

Sadly, there can still be a lot of frustration with IE6 who is now the worst performing of the current browsers but I guess we wouldn't be web developers if we were not good problem solvers!

[Mr. Brownstone]

Jules is right, dethfire. “Live in the now, man!”

[dethfire]

well maybe the problem is that I work on a mac, but develop for IE6

I found Dan Schafer's writing style very enjoyable. He doesn't write over your head, in my opinion. I was able to follow and understand what he wrote.

- Gerry

[Mr. Brownstone]

Originally Posted by dethfire

. . . but develop for IE6

You should not develop for any specific browser. If you follow web-standards, you create sites that work on 100% of internet devices.

Actually, this is a Perfect World scenario. What I do is test my site in Mozilla and Opera because of their excellent CSS support. I then find that any tweaking required to get the site to work in IE is very minimal, as opposed to coding just for IE and trying to fix problems in Mozilla and Opera; which usually turns out to be a nightmare.

The bottom-line is faster development times, compatibility across browsers, and accessibility to internet devices other than browsers.

[dethfire]

Originally Posted by Mr. Brownstone

You should not develop for any specific browser.

Well my project manager views sites with IE6. Many times my site will look perfect and functional in everything but IE6. Frustrating.

tweaking required to get the site to work in IE is very minimal

For me that usually results in creating a specific css file just for IE. Changes after that are then a pain.

If you follow web-standards, you create sites that work on 100% of internet devices.

think sitepoint looks good on IE2 for mac with 800x600 res?

I just wish these darn browsers would have full css support. is it really that damn difficult? I mean christ we can put someone on the moon, but can't get COMPLETE css support in browsers.

[KillAllDash9]

Originally Posted by dethfire

For me that usually results in creating a specific css file just for IE. Changes after that are then a pain.

It is a bit easier if you create one stylesheet that holds all of the rules for gecko-based and other compliant browsers and most of the rules for IE, then create a second stylesheet that gets included only for IE that only contains override rules (include it after the main stylesheet) that fix the problems in IE. That way, color changes, etc. can be done in one file. You only have to touch two CSS files for major layout changes that affect the box model.

think sitepoint looks good on IE2 for mac with 800x600 res?

I believe Mr. Brownstone said the site would "work", not that it would look as good. Of course, whether it works if it doesn't look right is dependant upon what the purpose of the site is, but most sites would remain useable as their purpose is 90% to convey textual information. This is certainly true for Sitepont.

I just wish these darn browsers would have full css support. is it really that damn difficult? I mean christ we can put someone on the moon, but can't get COMPLETE css support in browsers.

Agreed.

[Mr. Brownstone]

Originally Posted by dethfire

Well my project manager views sites with IE6. Many times my site will look perfect and functional in everything but IE6. Frustrating.

Yes it can be frustrating sometimes, and your project manager should know better than to accept the fact that your site looks good in IE6, or he should be educated as to why accessibility is important. I recommend Jeffery Zeldman’s new book for great ways of selling standards to both your employer and clients.

Originally Posted by dethfire

For me that usually results in creating a specific css file just for IE. Changes after that are then a pain.

If you are careful you need never have to create seperate style-sheets. For example, Tantek’s famous box-model hack allows you to pass specific width/height values to IE as opposed to W3C box-model browsers, such as Mozilla and Opera. Applying this hack is very laborious. I find it much easier just to force Mozilla and Opera browsers to use IE’s box-model with this CSS:

/* Get Mozilla & Opera to use IE’s non-W3C compliant CSS box-model */
html * {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

Originally Posted by dethfire

think sitepoint looks good on IE2 for mac with 800x600 res?

Accessible; yes, it is. Whether is looks fancy is another matter, but the content is there and it is easy to navigate.

A project I completed recently works on all browsers I tested it with, including the mini-browser on a silly little PDA cell-phone.

Originally Posted by dethfire

I just wish these darn browsers would have full css support. is it really that damn difficult? I mean christ we can put someone on the moon, but can't get COMPLETE css support in browsers.

NASA do not make web-browsers. They were also a single corporation working to their own specifications, rather than a whole mish-mash of companies that made browsers interpret proprietary tags until finally they started supporting W3C standards properly, and are still working towards this day.

[firegryphon3207]

Originally Posted by Mr. Brownstone

NASA do not make web-browsers.

True, but they also aren't well known for "playing well with others" in thier field either.

Great article. Gave me a whole new set of ideas to fool around with and gave me the excuse I need for a site re-design.

Can't find the code described in the book

[Jules]

Code Archive: http://www.sitepoint.com/books/css1/code.php

Excellent!!