CSS Min-Width in IE6, 7, and 8

CSS min-width in IE6, 7, and 8

So it turns out that the necessary hack for getting min-width to work in all browsers isn't as ugly as many make it out to be.

All I had to do was add CSS for a div within the largeCell and add an empty div at the end of the cell. The div is only 1px tall, so it doesn't really make the cell look larger than it should be.

<style type="text/css">
    table.dataTable td {
        white-space: nowrap;
    }

    table.dataTable td.largeCell {
        white-space: normal;
        min-width: 300px;
    }

    table.dataTable td.largeCell div {
        margin: 0px 0px 0px 0px;
        height: 1px;
        width: 300px;
    }
</style>

<table class="dataTable">
  <tr>
    <td>ID</td>
    <td>Date</td>
    <td>Title</td>
    <td class="largeCell">A large amount of data like a description that could
        span several lines within this cell.
      <div></div>
    </td>
    <td>Link</td>
  </tr>
</table>

Internet explorer 7 overflow using min-width

I fixed IT

Thanks to : http://snook.ca/archives/html_and_css/position_relative_overflow_ie

i put position:relative to my #wrapper
(the element that has the overflow:hidden.)

thanks everyone who tried :)

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;
}

How to emulate min-width in IE8

http://jsfiddle.net/3htmA/

IE8. your code works perfect.

Issue with box-sizing border-box and min-width in IE 9

Hi came across your post when Googling for a similar issue with IE 8, although IE 8 supports box-sizing and min-height/width, from my tests, it seems IE 8 ignores border-box when using min-height/width on the same element

E.g.

#box {
   min-height: 20px;
   padding:4px;
   box-sizing:border-box;
}

IE 8 height = 28px, Chrome 20 height = 20px;

Solution using css browser selectors http://rafael.adm.br/css_browser_selector/

#box {
       min-height: 20px;
       padding:4px;
       box-sizing:border-box;
  }

 .ie8 #box, .ie9 #box {
       min-height: 12px;
       padding:4px;

 }

---

Related Topics