Min height cross browser CSS

In CSS version 2 there is a “min-height” property, but it doesn’t work in the same way in every browser,…

Dicembre 17, 2009

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;
}

Author

PHP expert. Wordpress plugin and theme developer. Father, Maker, Arduino and ESP8266 enthusiast.

Recommended

Modify list counter in :before pseudo class with jQuery using start attribute

Suppose you have two ordered list ol tags, and the second one has a start attribute. You also have in…

Aprile 20, 2016

Cross browser opacity

Is there a css definititon to make cross browser opacity? Yes. I found this, and it seems to work: div.opacized…

Novembre 12, 2009

Javascript to make some links blink

Mark each anchor tag (<a href…) with rel=”blinking” to make the tag blink (not very clever, but sometimes useful). This…

Novembre 9, 2009

The Quantcast CMP broke my sites

A javascript error in CMP blocks my site.

Maggio 19, 2023

WP Gutenberg notes

Collection of notes and thoughts on Wordpress Gutenberg blocks development.

Gennaio 9, 2023