Why isn't min-width working for ie6?

Question

Hi there,

I am coding exclusive ie6 css, wherein I am facing the problem. The footer does not take the min-width value whereas it accepts the fixed width value. I am using the repeat-x for an image and assigning a min-width value to it. The same thing I did with header div and it works perfectly fine. For example here is my code.

Header HTML which I have used for the same purpose.

<div id="header">
<!-- top-menu -->
    <div id="top-menu">
        <div id="left-logo">
        <a href="#"><img src="img/logo-left.png" alt="BhatkalNews" /></a>
        </div>
        <div id="navigation">
        <ul>
        <li class="contact"><a href="#"><img src="img/contact.png" alt="contact" /></a></li>
        <li class="photo"><a href="#"><img src="img/photo.png" alt="photo"/></a></li>
        <li class="video"><a href="#"><img src="img/video.png" alt="video" /></a></li>
        </ul>
        </div>
        <div id="right-logo">
        <a href="#"><img src="img/logo-right.png" alt="BhatkalNews" /></a>
        </div>
    </div>
</div>

And here is the css I have used.

#header {
    min-width: 1040px;
    height: 111px;
    background: url('../img/header-bg.jpg') repeat-x;
}

and for the same purpose the footer code is.

<div id="footer">
</div>

and the css

#footer {
    min-width:1040px;
    background:#36240A url('../img/footer.jpg') repeat-x;
    height:291px;
}

Why isn't footer assigning the min-width?

Answer 1

Unfortunately min-width simply doesn't work in IE6. There's some javascript based hacks that you can try though if you absolutely need to use min-width.

Answer 2

IE6(not even 7) does not support min-width.

try expresssions like

width: expression( document.body.clientWidth < 1040 ? "1040px" : "auto" );

Answer 3

min-width and max-width are not supported by ie6.

Here is a workaround that I found with a quick google.

Though I haven't tested it, it seems to be sound.

Answer 4

Min-width doesn't work with IE6 - no surprises there as IE6 is terrible.

There are some workarounds, here is one:

{width:90%; min-width:1040px}

Basically, use width with a percentage - you'll have to experiment on the percentage depending on what you are trying to achieve.

Answer 5

This only works in IE:

#footer{
    width:expression
        (document.body.clientWidth < 1040? "1040px": "auto")
}

Answer 6

Try _width: 1040px; along with min-width: 1040px;

Answer 7

well to be frank none of the solution worked satisfactorily for me. and after doing a workaround i came up with this solution.

<div id="footer">
    <div id="footer-content">
    </div>
</div>

i defined the footer. and wrapped footer-content inside it and assigned width of 990px as i wanted the content to be wrapped within 940px i gave a padding of 50px; to the left. here is the css i used.

/*footer*/
#footer {
    height: 291px;
    background: url('../img/footer.jpg') repeat-x;
}
#footer-content {
    margin:0 auto!important;
    width: 990px;
    height:291px;
    padding-left:50px;
} 

this works perfectly fine for me and the div's positions perfectly fine even if i am resizing. thank you for all the help guys. :)

Answer 8

Since you're coding exclusively for IE6, it be much more simple just to use:

width: 1040px;

IE6 doesn't recognize min-width, but treats width incorrectly, as if it was min-width.

(If it's not exclusively for IE6, you can use a hack, like the _width they already suggested you... or, even better, use conditional comments).

Answer 9

I've explained how to use min-width or min-height in IE6 over here: http://stackoverflow.com/questions/3802455/min-width-in-window-resizing/3802670#3802670