Firefox, Safari and IE Compatible CSS min-height

All webmaster should already knows that some CSS code may not compatible from one browser to another. You may noticed that on the CSS code would be a list of redundant code in order to hack this out.

However, while surfing today, I found one good simple tricks for min-height and min-width CSS code that is compatible across all common versions of Safari, Firefox and IE. Maybe you already found and use it. I'm posting this for my notes and maybe it could be helpful for others too...

The Cross Browser min-height CSS

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

This works because all of the more recent browsers will understand and respect the min-height setting as well as the !important designation. So in the example above, the block will be given the min-height setting you specify, and the height:auto will take precedence over the height:100px, even though it appears earlier in the code. With content shorter than 100px, the min-height setting is observed, and with content that is longer, the block is sized to fit the content.

By the way, in the case of older versions of IE, neither the min-height parameter nor the !important designation are supported. Instead, the browser essentially sees a height:auto, immediately followed by a height:100px, and the latter takes precedence. Lucky for us, height parameter in older versions of IE function exactly like the min-height parameter. When content expands past the size of the element, it grows to accommodate it. When content is shorter, the specified height is respected.

Logically, this should also works on min-width.

The Cross Browser min-width CSS

.bar {
min-width:100px;
width: auto !important;
width: 100px;
}

If you wonders, I got this trick from Hackszine. Enjoy!!!