Accessibility

CSS Advisor

min-height attribute ignored in IE

by ismailbaskin on September 6, 2007
Edited by: sfegette on November 24, 2009 Avg Rating 3.4 (15)   |   Log in to rate post.

Tagged with Explorer 6.0 , Explorer 7.0 , Firefox 1.5 , Width/Height

Problem

"min-height" attribute works well in Firefox but IE ignores it. IE's height act as FF's min-height. Note: in IE 7 problem was fixed.

Solution

Apply the specified CSS hack (see description).

Detailed description

Apply the following CSS hack to solve the problem.


* html #content {
    min-height: 200px;
}

/* Internet Explorer *
/*\*/
* html #content {
    height: 200px;
}
/**/




Tagged with Explorer 6.0 , Explorer 7.0 , Firefox 1.5 , Width/Height

Tag it on del.icio.us or Digg

Text ID: 1


Comments (6)

To add a comment, please Log in.




IE with min-height... and other tricks

by IEHacker on October 12, 2008

ok, this is been solved with some accurate css coding.
@Stechico > your code is simply correct and easy to remember. why ? because, IE v6 can still expand its height no matter they are have a specific height of tag or "div" code.

Most of people worry about hacking IE 6 and IE 7 but with a little exploring over 1 file of css with 2 different IE hacks will work. try this in css file. name it of default-ie.css and inside the file for IE 7 append this at every id or class > * body. and for IE 6 append this at every id or class > * html.

hope this help.

min-width?

by gbdesign on April 9, 2008

Does this also work for the min-width property?

Hacks are no-no

by neXib on February 13, 2008

Solutions works, but much better to make a stylesheet for IE6 and below that are added with a conditional comment in the HTML source file if the browser is under IE7. That way you don't have to worry about this file breaking later if the hack doesn't work in a new IE version.

Pablo Davi

by Pablo Davi on October 25, 2007

can use too:
#content { min-height:200px; height:auto !important; height:200px; }
work fine

This can be...

by stechico on October 4, 2007

#content {min-height:200px;}
* html #content {height:200px;}

Newbie thanks

by treemer on September 17, 2007

This definitely solved a problem for me.





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (45)
Mozilla/Firefox (16)
Opera (7)
Safari (13)
CSS Properties
Background (6)
Border (3)
Color (1)
Float (15)
Font (1)
Margin (6)
Padding (4)
Position (15)
Text (13)
Width/Height (9)