min-height

[cssmatt]

Im currently making a content DIV and want it to have a minimum height of say 500px.

The min-height function works fine in Firefox and opera, but as im sure your aware not in IE.

I have been rummaging around on the subject and have noticed the the work-around to this problem is a "conditional comment", which will tell IE to work on a fixed height instead.

I have found an example of a conditional comment, but its not working in the way im using it. Am i right to use it like this....

.content {
background-image: url("./images/content.jpg");
background-repeat: repeat-y;
width: 760px;
margin: 0 auto;
<!--[if IE ]>
height: 500px;
<![endif]-->
min-height: 500px;
}

Because at the moment, its not working!

Any ideas?!?!

[Fotiman]

Change it to this:

<style type="text/css">
.content {
background-image: url("./images/content.jpg");
background-repeat: repeat-y;
width: 760px;
margin: 0 auto;
min-height: 500px;
}
</style>
<!--[if IE ]>
<style type="text/css">
height: 500px;
</style>
<![endif]-->

And you can learn more about Conditional Comments from Microsoft's website [msdn.microsoft.com]

[cssmatt]

sorry to sound thick, but that snippet of code isnt working?

Can conditional comments only be used to substitue whole style sheets, or can they be put between the individual .divName{} brackets and specify one attribute.

Because ive tried to implement the code you gave, and it doesnt seem to work!

Would i have to use a condidtional comment to add a completely different style sheet?

[Receptional Andy]

I believe min-height doesn't apply to IE, because it treats any height value entered as the minimum, so you could just use an expression to achieve this, which other browsers will ignore:

height: expression('500px');min-height:500px;

Not valid code, but still ;)

[cssmatt]

thats what i was trying to achieve with a conditional comment, but wasnt sure if i could use it to specify a single attribute or whether i had to use it to specify a whole style sheet.

because i was trying

.content {
background-color: #FFFFFF;
width: 75%;
min-height: 500px;
margin: 0 auto;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
position: relative;
<!--[if IE]>
height: 500px;
<![endif]-->
}

which wasnt working?! Because i would much rather avoid having to use 2 style sheets if its possible.

Is that what u were suggesting?

[cssmatt]

for some reason, ive now just tried it without the conditional comment, and i just added both a min-height AND a height, and it seems to work?

Im pretty sure this didnt happen before! odd!

Oh well, im not complaining, its working now!

[HelenDev]

for some reason, ive now just tried it without the conditional comment, and i just added both a min-height AND a height, and it seems to work?

This will work fine for IE, and if the div doesn't contain much content it will APPEAR to work fine in FF/Opera, but try adding a load of content to the div - I'm pretty sure that FF will honour the height attribute and keep the div at 500px, no matter how much it contains and overlapping text and nasty stuff may result...

With regard to the conditional comments, I think Fotiman is right, they have to be OUTSIDE the style tags, and they certainly can't be within an external stylesheet itself.

Not sure if the extra space in fotiman's code here

<!--[if IE ]>

would have caused a problem - perhaps it should be

<!--[if IE]>

i would much rather avoid having to use 2 style sheets if its possible.

I have now come around to the way of thinking that it is a very good idea to have a separate IE specific stylesheet, it keeps this kind of stuff separate and is easier to maintain.

[Fotiman]

Can conditional comments only be used to substitue whole style sheets, or can they be put between the individual .divName{} brackets and specify one attribute.

No, they can only be used to include the entire stylesheet, or a link to an external stylesheet. The reason they can not be used for individual style rules is because CSS recognizes HTML comments and ignores them. This is for backwards compatibility. For example:

<style type="text/css">
<!--
body { color: white; background: black; }
-->
</style>

The above example allows modern browsers to find your styles, and hides them from older pre-HTML 3.2 browsers that don't recognize the style element so they don't display the contents of the style element on the page. The same reason many JavaScript examples often contain HTML comments. Thus, any modern browser would still see your style rule if you tried to use a conditional comment within the style element.

Reference: http://www.w3.org/TR/CSS21/syndata.html#comments [w3.org]

As to why the above example didn't work, it could be the space as someone else pointed out. Or it could be your cascading order. Make sure you include the conditional comment AFTER your other styles to make sure it's not being overruled by a later style.