CODEWITHSUNDEEP
htmlcssinternet-explorer
Joe Engle
Joe Engle

Reputation: 197

Two Vertical ScrollBars in IE

Hi my code works correctly in Firefox, but in IE I'm getting the default vertical scrollbar. When I minimize the page I get the vertical and horizontal scrollbars I want, but in IE I get an additional vertical scrollbar. How can I get rid of it just in IE? I am using a CSS Reset. Here is my CSS:

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    /*font:inherit;*/
    font-size:100%;
    vertical-align:baseline;
    text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}
body{
    line-height:1;
}
ol,ul{
    /*list-style:none;*/
}
blockquote,q{
    quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
    content:’’;
    content:none;
}
/* remember to define visible focus styles! 
:focus{
    outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
    text-decoration:none;
}
del{
    text-decoration:line-through;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

/*CUSTOM*/

a {
    /*color:#365C8C;*/
}

a:hover {
    text-decoration:underline;
    /*color:#365C8C;*/
}

p {
    font:.85em arial,regular;
}

ul {
    font:.85em arial,regular;
}

.bar {
    background-color:#365C8C;
    height:30px;
    width:100%;
    position:relative;
    padding:0 0 0 0;
    margin:0 0 0 0;
    /*overflow-x:hidden;*/
    min-width:1225px;   
}

body {
    position:relative;
    padding:0 0 0 0;
    margin:0 0 0 0;
    overflow:auto;
    height:100%;
    width:100%;
    background-color:#ADCCEB;
    /*background-color:black;*/
    /*background: url(background.png);*
    /*background-size:100%;*/
}

.bold {
    font-weight:bold;
}

.contentcontainer {
    width:825px;
    height:910px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding-top:0px;
    /*background-color:red;*/
}

.extcontentcontainer {
    width:825px;
    height:645px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding-top:0px;
    /*background-color:red;*/
}

img.fullbackground {
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%;
    min-width:1225px;   
    height:100%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

img.extfullbackground {
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%; 
    min-width:1225px;
    height:100%; 
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

And here is some of the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pathfinder Outage Page</title>
    <link rel="stylesheet" href="boilerplate.css">
</head>

<body class="fullbackground">
    <img class="fullbackground" src="background.png" />
    <div class="topbackground">
            <div class="top">
                <div class="topleft">
                    <img class="pf_logo" src="pathfinder_logo.png"/>
                </div>
                <div class="topmiddle">
                    <h1 class="title">Pathfinder is Temporarily Unavailable</h1>
                </div>
                <div class="topright" ></div>
            </div>
        </div>
        <div class="bar"></div>
        <div style="width:1225px; height:910px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto;">
        <div class="contentcontainer">

Upvotes: 4

Views: 10416

Answers (5)

Ala Soua
Ala Soua

Reputation: 23

I think there is another way to fix this without getting rid of the overflow: auto style. My understanding of the issue and the workaround suggested is based on this nice article you could check for more details: https://remysharp.com/2008/01/21/fixing-ie-overflow-problem

The way I understood the problem is that in Chrome and Firefox, the scroll-bars are drawn outside the containers, so they don't affect the container width when shown. While in IE the scroll-bars are drawn inside the containers and their width/height is what's causing the container to overflow and display a second scroll-bar.

A typical use case where this would happen is on tables with vertical scroll (too many rows) and horizontal scroll (too many columns): the table body which already has a horizontal scroll because of the long list of columns, will add a second horizontal scroll because of the x-overflow that the vertical scroll width will add will add when drawn inside the table body (for the long list of rows).

One of the tricks I tried and that seemed to work is to add a padding to the container to allow it to draw the scroll bar without overflowing:

  • To fix a double horizontal scroll-bar:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .container-overflowing-vertically-class {
      padding-right: 20px;
    }
  }
  • To fix a double vertical scroll-bar:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .container-overflowing-horizontally-class {
      padding-bottom: 20px;
    }
  }

Upvotes: 0

ryan
ryan

Reputation: 11

Check to see if Compatibility Mode for Intranet Sites is on. I had this issue and when I disable Compatibility Mode the second scroll bar went away.

Upvotes: 0

Don
Don

Reputation: 4157

Use the "if IE" built in HTML to put in custom css files to fix the issue in IE like:

<!--[if IE]>
    <link rel="stylesheet" href="ie-specific.css">
<![endif]-->

Upvotes: 0

pandavenger
pandavenger

Reputation: 1027

It looks like both your body and your div are producing scrollbars because you set the height to 100%, the div inside the body is larger than the body, and the body itself is larger than your window, so you have two overflowing elements inside each other. Just get rid of height: 100% in your div nad you should be fine.

Upvotes: 0

Lance
Lance

Reputation: 181

Remove:

overflow: auto;

From the body in the CSS.

That should fix it.

Upvotes: 8

Related Questions