I spent most of today making a liquid CSS design for my new site; I was happy to see it working so nicely in IE. Then I loaded it in Mozilla Firebird .. and it looked like crap.

The problem has to do with the way I'm floating two columns and then trying to push data after it. Mozilla is not being nice - while IE is doing what I want it to. Without pointing fingers at which browser I think is sucking arse (*COUGH*) right now ... I will just go on the following rant about CSS and tables.

Almost every site I visit lately is pushing "liquid CSS" designs. The one main reason I always see for this is the following:

"It's a real separation of content and design."

Now I take real issue with this. When you create a CSS site driven in PHP (for example), you still have to input the <div class="className"> tag somewhere... meaning you're still putting up markup in your design somewhere.

I guess what's basically happening is people are trying to push this hierarchy:

content (substance) --> CSS (style + formatting of data)

I really don't like this. You're putting too much pressure on CSS to do formatting. And let me tell you something - formatting in CSS is a bitch. Almost every browser handles things different and things get really wacky trying to calculate exact locations to place stuff (if you're using position:absolute).

The hierarchy I like better is:

content (substance) --> tables (formatting) --> CSS (style)

Tables are so much easier to format with; and their logic is a lot easier to follow (for me anyways).

Argh, i'll write more about this later. I'm going to go try to fix up my design in CSS now ... sigh.
Posted by roy on August 9, 2003 at 04:22 PM | 3 Comments

Related Entries

Want to comment with Tabulas?. Please login.

MacDaddyTatsu (guest)

Comment posted on August 10th, 2003 at 02:01 AM
Almost all browsers format out CSS different because there is no standard langage DM for it. IE, Opera, and Netscape will all display it noticably different. Then you have the same client that demanded CSS asking you why it looks so different across platforms...Good for the small stuff. Disaster for anything other than color and font constriction.

MacDaddyTatsu (guest)

Comment posted on August 10th, 2003 at 01:59 AM
Amen man. I know a LOT about CSS and if you want to do formatting and databasing it isnt the way to go. Every farkin browser handles the display of it differently because there is no unified DM for it. I have clients throwing requests at me for CSS that I know should be handled in the perl, but they know the buzz word of "Non-Formational CSS is better I read..." BAH!

To top it off you cant restrict access to your CSS like you can with a CGI or something comparable. YARGH!
Comment posted on August 9th, 2003 at 07:39 PM
The problem is probably because IE incorporates the margin/padding into the width, whereas other browsers (firebird, opera, safari) follow the standard where margin/padding is not incorporated into the width. Therefore, you have to use an ugly hack to get the css right.

For example, if you want to have an input area of 450px with a margin of 15px on all sides, you have to use this code:

#content {
margin:15px;
width:480px; /* Damn IE */
voice-family: ""}"";
voice-family:inherit;
width:450px; /* The real deal */
}

Most new browsers (except IE) format CSS similarly.

You can stick with tables if you want, but with CSS, the file size tends to be significantly smaller.