SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
-
Jul 13, 2008, 08:56 #1
- Join Date
- Dec 2005
- Posts
- 1,738
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Trying to understand 'min-height' hack...
Ok I found this min-height hack for IE6 and just not quite sure how to apply it to the div I want it to work on?
And what if I have 3-4 other different min-height's needed on the same page?
selector?
Code CSS:selector { min-height:350px; height:auto !important; height:350px; }
Thanks Guys
-
Jul 13, 2008, 09:46 #2
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If you have multiple elements which are in need, then you need to have a hook on such as an ID or have them have the same class. So if those 4 division elements had a class of 'foo'
.div {
min-height:350px;
height:auto !important;
height:350px;
}
Standards compliant browsers will use the first height value, because MSIE incorrectly ignores the !important and uses the last value instead. ( height is min-height in MSIE 6 btw )
You shouldn't use this IMO, but create a seperate selector in a style sheet made just for MSIE and just feed it the height value, leaving min-height in your normal style sheet.
-
Jul 13, 2008, 12:58 #3
- Join Date
- Dec 2005
- Posts
- 1,738
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for the explanation SoulScratch.
Starting to make sense... I think?
Code CSS:selector { min-height:350px; height:350px; }
Below is a example of what I'm working on:
Code CSS:#full-holder{ float:left; width:562px; min-height:350px; height:350px; display:inline; line-height: 1.6em; border: 1px solid #333; background-color: #ccc;} #full-left-holder{ float:left; width:330px; padding:10px; min-height:330px; height:330px; background: #777;} #full-right-holder{ float:left; width:212px; min-height:350px; height:350px; background: #999;}
Which looks like:
Code HTML4Strict:<div id="full-holder" class="clearfix"> <div id="full-left-holder"> <h1>News</h1> <p>Some news and loads more paragraphs</p> </div> <div id="full-right-holder"></div> </div>
But sometimes these div's will have dynamic content so the size will not always be 350px meaning if I fix a height in IE.
and for some reason in IE6 - 'full-holder' extends about 20px past both my left & right holders... why is that?
Thanks
Bookmarks