Recent Posts
- (09/10) Fixing Warning: the ECDSA host key for 'github.com' differs from the key for the IP addressTAGS:Web Server Admin
- (12/26) CakePHP 3 - Getting List of Column Definitions from a Table (like schema())TAGS:CakephpCake3
- (09/14) Change Order of Loaded Behaviors in CakePHP 3TAGS:Cake3CakephpWeb ProgrammingPhp
- (05/29) CakePHP 3 - Accept JSON Header Only Working When Debug FalseTAGS:Web ProgrammingCakephpCake3
- (05/23) Remove All Events from Google Calendar (Reset Calendar)TAGS:Web ProgrammingPhp
- (11/08) Google Tag Manager (GTM) Not Firing Default PageView EventTAGS:Web ProgrammingJavascriptGoogle Tag Manager
- (10/13) In PHP, how do you get __toString() Magic Method Result without calling echo?TAGS:CakephpCake3Cakephp 13PhpWeb Programming
- (11/14) Getting output from shell_exec() at all timesTAGS:Web ProgrammingWeb Server Admin
Subscribe to my feed
MainelyDesign.com Blog
CSS Min-Height Hack in Internet Explorer
Posted on 12/15/2009 at 10:18 am by Kevin Wentworth
Viewed 14,431 times | 0 comments
Another day of web developing with CSS and another day of needing a hack for IE6 and IE7. This isn't really a hack so much as it's a method of ordering statements in your CSS declaration that yields a working min-height declaration in Internet Explorer. Well, I guess it's a hack (but I hate using them).
CSS min-height will be used in browsers that support it
In web browsers that support the min-height property, it will be used. In browsers that don't support it, height will be used. For browsers that support !important, the height will be set to auto (with a min-height property). For browsers that don't support !important, ah-hem IE6, the height will be set to a fixed height.
CSS min-height magic
The following code is what I used in my CSS style sheet to make my container div at least 879px tall. (I found it here)
- #container {
- * a little magic to make min-height work in IE */
- min-height: 879px;
- height: auto !important;
- height: 879px;
- }
IE6 is not !important
Two things work in our favor with how IE6 works- 1) it doesn't support !important and 2) the height, even though set to a fixed height, will still expand to the needed height of the container div.
Cheers,
-Kevin Wentworth
Tags for CSS Min-Height Hack in Internet Explorer
Css | Example | Hack | Ie | Internet Explorer | Web Design
Comments for this Posting
No comments. Be the first to post a reply.
Sorry, comments are closed for this posting.
Please Email Kevin if you have any questions. Thanks!