On the web site I'm building, I need a DIV that is at least 600 pixels high, but will grow higher if the content is too large to fit (the width is fixed). According to the CSS specs, min-height would be the right thing to use, and it seems to work perfectly well in Firefox, Opera, and Safari 2.0. In IE it doesn't, though - the min-height is ignored, and the DIV will only just be high enough for its content. Which of course looks silly. If I use "height" instead, the page will render "correctly" (i.e., as intended) in IE and Opera, but Firefox will follow CSS and have the DIV exactly the given height, and letting the content "bleed" out of the DIV. Which isn't nice either.
So my question is: Should I consider IE "broken" for not supporting min-height, and just leave it at that? Or should I rather work around it by providing 2 different style sheets, one for browsers that support min-height and one for those that don't?
In case anyone's interested, here's the site so far.
Should I consider IE "broken" for not supporting min-height, and just leave it at that?
Yes. In general, you should consider IE (6) broken.
Yes, I know, but:
1) IE7 does it, too
2) I can't rely on the target audience to install a proper browser; I'm trying to sell a band here, a market that is heavily saturated.
But still, I think I'll go that route anyway. Just because IE is so annoying.
This page is very good.
http://www.cssplay.co.uk/boxes/width2.html
It's about width. So i don't know if this works for height too.
Hope it helps
But IE 7 does support min-height:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> <div style="min-height: 200px; border: solid black 1px;">x</div> </body> </html>
You're running in quirks mode. Add the DOCTYPE at the top. And yes, I would treat IE6 as broken and do nothing to compensate for it. It's the only way to frustrate users enough into at least upgrading.
And yes, I would treat IE6 as broken and do nothing to compensate for it. It's the only way to frustrate users enough into at least upgrading.
Absolutely.
I don't know about IE7, but IE6 doesn't support min-height but it does treat height a bit like that in that it will grow if your content grows, however other browsers won't. The trick, if it is one, is to use one of the css rules that all browsers other than IE6 support to negate it, e.g.
*set the min height for mozilla, etc. and IE6*
.someclass {
min-height: 600px;
height: 600px;
}
/* negate the height for all other than IE6 */
> .someclass {
height: auto;
}
As for treating IE6 as broken, while it might be nice, it's just plain stupid and the majority of people here who think so are living in cloud cuckoo land. Like it or not the majority of people in their foolishness use IE6 and if you want that majority then you have to support it, no matter how much pain you go through, they won't switch just because you say so, they'll just visit elsewhere. I usually end up getting it right for mozilla and mostly right/presentable for IE6 but not quite how I want it, but that's probably just a reflection on my ability but it's good enough.
hey'll just visit elsewhere
Let them. If the content is interesting enough, they're just gonna have to suck it up, and it's for their good anyway. If we (the content-makers) don't drive people to upgrade, then who will?
I agree with X-G. As long as the site can still be navigated, I see no reason to go out of your way to compensate for broken web browsers. Most people cannot even tell if something is broken anyway. Look at the average myspace profile for evidence.
Now if I were to make a site that benefited me financially (I'm talking real money), then I'd be sure that everyone could access the site. But that's not for their benefit. It would be for mine.
If someone wants to add IE6 hacks to his site, then I won't criticize him. I understand why he would want to, but I just don't share the same opinion.
That's what I'm talking about, real sites not just hobby sites. Which is why I said I'll go so far to make it reasonably usable for IE6 (e.g. compensate for obvious faults like margin auto, etc and margin/padding errors), but some things you just can't fix (like some form controls).
var div = document.getElementById("theID"); if(div.offsetHeight < 600) div.style.height = "600px";
but some things you just can't fix (like some form controls).
Flash to the rescue! 
Add the DOCTYPE at the top.
Done. Good tip, totally forgot about that. Can't test on IE7 right now, but if that does the trick, I'll be generously grateful.
I agree with X-G. As long as the site can still be navigated, I see no reason to go out of your way to compensate for broken web browsers. Most people cannot even tell if something is broken anyway. Look at the average myspace profile for evidence.
I agree; but if IE is broken, and my site won't work with it, the Digitally Illiterate will blame my site, not their browser ("it comes with my computer, how can it be broken?")
The only real problem, though, is this one single min-height thing, which means that IE6 users won't see the whole background image. Which is a shame, because the backgrounds add to the general appearance, but it's not an obstacle for navigating the site.
I could feed the CSS through a PHP filter, and in case the user agent is IE6, replace all min-heights with heights (will would, violating W3C recommendations, produce the expected result), but that would mean extra overhead just for that one broken browser.
just for that one broken browser.
That one broken browser that everyone uses 
I agree; but if IE is broken, and my site won't work with it, the Digitally Illiterate will blame my site, not their browser ("it comes with my computer, how can it be broken?")
Which is why you put a huge blaring red notice that says "You are using IE, you're an idiot, download Firefox instead" at the top of every page if you detect that the user is using IE.
The only real problem, though, is this one single min-height thing
The fix/workaround for this has already been posted in the thread. 
Not that. The CSS hack. Using Javascript here is a horrible solution when the CSS hack works.
I could feed the CSS through a PHP filter, and in case the user agent is IE6
Just to note, that is a very bad idea. You can't trust user agents. You have to use HTML/CSS hacks that only IE6 understand.
only real problem, though, is this one single min-height thing
I gave you the answer. But if you want another which doesn't involve css hacks do this in your html
Then you can have two css files that you put in all your lovely simple css for IE6 (style_pants.css) and all your normal css in style.css.
Technically I'd say that counts as a CSS hack though. But it's the right way to do it.
not really as it doesn't make use of an obscure quirk of a system, it's merely a comment that IE supports as a pragma. some might argue they put in the option because they knew their browser is, and always will be, shite 
Just to note, that is a very bad idea. You can't trust user agents. You have to use HTML/CSS hacks that only IE6 understand.
Why is that a bad idea? The script would be server-side, and any user agent that identifies itself as IE deserves to be treated as such.
Which is why you put a huge blaring red notice that says "You are using IE, you're an idiot, download Firefox instead" at the top of every page if you detect that the user is using IE.
Somehow, I like this solution best...
Why is that a bad idea? The script would be server-side, and any user agent that identifies itself as IE deserves to be treated as such.
Up to you if you want your website to work or not.