CODEWITHSUNDEEP
cssinternet-explorer-8
slobo
slobo

Reputation: 761

IE8 horizontal scrollbar problem

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?)

Upvotes: 2

Views: 15044

Answers (4)

me_an
me_an

Reputation: 509

add:

 style="max-height:none\9;"

Upvotes: 0

omabena
omabena

Reputation: 3581

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>

Upvotes: 2

user1037950
user1037950

Reputation: 1

What you need to do is change the overflow value from "scroll" to "auto". Scroll gives both horizontal and vertical bars whether you need them or not. Also IE for some reason requires the innermost box to be slightly smaller than its outer boxes for this to work correctly. Finally that means if you want to change your background do so in an outer Div rather than inside an inner one.

See the solution to your inquiry below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
<!-- 
#redBox  {
    position:relative;
}
#insideBox {
    overflow:auto;
    height: 19em;
    width:30em;
    background-color: red;
}

#innerMost {
    width: 28em;
    height: 30em;
}
</style>
</head>
 <body>
<div id="redBox">
    <div id="insideBox">
        <div id="innerMost">
        </div>
        </div>
</div>
</body>
</html>

Upvotes: 0

Dan
Dan

Reputation: 10351

With your first example, if you move the width:30em from the inner most DIV to it's parent the horizontal scrollbar no longer appears in IE8 and still functions properly in other browsers:

HTML:

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

Live Demo: http://jsfiddle.net/rev7J/

Upvotes: 1

Related Questions