Home/ Questions/Q 4271748
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T07:29:03+00:00

I have an IE8 buggy horizontal scrollbar problem, similar to this: DIV with overflow:auto

  • 0

I have an IE8 buggy horizontal scrollbar problem,
similar to this:

DIV with overflow:auto and a 100% wide table

(unfortunately the solution suggested there (with zoom=1) does not work here,
or I don’t know how to apply)

the horizontal scrollbar should not appear
(it does not appear in FF or Chrome
but it appears in IE8)

the sample code, with CSS tables:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="display: table;">
    <div style="display: table-cell;">
        <div style="overflow-y: scroll; height: 19em;">
            <div style="width: 30em; height: 30em; background-color: red;"></div>
        </div>
    </div>
</div>
</body>
</html>

the same problem, with absolute positioning:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="position: absolute;">
<div style="overflow-y: scroll; height: 19em;">
<div style="width: 30em; height: 30em; background-color: red;"></div>
</div>
</div>
</body>
</html>

the “overflow-x: hidden” solution is not good, because it may hide some content;
padding-right may work, but that’s too dirty hack (how many pixels? what happens in other browsers? what if the user magnifies the page?)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Setting the display:inline-block; for the div that contains the red box

     <div style="display: table;">
<div style="display: table-cell;">
    <div style="overflow-y: scroll; height: 19em; display:inline-block;">
        <div style="width: 30em; height: 30em; background-color: red;"></div>
    </div>
</div>

    • 0