How to Make CSS Max Width in IE6 and 7

How to make css max width in IE6 and 7?

1. The max-height property is supported in IE7: http://www.w3schools.com/cssref/pr_dim_max-height.asp , and you can use IE7 test it by this link.

2. IE6 and earlier versions do not support the max-height property. But you can use CSS to hack it:

   img {  
     max-height: 800px;  
     _height:expression(this.scrollHeight > 800 ? "800px" : "auto"); /* sets max-height for IE6 */  
     max-width: 600px;  
     _width:expression(this.scrollWidth > 600 ? "600px" : "auto"); /* sets max-width for IE6 */  
   }  
   

2.1 Solve it by jQuery:

if($.browser.msie&&($.browser.version == "6.0")&&!$.support.style){  
    $("img").each(function(){  
        if($(this)[0].scrollHeight>800)  
        $(this).css({"height":"800px","overflow":"hidden"});  
    });
}

2012.11.27 update:

img{
    min-height:800px;height:auto !important;height:800px;
    min-width:600px;width:auto !important;width:600px;
}

CSS max-width: 100% for IE 6 with expression?

Without having tested it, I guess you need to compare the elements (client) width to its parent's. Something like:

width: expression(this.clientWidth > this.parentNode.clientWidth ? this.parentNode.clientWidth + "px" : this.clientWidth + "px");

Set max-width in Internet Explorer

IE9, at least, does support max-width percentages for images, but the percentage is relative to the image's size, not the container's size. (You can see this by changing 100% to, say, 70%.) It will work somewhat as expected, however, if you specify inherit instead of 100%. Doing so will inherit the container's size for max-width in IE9. (I've only tested your example page in IE9, Firefox, and Google Chrome, and it's not true that for that page, the images will keep scaling down as the window width gets smaller.) This is not a perfect solution however; in IE8 browser mode, applying inherit this way will make the table cell's width equal to the image's unscaled width, even though the image is correctly scaled down.

Max-width and max-height for images in Internet Explorer 7

Its fixed, you can check it here:

<style type="text/css">
#content {
    margin:0 auto;
    min-width:320px;
    max-width:800px;
    width:80%;
    background-color:green;
}
#featured {
    position:relative;
    width:100%;
}
#featured-images {
    text-align:center;
}
#featured-images img {
    max-height:100%;
    max-width:100%;
    height:auto;
    width:auto;
}
</style>

<div id="content">
    <div id="featured">
        <div id="featured-images">
            <img src="https://www.google.co.in/images/srpr/logo4w.png" />
        </div>
    </div>
</div>

Or here Fiddle http://jsfiddle.net/Fqebe/1/

Cheers!

CSS static width side columns, min-max width center content column

Here is another example, compatible with IE6+: http://jsfiddle.net/DhaHP/12/
Result: http://jsfiddle.net/DhaHP/12/embedded/result

Abstract of the changes:

• Changed #left and #right to be above the #center (#right before #left);
• min-width and max-width on #container to 800px and 1200px respectively;
• No float on #center;
• margin-left and margin-right on #center equals the width of each side column;
• float-left on #left and float-right on #right;

The only obs on this for IE6 is the min-width and max-width that doesn't work without a little hack or the use of IE7.js. On IE7, it works as should be.

---

Related Topics