Overflow: Auto problem / bug in IE

Post by 
John Crenshaw
Published 
October 16, 2014

Another quick bug fix for you. Another little quirk about Internet Explorer is the way in renders the overflow property. I've found two problems with this. First is that without a specified width, IE treats the overflow property, no matter how it's set, as overflow: visible; Second, even after we've solved that problem, IE tends to cut off the bottom portion of the element if there is a scroll bar, as if it wasn't taking the height of the scroll bar into account in its rendering, so let's dive into these real quick.

First of all, if a width is not specified for the given element, IE will treat it like overflow: visible; causing the element to continue outside of where you want it, like this:

Internet Explorer Overflow Bug
IE Overflow Bug

In order to fix this you need to create a stylesheet just for IE (That's explained in the last half of this article if you don't know how to do that). Once you've done that, add the following styles to the IE-only stylesheet, where ".element" is the class of the element you're working with:[

1
.element { overflow-y: auto; overflow-x: visible; width: 450px; }

IE understands overflow-y and overflow-x, and the width is whatever width you want the element to be and it must be set to prevent this problem. In my case, I wanted the element to be as wide as the containing element, which was 450px.

Once you do this, you'll notice this problem:

Internet Explorer Overflow Bug Scrollbar Issue

Ok, IE, you've really outdone yourself on stupidity this time. It looks like IE is not taking the scroll bar into account in the height of the element. So, now we need to fix that by adding padding-bottom: 20px; to the IE-only stylesheet, and here's what we get:

1
.element { overflow-y: auto; overflow-x: visible; width: 450px; padding-bottom: 20px; }
Internet Explorer Overflow Bug Fixed

Voila! Problem solved. Keep in mind, this isn't a perfect solution...the problem with this is that IE will add that 20px padding at the bottom of the element even if there isn't a scroll bar, leaving you with some extra space on the bottom of your element in this case. One day soon, hopefully all browsers will render pages in the same way; until then, solutions like these will have to work.

Never miss
an update

We never share your info. View our Privacy Policy
Almost there. Follow these 2 steps to complete your subscription:

1. Click the link in the confirmation email we just sent you

2. Add john@uforocks.com to your address book

Thanks!
Oops! Something went wrong while submitting the form.
THere's More

Post you might also like

All Posts
Analytics
Oct
17
//
2020

Causes & Solutions to Website Traffic Drops After a Redesign

New websites are supposed to outperform the old one, but that doesn't always happen.
Strategy
Oct
15
//
2020

This Famous Ad Exec Talks About a Big Brand Who's Existence Just Doesn't Make Sense

The irrational product that kicked off a $4 billion brand
Strategy
Oct
12
//
2020

How to Gain Market Share

Find out what it takes to grow.
Strategy
Jul
15
//
2020

Marketing Idea 0001: Target the Larger Audience

Sometimes customers that want to rent your product are actually better candidates to buy it.
Paid Media
Jun
12
//
2020

PPC vs CPC: What's the Difference

They aren't the same thing, but they're pretty closely related