[WSG] Minimum Height Delimma in IE
Hello All -
Yes the age-old minimum height delimma has come to haunt me.
I usually stay away from anything that cannot be done in IE 6 without a
hack, but I've got a client who loves a design I did before I realized
that the main container would need to be held open vertically under
certain circumstances.
So, now I'm kinda stuck - can anyone help?
#content {
width: 510px;
min-height:500px;
height:auto;
margin: 0 0 0 30px;
color: #000;
padding-bottom: 30px;
position: relative;
z-index: 1;
}
I'm trying out Stu Nicholls solution for ie:
/*\*/
* html #content {
height: 500px;
}
/**/
But, it appears to be LIMITING the height of #content to 500px rather than
letting it expand if there's more than 500px of content.
BTW - the reason I'm using position and a z-index on this element is because
there's a element I that that needs to show behind it. I don't know if that
has any effect on this issue or now.
Any help GREATLY appreciated and I PROMISE not to design anything else that
may cause these IE problems. God, what a headache!
If anyone would like to see the problem live, go here: in FF and then IE 6.
Thanks to all in advance,
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Minimum Height Delimma in IE
Hi Cole,
Had a look at your page and I think the problem is the overflow:hidden
applied to #container (skin.css line 18). You should see the rest of the
content if you remove that line. If overflow:hidden is absolutely
necessary then you could just remove the height values. IE will expand
the height of the box until it fills the content and FF will just use
min-height. Also the CSS child selector is perfect for overcoming the
lack of min-height support in IE6. Assuming #content is contained within
a DIV tag you could do the following (stripped out unnecessary CSS for
clarity):
#content {
min-height:500px;
height:500px;
}
div#content {
height:auto;
}
IE6 does not support the child selector so it will ignore the second
clause. FF will see min-height and height=auto. The good thing about
this is it's perfectly valid code.
Hope this helps!
Regards,
Ca-Phun
Cole Kuryakin wrote:
Hello All --
Yes the age-old minimum height delimma has come to haunt me.
I usually stay away from anything that cannot be done in IE 6 without
a hack, but I've got a client who loves a design I did before I
realized that the main container would need to be held open
vertically under certain circumstances.
So, now I'm kinda stuck -- can anyone help?
#content {
width: 510px;
min-height:500px;
height:auto;
margin: 0 0 0 30px;
color: #000;
padding-bottom: 30px;
position: relative;
z-index: 1;
}
I'm trying out Stu Nicholls solution for ie:
/*\*/
* html #content {
height: 500px;
}
/**/
But, it appears to be LIMITING the height of #content to 500px rather
than letting it expand if there's more than 500px of content.
BTW -- the reason I'm using position and a z-index on this element is
because there's a element I that that needs to show behind it. I don't
know if that has any effect on this issue or now.
Any help GREATLY appreciated and I PROMISE not to design anything else
that may cause these IE problems. God, what a headache!
If anyone would like to see the problem live, go here: in FF and then
IE 6.
Thanks to all in advance,
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Minimum Height Delimma in IE
I usually stay away from anything that cannot be done in IE 6 without a
hack, but I've got a client who loves a design I did before I realized
that the main container would need to be held open vertically under
certain circumstances.
So, now I'm kinda stuck - can anyone help?
Hi Cole,
You can try this if you want to use overflow and min-height at the same
time:
#zContainer {
overflow:hidden;
min-height:15em;
_height:15em;
_overflow:visible;
_overflow-x:hidden;
}
As a side note, if you want to use min-height using valid declarations in
one single block, you can try:
#zContainer {
min-height:15em;
height:auto !important;
height:15em;
}
HTH,
---
Regards,
Thierry | www.TJKDesign.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
