Sorry for the terrible title, but I couldn't describe my issue succinctly enough.
I'm noticing a weird behaviour having to do with the scrollbars.
I have a fixed menu on the left side of my web page. The menu is scrollable if the number of options inside are several.
When you scroll the menu, the scroll bar appears and is superimposed over the content. I'm okay with that... IF that's the case every time!
It used to be that the style:
overflow-y: scroll
would force a vertical scroll bar to be visible all the time and taking up its own space as part of the containing div's width. So what I ended up doing is having a fixed-sized outer div and then an inner div that's just 15px wider to hide the scroll bar.
#outer {
width: 200px;
overflow: hidden;
}
#inner {
width: 215px;
overflow-y: scroll;
}
But this behaviour doesn't seem to be consistent. At work, with the above styles, everything shows up just fine. The buttons sit at the right edge and do no get cut off on the right. But when I get home, or just am working elsewhere, the scrollbar does that hover-over thing, and now the buttons are extending off the edge and partially hidden.
I thought it might have been a cross-browser issue at first, but it's not. Has anyone met with this problem? Thanks!
P.S. - Before anyone mentions some 3rd-party menu/sidebar code. That's a no go. I have tried some, but because of work-specific requirements, I figured it's easier for me to write this myself rather than fight any quirks that disagree with our needs.
