Submitted by Damien on
Tags:
There's a really useful attribute in CSS called min-height
that lets you set the minimum height an element should be displayed as; this is often used to make two boxes appear the same height even if one has less content than the other. Well, Firefox, Opera and Safari support it but Internet Explorer 6 and older don't. Luckily there's a really simple work-around for it, you simply add a defintion to your CSS that browsers other than IE will ignore and set the height
to the same as the min-height
, e.g.:
[source:css]
/* for standards-compliant browsers */
.bigbox {
width: 300px;
padding: 2px;
border: 1px solid #000;
min-height: 200px;
height: auto;
}
/* for Internet Explorer */
/*\*/
* .bigbox {
height: 200px;
}
/**/
[/source]
Thanks Stu.