I have a div which serves as a popup (absolute position etc.). Now that I'm testing on different platform I see that in almost every browser on Windows I get scrollbars, even though there is nothing to scroll... not on Mac though. I enclosed an image, it's just one of many cases. I don't want those scrollbars, what can I do? I tried overflow: hidden; and googled a lot but couldn't seem to find a solution! Any help much appreciated!
I ran into this too; a continued Google found this:
https://css-tricks.com/almanac/properties/o/overflow/
The trick for me was setting the div overflow to hidden. I didn't realize it was still set to "scroll" in my CSS which apparently renders scrollbars even if unnecessary on a PC browser (tried with Chrome and IE) but not on any of the Mac OS browsers I used (Safari, Firefox, Chrome, and Opera)
Here are the div options: div { overflow: visible | hidden | scroll | auto | inherit }
Without seeing your actual code it's hard to be sure, but more than likely you have the property overflow: visible prescribed somewhere in your CSS which would force the navigation to display.
If so, you'll want to change overflow: visible to overflow: auto, which will only display a scroll bar if the page/element needs to scroll.
Similar to what ekfuhrmann said, if you change the overflow value to overflow: auto then it will only display the scrollbar when it is necessary.
You can also be very specific with your scrollbar by doing overflow-x: auto, overflow-y: hidden.
If your intention is to create a popup, you could instead use position: fixed, but that is irrelevant to what you are asking.
I would suggest using Chrome Developer Tools to figure out what exactly the scrollbar is attached to. That should help you figure out where the problem lies.
