Solved

CSS min-height attribute - problems in IE

Posted on 2006-06-30
5
329 Views
Last Modified: 2008-03-17
Hello,

I'm having trouble using the min-height attribute in a style sheet. I'm trying to apply it to a div so that a footer doesn't come up and cover up a menu when the content isn't long enough. It works fine in Firefox, but IE doesn't even seem to notice it's there. And the funny thing is, when I type in min-height on google, the first thing that comes back is an article on Microsoft's MSDN website.

Can anyone help me identify why it isn't working properly? Thanks.
0
Comment
Question by:carter_jl
  • 3
  • 2
5 Comments
 
LVL 16

Accepted Solution

by:
OliWarner earned 500 total points
ID: 17019970
IE (6) doesnt cope with min-height because its not implemented.

You can hack around it with something like this:
http://www.cssplay.co.uk/boxes/minheight.html

You must appreciate that it *is* a hack and probably will not validate, but if it works, it works.
0
 

Author Comment

by:carter_jl
ID: 17020277
I don't quite understand how to use that code pertaining to a div and exactly where to put what in the style sheet. Can you elaborate a little further?
0
 

Author Comment

by:carter_jl
ID: 17020356
Nevermind, using that code I found a better help page for it. Thanks.
0
 
LVL 16

Expert Comment

by:OliWarner
ID: 17020405
Sure. The sample code is coding for an element with a class name of "container". That's the element that its trying to set the minimum height for.

/* for understanding browsers */
.container {
min-height:8em;
height:auto;
}

/* for Internet Explorer */
/*\*/
* html .container {
height: 8em;
}
/**/

So what that's really doing is setting the minimum height for any browsers that care to understand it. The second part is coded that only IE will read the code contained between the "/*\*/" and the "/**/"

It sets the height manually and because IE will auto-stretch, this works like it were min-height. mOther browsers might try to enforce the height, therefore its coded so only IE can read it.

All you really need to do to get this working in your code is swap out the ".container" part for the class name you're using on your element. If you need more help with that, chuck me a link to the page or put up the relevant CSS and HTML.
0
 
LVL 16

Expert Comment

by:OliWarner
ID: 17020413
Oki =) Glad you found some use of it.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
If-Then-Else ASP problem 6 60
Animated .jpg? 13 79
When should I use a controller? 3 34
maps stopped work unsure why 7 34
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question