Better IE scroll bar bugfix


Today I want to write about a better fix for the „ie scroll bar bug“.

First a short description of the problem …  a picture says more than 1000 words:

ie_scrollbar_bug

The horizontal scroll bar become visible as a result of the shown vertical scroll bar.

But I’m expecting this:

ie_scrollbar_bug_expected

I found some articles about solutions to void the unnecessary x scroll bar in internet explorer:

The IE quirks mode workaround is not my prefered solution, I want use the xhtml 11 doctype

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.1//EN“
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd“&gt;

To hide the horizontal scoll bar is usefull if you doesn’t have content that can overflow the views width, i.e. if the view-content have a“width of 100%. But if you have view-content with a dynamic width (!= 100%) then you need horizontal scroll bars.

Here is my solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <style type="text/css">
    div.view {
      overflow: auto;
      width: 100%;
      background-color: #000044;
      color: white;
      height: 100px;
    }
    div.content {
      background-color: white;
      color: red;
    }
    * html div.verticalScrollerContainerFix {
      float: left;
    }
    * html div.verticalScrollerContainer {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="view">
    <div class="verticalScrollerContainerFix">
      <div class="verticalScrollerContainer">
        <div class="content" style="width: 400px; height: 2000px;">
          width: 400px; height: 2000px;
        </div>
        Foobar
      </div>
    </div>
  </div>
</body>
</html>

My solution based on conditional css styles  verticalScrollerContainerFix and  verticalScrollerContainer. The structure is always the same:

    <div class="verticalScrollerContainerFix">
      <!-- this div will float to left - place for the vertical scroll bar (if necessary) -->
      <div class="verticalScrollerContainer">
        <!-- a container for the content -->
        YOUR CONTENT HERE
      </div>
    </div>

Try it😉