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>
<![endif]-->
Place that code in the head, just make sure that it is placed after all the other styles.
Comments
RSS Comments Feed
Rob Stathem
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:
http://robstathem.com/eric
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,
Rob
Matt
Rob Stathem
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 year...at least to get the hang of it.
Happy Holidays,
Rob
Matt
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.