Create a Minimum Height with CSS

by Posted in Code
 

As developers, we all battle the cross browser struggle.  What works in Internet Explorer may not work in Firefox. Sometimes what works in IE 7 doesn’t work in IE 6.  Little nuances like that appear all of the time in browser testing.

One such issue is setting a min-height with CSS.  Firefox supports this CSS property but Internet Explorer does not.  To overcome the issue in IE you need to modify your min-height property in the CSS syntax.

CSSselector {
min-height:100px;
height:auto !important;
height:100px;
}

Utilizing this CSS technique to establish a min-height does not require you to include empty div elements into your HTML; therefore, keeping your HTML clean and your CSS for presentation.

You might also like:

  1. How to Define HTML5 DOCTYPE for IE
  2. WordPress Featured Images With an Auto Width or Height
  3. jQuery 2.0 Will Not Support IE 6, IE 7, or IE 8.