Why isn't min-width working for ie6? - html

Question

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">
<img src="img/logo-left.png" alt="BhatkalNews" />
</div>
<div id="navigation">
<ul>
<li class="contact"><img src="img/contact.png" alt="contact" /></li>
<li class="photo"><img src="img/photo.png" alt="photo"/></li>
<li class="video"><img src="img/video.png" alt="video" /></li>
</ul>
</div>
<div id="right-logo">
<img src="img/logo-right.png" alt="BhatkalNews" />
</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

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 2

IE6(not even 7) does not support min-width.
try expresssions like
width: expression( document.body.clientWidth < 1040 ? "1040px" : "auto" );

Answer 3

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 4

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 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: Min width in window resizing