John
John

Reputation: 10146

CSS Overflow issue with IE7

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:

enter image description here

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

Answers (3)

sandeep
sandeep

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

J_B
J_B

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

elclanrs
elclanrs

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

Related Questions