the newly released theme’s (read previous entry) tableless css layout has a bug. the layout doesn’t look the same under MSIE and Mozilla. The problem would be very easy to solve if i were to use a table. all i will have to do is set the height=”750″ in the table defintion. then if the content in the table is not long enough, it fills the rest of empty space. and if the content is too long, it stretches the table’s height. this maintains the minimum height of the table at 750px. we also take it for granted that this behavior is supported by all browsers. to accomplish the same task with pure css becomes a bit more interesting and esp. when you also want it to be supported by “all browsers” (meaning MSIE, mozilla & opera) ^_^ if you are interested in knowing how to do that in tableless css, read on.

the problem in css is caused by the fact MSIE does not support min-height. Its height property works like min-height in mozilla and opera.

in my case, if i were to put

min-height: 750px;
height: 750px;

in my class definition. under mozilla you will see this

this is because the height definition overwrites min-height. If the height is set, the area will not stretch itself when it overflows.

however if i were to take away height property and use only

min-height: 750px;

everything will work fine under mozilla but in MSIE, you will see this

because it does not understand min-height property, it will only stretch the height up to necessary. i want it to have a certain height so the sidebar does not over run the main content.

by searching google, i found this pixy’s min-height hack. after i applied the hack, the situation is solved. now both of my domain index page and my main blog page should look fine under both MSIE and mozilla 🙂 That hack is very cool!