Overflow css attribute browser interpretation differences

Question

Hi,

I was just skinning a website and found that overflow:visible renders two completely different things from Firefox to IE.

Firefox just displays everything outside of the container... like this:

 --------------------------------
 | div style="overflow:visible" |
 --------------------------------
  //overflow content from the div above

But IE expands the container to fit the overflow... like this:

 -----------------------------------------
 | div style="overflow:visible"          |
 | //overflow content from the div above |
 -----------------------------------------

Anyone know why IE displays it differently and how to get them both to render the same way Firefox is?

Thanks,
Matt

Answer 1

You haven't said so but I'm going to assume you've applied a fixed height here, as I can't think of any other way to get this effect.

The problem here isn't overflow, it's height. IE unfortunately treats height as minimum height, so it expands the textbox if you've let it (with overflow:visible for example).

Getting the IE effect in firefox is trivial - you can just apply min-height instead of height, but I don't believe there's a way to directly reproduce the Firefox effect in IE: it's just not that flexible. However, I can conceive of a way of cheating the effect if it's purely graphical by using a background image with repeat-x only to draw a line where you might want it. Failing that you're probably looking at inserting extra mark-up, never good.