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
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!
7 thoughts on “the min-height bug”
The theme looks good in my browser. 🙂 I love it, great work.
This is a neat layout u have here. I wish I could understand ccs better.
Gorgeous. 🙂 I love this sort of style. Well done, dodo!
That’s pretty cool. 🙂 I love the new layout too. 😀
Wow, I think that was the same problem I was having with my tabulas layout. Thanks for the link
And great new theme too 🙂
wow! great find on that min-height hack! =)
i love it. the design is just so streamline and smooth looking!…….. the min-height hack is awesome too!