SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
Thread: min-height of div
-
Oct 18, 2007, 02:13 #1
- Join Date
- Nov 2005
- Location
- Norway
- Posts
- 715
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
min-height of div
Hey,
is it possible to have a min-height value on a div?
Afaik min-height is not supported in Internet Explorer?
Is there another solution that works across all browesers?
Cheers
Frederik
-
Oct 18, 2007, 02:52 #2
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Expressions are usually used for IE6 and below and this is explained here.
http://perishablepress.com/press/200...rnet-explorer/
I also ran across this solution although haven't tried it but don't see why it wouldn't work.
Code:#container { min-height:400px; height:auto !important; height:400px; }
-
Oct 18, 2007, 02:53 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
See the faq on min-height for a full explanation.
IE6 and under treat height as a minimum anyway so you can use the star selector hack and give IE6 a height and better browsers get min-height.
Code:.test{min-height:200px;} * html .test{height:200px}
-
Oct 18, 2007, 02:55 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
also ran across this solution although haven't tried it but don't see why it wouldn't work.
-
Oct 18, 2007, 03:39 #5
- Join Date
- Nov 2005
- Location
- Norway
- Posts
- 715
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks
-
Oct 18, 2007, 03:55 #6
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Paul, would you consider !important to be a hack? I thought it was valid code and was a way of simply altering specificity rules?
I don't tend to use it myself but have seen valid ways of using it for complex sites but admittedly, using more logical structured markup should get around using it in the first place.
-
Oct 18, 2007, 05:20 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Paul, would you consider !important to be a hack?
In case anyone doesn't understand what's happening then !important should over-ride any other same property settings for that element (even if later it in the html (unless !important is also applied)).
IE6 understands !important quite well in normal circumstances unless the property is in the same style block. If it meets 2 properties the same in the same rule then it discounts the first one as it assumes it's a mistake (because why would you declare something twice).
Therefore the first !important is discounted and just the last instance of the property/value is actioned. Other browsers attach importance to the property at all times and are not confused like IE. (IE7 has no problems either)
-
Oct 18, 2007, 05:34 #8
- Join Date
- Nov 2005
- Location
- Norway
- Posts
- 715
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
When I set the min-height of my wrapper section to 100% the background-image will not show properly. But when I change it back to 500px (the value it used to have) it shows just fine. The problem is that I want the wrapper and background-image to run according to the elemnts within the wrapper section. Any ideas?
-
Oct 18, 2007, 05:37 #9
- Join Date
- Nov 2005
- Location
- Norway
- Posts
- 715
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Btw it works in IE7 but not in firefox (and other mozilla browsers) and Opera
-
Oct 18, 2007, 06:23 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
When I set the min-height of my wrapper section to 100% the background-image will not show properly. But when I change it back to 500px
You can only use a 100% value if the parent of the element has a real height. If the parents height is based on its content then its height is auto which means that the 100% height of the child collapse to auto also. If the parent therefore has no height then neither does the child.
When you set min-height to 500px then you are giving it an exact height and it will obey.
If you have a link or some code we could advise better
-
Oct 18, 2007, 08:44 #11
- Join Date
- Nov 2005
- Location
- Norway
- Posts
- 715
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry about that
http://www.frederikvig.com/test/index.html
Style:
http://www.frederikvig.com/test/styles/master.css
Cheers
Frederik
Works fine in IE7.0.
-
Oct 18, 2007, 09:27 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
HI,
As I guessed above you haven't cleared the floats.See the faq on floats for clearing techniques and an exmplanation.
You can either add overflow:auto here:
Code:#ormament-bottom { background-image: url(http://www.frederikvig.com/test/images/ormament2.jpg); background-repeat: no-repeat; background-position: left bottom; width: 859px; z-index: 10; overflow:auto }
Code:<div id="content-box-bottom"></div> </div> <div style="clear:both;height:1px"></div> </div> </div> <div id="footer"> <p>Copyright etc here </div>
-
Oct 18, 2007, 09:38 #13
- Join Date
- Nov 2005
- Location
- Norway
- Posts
- 715
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Cheers! works like a charm
Bookmarks