Jitendra Vyas
Jitendra Vyas

Reputation: 152687

what is the best and valid way for cross browser min-height?

for #main-content

I don't want to give any fix height because content can be long and short but if content is short then it should take minimum height 500px.

i need compatibility in all browser.

Is thery any w3c valid and cross browser way without using !important because i read !important should not be used

In conclusion, don’t use the !important declaration unless you’ve tried everything else first, and keep in mind any drawbacks. If you do use it, it would probably make sense, if possible, to put a comment in your CSS next to any styles that are being overridden, to ensure better code maintainability.

I tried to cover everything significant in relation to use of the !important declaration, so please offer comments if you think there’s anything I’ve missed, or if I’ve misstated anything, and I’ll be happy to make any needed corrections.

http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/

Upvotes: 2

Views: 1160

Answers (3)

Jeffery To
Jeffery To

Reputation: 11936

min-height is supported in every major browser except IE6 (see QuirksMode).

In IE6, an element will expand to contain its content, even if it has a fixed height; height in IE6 is in effect min-height.

So a cross-browser min-height declaration would be:

#main-content {
    min-height: 500px;
}
* html #main-content { /* target IE6 */
    height: 500px;
}

Upvotes: 2

Sarfraz
Sarfraz

Reputation: 382726

Here is one:

#main-content {  
    min-height:500px;  
    height:auto !important;  
    height:500px;  
}  

Also see this for IE:

Cross Browser CSS Min-Height

Upvotes: 1

Vinay Pandey
Vinay Pandey

Reputation: 8913

min-height: 100px; /* sets min-height value for all standards-compliant browsers */

min-height doesn't work for IE hence you can use:-

height: expression( this.scrollHeight < 100 ? "100px" : "auto"); /* sets min-height for IE */

Upvotes: 0

Related Questions