Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Cross Browser CSS Min-Height

By  on  

As you know, Internet Explorer 6 does not follow CSS' "min-height" property. Luckily, we can fix this problem using the following CSS code snippet:

#container  { min-height:500px; } * html #container { height:500px; }

Internet Explorer 6 is the only browser that recongizes the "* html _____" selector and thus is the only browser to read the hard-set height. Since IE6 also stretches down despite the hard-set height property, you can view IE6's idea of "height" as a min-height. The only drawback to using this code is that it's not valid CSS. Functionality first though, right?

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

Discussion

  1. simon

    What’s invalid about it? It relies on an invalid interpretation of the W3C DOM to work, but it looks like perfectly valid CSS to me.

  2. davidwalsh83

    Thank you for the language correction Simon — you are correct.

  3. david

    or you could do thus:

    height:auto !important;
height:200px;
min-height:200px;

    this would put a min-height of 200px on all browsers. all browsers except ie6 will respect the !important flag and ignore the second height property, while ie6 will still use the second height property, then expand as needed.

  • Bishram kumar

    It’s not working in IE7 and IE8

  • kamal

    Why don’t you just stop adding workarounds for IE? Rather just show a ugly red strip at the top of the page “in IE only” using its own superb conditional comments that says “please use a browser” or if it sounds rude, -> “The browser you are using is 8 years old and is unsafe! Why don’t you take a minute to upgrade to a better safer and faster browser?”

    Things like that will make them (the ignorant corporates, the technically challenged, et al) to take note. Till the day you keep giving them workarounds, they’ll keep asking for more; they’ll keep telling you “But all other sites work on my IE! Why not yours? “. “Oh well, its about time you need to know sir, that those sites work, more often than not, because some poor web designer thought it more polite to keep you in the dark about what crap you’re using!”

  • David Beck

    Because your client who Is paying you to make the website may be one of those tech idiots that uses ie 6.

  • kamal

    Indeed. And an attempt to educate them about their ignorance isn’t always a bad idea. Everyone can give it a try to make their own world a better place to work in! :)

  • chandrakant

    Kamal is right………we designer should educate these OLD school people. This will help reduce ie 6 worldwide percentage and our life gets easier………

  • Arnar

    I agree with Kamal.

    In the future all of my designs will display a red div layer at the top telling people to update their browser to IE 7 or 8 and recomend using Firefox.

    The rest of the website will then be displayed below and if it does not work I’m not goin to care.

  • webcodeslinger

    You guys don’t actually do work for real clients, do you?

    To say “Screw them, I’m making MY life easier by putting an ugly red message up there, and if they don’t upgrade, tough poo”, is a very irresponsible thing to do, as a web developer. There are plenty of valid reasons why a client cannot upgrade from IE6. I hate it just as much as the next person, but it’s a fact of life if you work for a company.

    I tell you what – making things work in IE6 is not hard. I don’t even think about it when I code – I just adhere to the standards and use my extensive HTML/CSS knowledge and my implementations work nearly perfectly in IE6.

    So… why don’t you just learn something and figure it out instead of being a lazy ass? Here’s a start – Google “progressive enhancement”.

    • Haddicus

      Totally agree bro… plus there are some devices that only support ie6. I currently am writing a mobile app for my company that requires me to use ie6… so having things out there like this, is helpful. Closed minded people like kamal really irritate me because they live in their own secluded little world where it doesn’t make sense to adapt to an environment, but make the environment adapt to them, and their laziness.

    • ywal

      Don’t think he’s lazy. He just has a different opinion. I think it’s a good idea to drag the users kicking and screaming if necessary to the latest if it’s really the greatest. I also acknowledge that developers must give the people what they want. However, I don’t believe in mindless servitude just because the other guy is too stupid or stubborn to step out of the past. Each person should set their own limits. We should respect those limits and not make derogatory statements just because they might be beyond our own. Our jobs are hard enough so we don’t need to turn on each other. And btw — none of us has all the answers, so a little humility is a good thing.

  • Chandan Khandelwal

    we can also use ,

    height: 319px;
    overflow: visible;

    height is supported by IE6 so we use height and for extra part we can use overflow: visible;

  • Jorik Bosman

    @ Chandan Khandelwal

    Thanks a lot! This did it for me! After searching for a solution to fix the height-problem in ie.. I can move on.. =D

  • Zach Zurn

    Thanks for the tip!! I have run into this problem with some annoying clients where they are still using IE 6 and sometimes 5.

  • Razer Maharjan

    Hello Kamal,chandrakant and Arnar
    As David had already said even though IE 6 giving web developer problem about browser compatible we shouldn’t forget about the clients and the website users . who was still using old IE 6 browser so we should keep in mind while working the project So if there is solution then why donot we use IE Hack .
    Thanks David Walsh for your min-height article.

  • zalubom

    i tried all the versions in the comments, but they not worked (perfectly) for me.
    the only hack that worked perfectly is this:

    #container { min-height:500px; } * html #container { height:500px;overflow:visible;}
    • Kevin Monk

      Money talks!

      Given that it takes about 25% longer to do a project with IE6 then just put a surcharge for IE6 compatibility. Suddenly clients seem to care a lot less about IE6 compatibility.

  • Arnar

    Sure, I can be bothered to do the extra work to make websites work on old browsers.

    But what I tell my client’s is simply that they are using a browser that is old and very vulnerable to viruses.

    What I then tell them is that I recommend that they upgrade but if they persist I tell them that I can make it work but I charge for it, and I charge big for it.

    As long as we keep the problem alive we will have to work around it. We can however work on killing the problem. The Icelandic Union for web-designers recently held a funeral for IE 6 and it was decided that all local companies would take the same actions.

    And besides only 3% of the average icelandic user uses IE 6 or below. 2 years ago that number was around 20%. I belive that if we would still keep this zombie on life support that number would be around 10-15%.

  • Cordyceps

    Very nice workaround mate. Very elegant. I think complience is a very important factor you can educate users but only to some degree some would not even know how to upgrade IE, and when usuability matters you have to find a soulution. Thanks you have saved me a few hours.

  • Eoin


    Hold on a second. Just to jump into the debate with Kamal. There are a great many corporations with a heck of a lot of employees. Now all of those employees will have a PC and quite a few of them will use a variety of software and such. Inclusive of websites etc. that they have valid memberships and subscriptions for.

    It may be that the IT team is too small to support a browser upgrade, it may be that the IT team is too busy to support a browser upgrade, or it may be that they simply cannot predict what sorts of things will go wrong if they do a browser upgrade, finally, it may be that they are using a website which they have become dependent on and it does not support newer browser, and the vendor is unwilling to upgrade.

    It's hardly right to try and force the company you are working for to make your life easier, agreed it would be easier, and education isn't something I have a problem with, if they can update by all means encourage them to change, but you cannot force them.

    It is not zombie support it is meeting the demand in your market. If everyone were so educated nobody would be building websites because everyone would know what you guys know. As we support the market, eventually the market will be forced to upgrade, as there will be other companies who do upgrade and take advantage of fantastic new sites that arrive, and leave the other companies in their wake. It is the markets demand we bow to, and it is the market that shall eventually make us happy.

    Finally, all the browsers are still operating in slightly different fashions and offering slightly different options. Surely they could all get together and instead of moz this and webkit that they could use one standard variable?

  • Rodrigo

    We must remember that we make websites to users, not only to companies.
    So, that’s not so simple to only ask to companies’ owners to upgrade their browsers, just to show them the website we did works perfectly, while their clients can’t see it perfectly.

    We must reccomend the upgrade, but continue working hard on solutions to make the website appear perfect to users.

    []’s
    Rodrigo

  • Eoin

    We make websites for users, for whom we cannot and have no right to tell to upgrade their browsers. Nor should they have to, but most of all, we have no control over whether they do. The point I was making is that I have seen organisations with 100,000 employees that do not use modern browsers. That means that 100,000 employees cannot necessarily see a IE6 non-compliant site during working hours. That means you’re missing out on traffic.

  • Carolina

    Thank you for the post. I tried it and in comparison – from firefox to chrome there is a little difference. Used a in one with text and another one with pictures – so by the 2nd the difference became visible. So in my opinion, min-height is not yet perfected, I would suggest until they come up with a more stable version of it, to use height – of course it is not as flexible – but in examples like mine it works well.

    • Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!