views:

14762

answers:

9

I hope someone might be able to help me here. I've tried to simplify my example as best I can.

I have an absolutely positioned DIV, which for this example I've made fill the browser window. This div has the overflow:auto attribute to provide scroll bars when the content is too big for the DIV to display.

Within the DIV I have a table to present some data, and it's width is 100%.

When the content becomes too large vertically, I expect the vertical scroll bar to appear and the table to shrink horizontally slightly to accommodate the scroll bar. However in IE7 what happens is the horizontal scroll bar also appears, despite there still being enough space horizontally for all the content in the div.

This is IE specific - firefox works perfectly.

Full source below. Any help greatly appreciated.

Tony

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head runat="server">
    <title>Table sizing bug?</title>
    <style>
        #maxsize
        {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 5px;
            bottom: 5px;
            border: 5px solid silver;
            overflow: auto;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="maxsize">
        <p>This will be fine until such time as the vertical size forces a
           vertical scroll bar. At this point I'd expect the table to re-size
           to now take into account of the new vertical scroll bar. Instead,
           IE7 keeps the table the full size and introduces a horizontal
           scroll bar.
        </p>
        <table width="100%" cellspacing="0" cellpadding="0" border="1">
        <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
                <td>E</td>
                <td>F</td>
                <td>G</td>
                <td>H</td>
                <td>I</td>
                <td>J</td>
                <td>K</td>
                <td>L</td>
                <td>M</td>
                <td>N</td>
                <td>O</td>
                <td>P</td>
                <td>Q</td>
                <td>R</td>
            </tr>
        </tbody>
        </table>

        <p>Resize the browser window vertically so this content doesn't
           fit any more</p>
        <p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
        <p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
    </div>
    </form>
</body>
</html>

added 03/16/10... thought it might be interesting to point out that GWT's source code points to this question in a comment... http://www.google.com/codesearch/p?hl=en#MTQ26449crI/com/google/gwt/user/client/ui/ScrollPanel.java&amp;q=%22hack%20to%20account%20for%20the%22%20scrollpanel&amp;sa=N&amp;cd=1&amp;ct=rc&amp;l=48

A: 

Hello,

This looks like it should fix your problem, as long as you are not apposed to condition statements. Fixing IE overflow

Patcouch22
+4  A: 

Change:

overflow: auto;

to:

overflow-y:hidden;
overflow-x:auto;
Eran Galperin
A: 

Thanks for the responses - I only want the horizontal scrollbar to be hidden however if the content can fit on the page width - which in this instance above it can, so there's no need for the horizontal scroll.

If however the content is too wide for the div, then I'd still like the horizontal bar to appear.

Essentially I want the same behaviour as firefox...

Thanks

A: 

ugh, I have this exact problem. It is as though IE's viewport includes the scrollbar as opposed to resizing its viewport whenever scrollbars show.

Like Tony's post, I need the viewport (which is a Div) to be able to scroll overflowing content under typical circumstances, however when setting a table to 100% it should not overflow horizontally (and cause horizontal scrollbars to appear) when a vertical scrollbar appears.

Daryl, this is not an answer, but a comment. Try to use comments for things like this, or contribute an answer.
The Wicked Flea
A: 

Unfortunately, this is a quirk of IE. There's no way using pure XHTML and CSS to get it to work the same as Firefox.

You could do it using JavaScript to detect the size of the window and set the width of the table dynamically. I can add more detail on that if you really wanted to go that route.

Jeromy Irvine
+2  A: 

Okay, this one plagued me for a LONG time. I have made far too many designs that have extra padding on the right, allowing for IEs complete disregard for their own scrollbar.

The answer is: nest two divs, give them both hasLayout, set the inner one to overflow.

<!-- zoom: 1 is a proprietary IE property.  It doesn't really do anything here, except give hasLayout -->

<div style="zoom: 1;">
   <div style="zoom: 1; overflow: auto">
      <table style="width: 100%"...
      ...
      </table>
   </div>
</div>

http://www.satzansatz.de/cssd/onhavinglayout.html
Go there to read more about having layout

+10  A: 

I had a problem with excessive horizonal bar in IE7. I've used D Carter's solution slighty changed

<div style="zoom: 1; overflow: auto;">
   <div id="myDiv" style="zoom: 1;">
      <table style="width: 100%"...
      ...
      </table>
   </div>
</div>

To work in IE browser lesser than 7 you need add:

<!--[if lt IE 7]><style> #myDiv { overflow: auto; } </style><![endif]-->
cetnar
This works for me. I have a max-height on the outer div.
Ed Thomas
Epaga
@Epaga. Thanks. Good to know :)
cetnar
+2  A: 

Eran Galperin's solution fails to account for the fact that simply turning off horizontal scrolling will still allow the table to underlap the vertical scrollbar. I assume this is because IE is calculating the meaning of "100%" before deciding that it needs a vertical scrollbar, then failing to re-adjust for the remaining horizontal space available.

cetnar's solution above nails it, though:

<div style="zoom: 1; overflow: auto;">
   <div id="myDiv" style="zoom: 1;">
      <table style="width: 100%">
      ...
      </table>
   </div>
</div>

This works properly on IE6 and 7 in my tests. From what I can tell, the "" hack doesn't appear to actually be necessary on IE6.

Joel Webber
+2  A: 

This is reported fixed in GWT trunk.

Robert Munteanu