Scroll Bar Appears On Ie Whereas It Should Not

I have a left menu with this CSS class : .menu { overflow-y: auto; width: 210px; height: 100%; position: absolute; left: 0; top: 0; bottom: 0; backg

Solution 1:

No you didn't. Internet Explorer just processes the css differently than Firefox or Chrome and the result is that it shows the scrollbar always.

The solution would be to create a IE css tag that prevents that from happening!

<!--[if IE]>
// IE related css. 
<!--[endif]>

Right now idk how to fix it myself but you might find an anwser. Keep in mind, if you use the tag overflow:auto in IE that means it will always be visible in IE. Maybe you can create a script that regulates the scrollbar, whenever you are resizing that the script add's the overflow tag and removes it when the window reached a certain size. It's not a "beautiful" solution, but it might work ;)

Solution 2:

Does the scroll bar move a bit? In this case, it is maybe because when you specify height:100%, IE sets the content height and adds a little margin (what is the .menu element? a div? a nav? ) So in this case you may just add box-sizing:border-box to your class (be careful to cross-browser compatibiliy! http://www.w3schools.com/cssref/css3_pr_box-sizing.asp ... What is the version of I.E you use?).

If the scroll bars are "locked" (you can not scroll, they are just displayed), well, it is strange, normally the overflow:auto displays it just if it is necessary... But I.E does strange things sometimes.

An other point: prior to I.E 8, the overflow property isn't supported, and for I.E 8, you should use the -ms-overflow property. So in this special case, I don't know the default value (it should be visible, so without scroll bars, but for I.E I don't know...)

I hope I helped,