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:
The horizontal scroll bar become visible as a result of the shown vertical scroll bar.
But I’m expecting this:
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“>
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 😉
Antworten
Du musst angemeldet sein, um einen Kommentar abzugeben.