IE vertical scrollbar and overflow:auto

Feb 2nd, 2009 at 6:37 am
filed under: Web Development / CSS

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>
<![endif]-->

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

bookmark / share this:

rated 4/5 (2 votes)

IE, bugs, design, CSS

Comments

No comments posted yet, why not be the first?

Subscribe to comments feed