Internet Explorer Horizontal Scrollbar Covers Last Line

Oh My Friggin Goodness. Internet Explorer makes me so mad.

Just to see how things looked in IE, I randomly checked a blog post that contained code, and one of the lines of code was obscured by a horizontal scrollbar! I compared the post in Firefox. It turned out the particular line of code was so long that it surpassed the width of its container. In IE, the code block got clipped to fit the container, and a horizontal scrollbar was added to view the long line of code. However, the scrollbar hid the single line of code. It made my post look silly because I would say here is code but then there’s no visible code.

I searched for a solution but couldn’t find one. So I used CSS (to the rescue). In the theme’s style.css file, I modified the pre style block by adding these lines:

padding-bottom:20px;

padding-top: 10px;

The main one to add is padding-bottom. I added padding-top so that things looked more balanced.

I was about to title this as a fix but then realized it’s not a fix. It’s an unsatisfactory workaround. :P

This must have been going on for a while. I just hope that readers who found my posts with code were using Firefox, which tends to be popular among web developers. Otherwise, sorry for any confusion you might have experienced.

One thought on “Internet Explorer Horizontal Scrollbar Covers Last Line”

  1. This is a real pain, let me tell you. The problem is IE includes the width of the scrollbar in the DIV (or height in your case.) One possible workaround is to use width (or height) of 90% for an inner DIV. Anybody have more details on the fix?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>