Unusual Gap in HTML horizontal scrollbar

StackOverflow https://stackoverflow.com/questions/15027297

Question

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.

Was it helpful?

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top