Unusual Gap in HTML horizontal scrollbar

OK, i have a DIV with to scroll bars that are both required, and this is the simple layout I started with:

<html>
<head>
<title>Testing</title>
</head>

<style>
.Test {
    overflow-x: scroll !important;
    overflow-y: scroll !important;
    height: 300px;
    width: 100%;
}
</style>

<body>
    <div class="Test"></div>
</body>
</html>

When this is displayed in IE9, I get a gap on the right hand size of the horizontal scrollbar. I have attached an image to show the problem.

An example of what is shown Any help as to what is causing this problem would be greatly appreciated.

Solution

You could try styling the scroll bar within your div

scrollbar-track-color: #cacaca;

This made my scroll bar a uniform color.

Here's where I found it along with some other styling tricks