Hi,
I figure you guys would know more about this than I would. These are hacks that supposedly work to fix the lack of min-height for IE. Maybe I didn't implement them properly or something but I wasn't able to get them to work right.
/* IE cannot see this */
head:first-child+body div#content {
height: 0%;
min-height: 400px;
}
and
/* IE cannot see this */
html>body div#content {
height: 0%;
min-height: 400px;
}
Anyway, I found this other one...
<!-- m --><a class="postlink" href="http://blog.vinniegarcia.com/oldstuff/000137.html">http://blog.vinniegarcia.com/oldstuff/000137.html</a><!-- m -->
Would this be a legitimate fix to use than the previous two? Validation?
I'd like to get your feedback on this or on all the hacks in general.
Thanks!I'm kind of against hacks because if you use them then they may work for all the current browsers, but if for example, Microsoft were to fix the html>body hack so that IE understood it but the rest of the CSS was still flawed, most layouts that use that hack would simply fall apart.
That's why I try to use them as little as possible but sometimes I find (unfortunately) that the are neccessary.I agree with what you're saying, lava. I only hope Microsoft fixes their browser sooner than later. It's my understanding that their next full version of internet explorer will ship with the next version of windows. And until then, will all these compliance/standardization issues be resolved??
As far as the hacks goes... they're a necessary evil. What are your preferences for the min-height hack? Which one would you use?Personally I would just try and make sure that the content inside the container is (for example) 20 px tall so that it can't shrink below that height.
For example, if you had text in the container, specify a line height of 20px.
Can I see the page that you are working on, I might know a way around using the hack.
Remember, hacks are an only when neccessary evil. Use them as sparingly as possible.Well, here's one of our the sites where I tried implementing the hack.
<!-- m --><a class="postlink" href="http://www.itgco.com/csa/training.html">http://www.itgco.com/csa/training.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.itgco.com/csa/style.css">http://www.itgco.com/csa/style.css</a><!-- m -->
Look for the mainContent div. As you can see I had tried the two hacks but I don't think I did it properly. It works fine in IE but not in Mozilla/Netscape (luckily most of our clients use IE). Please take it with a grain of salt, as my css skills aren't up too par with some yours'.
Thanks.Why exactly do you need a min-height for #mainContent?
Also, you could just set your decorative images (such as <!-- m --><a class="postlink" href="http://www.itgco.com/csa/images/main_left.gif">http://www.itgco.com/csa/images/main_left.gif</a><!-- m -->) as backgrounds.Good question...
I needed min-height in there so that the footer div wouldn't overlap the content area... specifically that decorative image (which I'll eventually put in the background
) when there's little to no content.
So Ideally I'd like the footer always below that image/content area and not on top of. This would work by putting a 'height' in there. Except of course it would only work in IE. So then I'd also need the min-height in there for the other browsers. But the hack(s) aren't working correctly. And that's what I've been trying to figure out...
Makes sense?How about:
Take a div for your main content.
Nest another div with
padding-left: 100px;
(or whatever) and with the CSA image inthe background.
background: #fff url(csa.jpg) 0 0 no-repeat;
Then put your footer in the bottom of that div. You might add a margin-top to the div containing the footer.
Any good?
Alternatively float your CSA image to the left, and use clear: left on your footer. That would solve your problem I guess.Well here's a layout where the footer will stay below both columns no matter which is longer.
If you can find it within yourself to change your current layout to this new one, you could simply apply the min-height hack to the centre column and hang your decorative images off whatever elements are just lying around.
Shouts to Mezzoblue (<!-- m --><a class="postlink" href="http://www.mezzoblue.com/archives/2004/01/23/friday_chall/">http://www.mezzoblue.com/archives/2004/ ... day_chall/</a><!-- m -->) and Ryan Brill (<!-- m --><a class="postlink" href="http://www.ryanbrill.com/floats.htm">http://www.ryanbrill.com/floats.htm</a><!-- m -->).Thanks for your help, guys. I probably won't get to these changes untill tomorrow (it's getting kinda late in the day over here... dunno about those British isles)
I'll keep you posted on what works.
THankS AGAin!I hope you get your layout sorted.
22:40 over here by the way.I don't know if this is a bad idea or not, but it's something I use on my site to "sort of" make IE use min-height.
div#content {
min-height:400px;
height:auto !important;
height:400px; (only IE will read this line)
}
In Mozilla/Opera, the height is set to auto, and the min-height of 400px is used. In IE, the height is just set to 400px. I thought that if the content of that div exceeds 400px it (IE) would either cut it off, or overflow the div and spill out the bottom. However, IE seems to just expand the div vertically as needed, which is exactly what min-height does.
I don't know if this works in Safari, which I believe also does not support min-height. I'm pretty sure Safari will ignore the height:400px line, due to the !important declaration on the previous line, though.Thanks for your suggestion, Tom.
Would you know, or anyone else know, if this would validate?
Thanks.
I figure you guys would know more about this than I would. These are hacks that supposedly work to fix the lack of min-height for IE. Maybe I didn't implement them properly or something but I wasn't able to get them to work right.
/* IE cannot see this */
head:first-child+body div#content {
height: 0%;
min-height: 400px;
}
and
/* IE cannot see this */
html>body div#content {
height: 0%;
min-height: 400px;
}
Anyway, I found this other one...
<!-- m --><a class="postlink" href="http://blog.vinniegarcia.com/oldstuff/000137.html">http://blog.vinniegarcia.com/oldstuff/000137.html</a><!-- m -->
Would this be a legitimate fix to use than the previous two? Validation?
I'd like to get your feedback on this or on all the hacks in general.
Thanks!I'm kind of against hacks because if you use them then they may work for all the current browsers, but if for example, Microsoft were to fix the html>body hack so that IE understood it but the rest of the CSS was still flawed, most layouts that use that hack would simply fall apart.
That's why I try to use them as little as possible but sometimes I find (unfortunately) that the are neccessary.I agree with what you're saying, lava. I only hope Microsoft fixes their browser sooner than later. It's my understanding that their next full version of internet explorer will ship with the next version of windows. And until then, will all these compliance/standardization issues be resolved??
As far as the hacks goes... they're a necessary evil. What are your preferences for the min-height hack? Which one would you use?Personally I would just try and make sure that the content inside the container is (for example) 20 px tall so that it can't shrink below that height.
For example, if you had text in the container, specify a line height of 20px.
Can I see the page that you are working on, I might know a way around using the hack.
Remember, hacks are an only when neccessary evil. Use them as sparingly as possible.Well, here's one of our the sites where I tried implementing the hack.
<!-- m --><a class="postlink" href="http://www.itgco.com/csa/training.html">http://www.itgco.com/csa/training.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.itgco.com/csa/style.css">http://www.itgco.com/csa/style.css</a><!-- m -->
Look for the mainContent div. As you can see I had tried the two hacks but I don't think I did it properly. It works fine in IE but not in Mozilla/Netscape (luckily most of our clients use IE). Please take it with a grain of salt, as my css skills aren't up too par with some yours'.
Thanks.Why exactly do you need a min-height for #mainContent?
Also, you could just set your decorative images (such as <!-- m --><a class="postlink" href="http://www.itgco.com/csa/images/main_left.gif">http://www.itgco.com/csa/images/main_left.gif</a><!-- m -->) as backgrounds.Good question...
I needed min-height in there so that the footer div wouldn't overlap the content area... specifically that decorative image (which I'll eventually put in the background
) when there's little to no content. So Ideally I'd like the footer always below that image/content area and not on top of. This would work by putting a 'height' in there. Except of course it would only work in IE. So then I'd also need the min-height in there for the other browsers. But the hack(s) aren't working correctly. And that's what I've been trying to figure out...
Makes sense?How about:
Take a div for your main content.
Nest another div with
padding-left: 100px;
(or whatever) and with the CSA image inthe background.
background: #fff url(csa.jpg) 0 0 no-repeat;
Then put your footer in the bottom of that div. You might add a margin-top to the div containing the footer.
Any good?
Alternatively float your CSA image to the left, and use clear: left on your footer. That would solve your problem I guess.Well here's a layout where the footer will stay below both columns no matter which is longer.
If you can find it within yourself to change your current layout to this new one, you could simply apply the min-height hack to the centre column and hang your decorative images off whatever elements are just lying around.
Shouts to Mezzoblue (<!-- m --><a class="postlink" href="http://www.mezzoblue.com/archives/2004/01/23/friday_chall/">http://www.mezzoblue.com/archives/2004/ ... day_chall/</a><!-- m -->) and Ryan Brill (<!-- m --><a class="postlink" href="http://www.ryanbrill.com/floats.htm">http://www.ryanbrill.com/floats.htm</a><!-- m -->).Thanks for your help, guys. I probably won't get to these changes untill tomorrow (it's getting kinda late in the day over here... dunno about those British isles
)I'll keep you posted on what works.
THankS AGAin!I hope you get your layout sorted.
22:40 over here by the way.I don't know if this is a bad idea or not, but it's something I use on my site to "sort of" make IE use min-height.
div#content {
min-height:400px;
height:auto !important;
height:400px; (only IE will read this line)
}
In Mozilla/Opera, the height is set to auto, and the min-height of 400px is used. In IE, the height is just set to 400px. I thought that if the content of that div exceeds 400px it (IE) would either cut it off, or overflow the div and spill out the bottom. However, IE seems to just expand the div vertically as needed, which is exactly what min-height does.
I don't know if this works in Safari, which I believe also does not support min-height. I'm pretty sure Safari will ignore the height:400px line, due to the !important declaration on the previous line, though.Thanks for your suggestion, Tom.
Would you know, or anyone else know, if this would validate?
Thanks.