IE overflow auto scrollbar overlap

Internet Explorer has the annoying habit to render overflow: auto scrollbars on top of it's content. This would leave you with two scrollbars in the first place. You could fix this by using either overflow-x or overflow-y, but still a part of the text is covered by a scrollbar. This could be your last line in case of overflow-x! Here is a nice little CSS trick to fix this:

html>body pre {
  overflow: auto;
}
* html pre {
  overflow-x: auto;
  padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 19 : 4);
}

pre is the block that I want to be scrollable. For none IE browsers I use overflow: auto, for IE I use overflow-x: auto. The expression sets the bottom padding to 19 if a scrollbar has been rendered. If no scrollbar is found the default padding (4 in my style sheet) will be used.

Tags:

• CSS
• Overflow auto
• Internet Explorer
• Scrollbar
• Expression