Reputation: 10146
So in IE8 and above along with other browsers such as Firefox to have something like a div grow when there is data in the div automatically I do something like this:
.example {
min-height:1px;
overflow:hidden;
}
But in IE7 the content inside the div does not fill out. Below is an example:
So what I thought would fix the IE7 issue would be this:
.example {
min-height:1px;
overflow:hidden;
}
* html .example {
height:1px;
overflow:visible;
}
But in IE7 it will only show the 1 pixel height, it still looks like what you see in the example above for min-height in IE7. So how can I get, cross browsers, to have the content inside something like a div auto fill out with the content inside the div like for min-height in IE8 above?
Upvotes: 0
Views: 799
Reputation: 92803
You define Things wrongly. IE7 didn't support min-height but there a hack for IE. check these links
http://css-tricks.com/snippets/css/cross-browser-min-height/ ,
http://www.dustindiaz.com/min-height-fast-hack/
Upvotes: 0
Reputation: 175
Doesn't seem like you are trying to do anything too crazy..
Is the 1px min-height so that it's hidden if there is no content? Or is that some trick?
Are the elements in that div floated? maybe you need to clear the floats at the end of that list..
Doesn't seem that you'd need to be setting overflow to me..
The collapsing div's usually is due to not properly clearing before you close the container.
<div class="example">
<stuff style="float:left;">blah</stuff>
<div style="clear:both;"><!-- --></div>
</div>
Upvotes: 0
Reputation: 94101
min-height
is buggy in IE7. Quick fix:
.example {
min-height: 1px;
height: auto !important;
height: 1px;
}
Anyway, I don't know why you need min-height
... The problem is that overflow: hidden
won't work in IE7 unless the parent container has position: relative
.
Upvotes: 1