Tuesday, May 11, 2004

I just ran into a small problem with our site layout where one of the boxes would mess up the whole layout if its content was too long (it's a tree control with the text set to not wrap). I figured the solution would be the CSS property, overflow. In compliant browsers, when this is applied to a DIV and set to auto, scrollbars will appear if the contents of the div would overflow the box. The problem is, IE doesn't properly handle the overflow property for divs. However, IE does have a non-standard extension, overflow-x and overflow-y. So the solution to my problem was to give the div the following style:

<div style="width: 100%; overflow: auto; overflow-x: auto; overflow-y: hidden;" >

The first overflow style is for compliant browsers. The overflow-x causes the scrollbar to appear if necessary. The overflow-y disallows vertical scrollbars.

No comments: