(Please note that there are no scrollbars on these divs, so scrolling to the left is not possible within the body or the divs themselves.)
The issue (shown above in FF and Opera) occurs on both the "Baroque" and "Spotlights" theme selections (refer to the links below). When you shrink the browser window to a small size (e.g. under ~900 width), the horizontal scrollbar fails to scroll to the left. While it scrolls to the right without any problem, it completely disregards if the navigation menu is pushed off the left side of the screen, making it inaccessible.
What could be causing this behavior?
Below is the relevant HTML:
<div class="center1">
<div class="center2">
<div style="position:relative; top:180px; width:1226px;" id="containerBGimgLParent">
<div id="containerBGimgL"></div><img src="images/skin3/dark_interface_parts5b.png">
</div>
</div>
</div>
<div class="center1">
<div class="center2">
<div id="containerBG">
<div id="NavMenu">
<ul class="kwicks">
<li id="kwick1"></li>
<li id="kwick2"></li>
<li id="kwick3"></li>
<li id="kwick4"></li>
<li id="kwick5"></li>
<li id="kwick6"></li>
<li id="kwick7"></li>
</ul>
</div>
</div>
</div>
</div>
<div id="contentdiv"></div>
... as well as the CSS:
body {
background-image: url("../images/skin3/DIBG.png");
background-repeat: repeat;
font-family: "Times New Roman";
}
#NavMenu {
float:left;
width:170px;
background-color: #000;
padding:5px;
}
.center1 {
position:absolute;
right:50%;
}
.center2 {
position:relative;
left:50%;
}
#containerBGimgL {
background-image:url('../images/skin3/dark_interface_parts5a.png');
background-repeat: no-repeat;
width:1040px;
height:672px;
display:inline-block;
}
#containerBG {
width: 980px;
position:relative;
top:274px;
}
#contentdiv
{
position:absolute;
top:320px;
left:700px;
width:600px;
height:526px;
text-align:left;
padding: 0px 20px 0px 0px;
background-color: #000;
overflow-y: scroll;
color:#fff;
}
The javascript resize function alters the dimensions of some divs, but doesn't cause this particular issue. It does not change any div's overflow property to hidden, for instance.
To see the problem firsthand, visit the following link: . (Please ensure that JavaScript is enabled as the functionality may not work without it.)