In CSS version 2 there is a “min-height” property, but it doesn’t work in the same way in every browser, or better, it’s not supported by every browser.
Looking around in the web I’ve found different CSS tricks to make min-height properties cross browser.
Here they are, I usually use the third one, but I do not know if it is the best one:
FIRST METHOD
/* for browsers that don't suck */
#container { min-height:200px; height:auto !important; }
/* for Internet Explorer */
/*\*/
* html #container { height: 200px; }
/**/
SECOND METHOD
#container { min-height:200px; }
* html #container { height:200px; }
THIRD METHOD
#container {
height:auto !important;
height:200px;
min-height:200px;
}
Tags: css trick, height, ie6, min-height
Is there a css definititon to make cross browser opacity?
Yes.
I found this, and it seems to work:
div.opacized {
opacity: .50; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=50); /* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
-khtml-opacity: .50; /* Safari 1.x */
-moz-opacity: .50; /* FF lt 1.5, Netscape */
}
If you want a background image with css opacity, you have to make two div, the first with the opacity and the second one css positioned over the first:
<div id='container' style='position:relative;width:600px;height:200px;overflow:hidden;'>
<div class='opacized' style='background-image:url(image.jpc);position:absolute;top:0px;left:0px;z-index:1;width:600px;height:200px;'> </div>
<div style='position:absolute;top:0px;left:0px;z-index:2;'>
normal text over opacized background
</div>
</div>
