IE vertical scrollbar and overflow:auto

IE vertical scrollbar and overflow:auto

I've recently updated all my code samples to display in an easier-to-read format for my readers and came across a couple of bugs/issues. One of them is the overflow:auto vertical scrollbar bug. See the below picture for an example of how the code on my site appears in IE7 with the pre element set to overflow:auto, not very pretty, as we obviously expect the element to expand vertically within the parent container.

Fortunately, it's an easy fix with a small quirks mode snippet as follows;

<!--[if IE]>
<style type="text/css">pre,code {padding-bottom:16px;overflow:visible;overflow-x:auto;overflow-y:hidden}</style>

Place that code in the head, just make sure that it is placed after all the other styles.



You might like


Hi Matt,

I'm having some issues getting the code above to work with the vertical scroll IE issue! I'm still getting an annoying vertical scroll in IE when I resize the browser window. It's only when I resize the browser window that I get the vertical scroll on the content container!

Here's the link:

You'll see the vertical scroll in IE when you resize the browser window! Any ideas? I've tried all sorts of things with the overflow property! I've also changed the min-height of that content container thinking that would get rid of the vertical scroll...still no luck!

Thanks for your assistance,

Hi Rob, sorry for the late response, on vacation here. I checked it out with IE 8 and I don't see any vertical scroll when opening or resizing the window. Did you sort it out already? Which version of IE were you checking with?

Hi Matt,

No worries! It's weird...I kept thinking I saw the vertical scroll on the content div, but now apparently it's only an IE 7 issue! I'm hosting my clients site on my server for the time being (I know that looks strange)because we're waiting for the domain transfer process to occur and that takes a few days.

I have IE Tester and I do all usability testing with IE Tester, so it must have been an issue in IE 7. I'll have to do some more research into an "IE 7 Vertical Scroll."

I'm beginning to loathe IE! HAHA! And also anyone on smaller screens (640x400, 800x600, etc..) will get this vertical scroll on the content div which I have defined as a class ".mid"

Either way, I'm sure I'll get this fixed!

On a sidenote: What do you think about HTML 5? Have you started the HTML 5 craze yet? It's interesting to see how many people are so passionate about using it even though it's still not completely finished!
I'm still in the "learning" mode so I'm not using HTML 5 yet, but I'm hoping to start deploying sites with HTML 5 as "examples/test" sites here after the new least to get the hang of it.

Happy Holidays,

IE6 was the worst, I just stopped developing for it a couple years ago, people used that crappy browser way too long.

Funny you mention HTML5, I just grabbed an HTML5 book off Amazon, but have yet to crack it. I did play around with it some a while back though.

Seems like it could be quite useful developing for mobile devices.

Comments are closed. No new comments allowed.

Copyleft 2002 - 2017 Matt Jones
Hand crafted with HTML5 & CSS3
↑ Back to top