Chris Bunk.com

So I used to consider myself a man who knew layout. Graphic Designers, don't ask me what you should do, be creative and I'll make the layout happen. Well you get confortable....and then....technology changes, tables are supposed to now be bad. Time to adjust....long overdue adjustment.

HELLO CSS

So with that said let me share with you some of the stuff I've learned in my ongoing adventure with CSS Layout.
1) Why can't my div that centers fine in IE center in firefox with text-align:center?

The solution: Margin:auto on the div - appently a text-align:center on the parent container isn't enough for firefox. Margin: auto works but this wasn't obvious to me. Firefox fans I'm sure this is more correct to the spec but I don't care. Googling on a variety of topics for five minutes didn't give me the results I wanted quick enough. I founded what I needed checking out the resource links at CSS Zen Garden.

2) Why does the value bottom 0px; or right: 0px; not seem to stretch an empty div to the bottom or right in ie?
A2: Well it seems like IE does not recognize the right and bottom attributes when using an absolute layout because you need to give a height to the div.

The first things I came accross is the star hack to solve this one. Before talking about the solution there's one big problem, XP SP2 has warning active x code is trying to execute. I'm only trying to do layout, do I really need to do a hack that causes a warning? Well with that said here is how it works.

In IE only use javascipt to assign a height: Make sure it's parent container has a height, in the case of body give it a 100% height

Now The hack part which renders in IE only

* html .theleftbar {
height:expression(document.body.clientHeight - 142 + "px");
}

*Note you could substitute document.body for the name of a parent div if you wanted to do that, just make sure the parent div has a height set.

I was lucky enough to attend a talk by Eric Meyer, CSS Guru, and got the opprotunitty to ask him the right way to do this avoiding css. His answer, CSS can't handle this in IE, the only solution is to use a table for the layout. He says currently there is no way to handle a grid layout with CSS that works in IE. Wow I think I thought tables were wrong. I guess there's still room for them.

3) The box model issue came up, this is where height is misinterpretted in IE because of padding and margins get included in the height calculation when according to the spec this shouldn't happen. This problem is all over the web so I'm just going to link to the solution of the box model problem.

As I run across more headaches in making the transition I will pass them on.