Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

IE6, italics and horizontal scrollbars

And the prize for freakiest CSS bug in the universe goes to... IE6! I was having a problem with the new design and a horizontal scrollbar occuring in IE6 for no readily apparent reason (the same bug had plagued my previous design as well). Bill Simoni on CSS discuss pointed out that the scrollbar wasn’t appearing on the comment / entry pages. After an extensive trial and error session I tracked the problem down to the fact that my blockquotes were in italic. If I removed the font-style: italic property from the blockquote declaration, the horizontal scrollbar vanished. No other changes were needed.

Truly bizzare.

Posted 9th April 2003 at 8:19 pm

This is IE6, italics and horizontal scrollbars by Simon Willison, posted on 9th April 2003.

View blog reactions

Next: Views on Python

Previous: Half Hour Redesign

16 comments

  1. That. Is. Just. Absurd. But I believe every word of it.

    Dorothea Salo - 9th April 2003 20:24 - #

  2. Nah, the guillotine bug is still the freakiest. Text not appearing on your page? Scroll down, scroll back up. There it is!

    Jim - 9th April 2003 20:33 - #

  3. I thought this was already known.

    Basically what happens is, when a page is 100% wide, IE has to make it just that bit wider for the italics, so creating a horizontal scrollbar that has an extremely small effect.

    (Disclaimer: I am no web expert, nor am I an IT professional or even a student in that field. This is solely based on my observations. It is probable that I am completely wrong.)

    Sean - 9th April 2003 20:59 - #

  4. Long hyperlinks may STILL be giving you problems.

    Simon Jessey - 9th April 2003 21:08 - #

  5. More on IE6 italic bugs from John Potter.

    Simon Willison - 10th April 2003 00:43 - #

  6. I get the same effect with my scrollable divs -- if one line is completely italic in a scrollable div it grows a horizontal scrollbar.

    E. Naeher - 10th April 2003 01:38 - #

  7. This might sound petty, but if you're going to color your links, could you PLEASE color your background & text? Red links on a dark gray background is hard to see. I have my default browser color settings changed for background & text, but it doesn't trump any author's CSS stylings when an author define them.

    Devon - 10th April 2003 09:02 - #

  8. Not petty at all - thanks for pointing that out.

    Simon Willison - 10th April 2003 09:50 - #

  9. You know, I had exactly that same problem. I assumed it was something to do with the indent that automatically appears with the blockquote, and instead changed the width attribute to something like 80%. I wish I'd tried the italics thing now ... except that I would still like my blockquotes in italics ;-)

    Ian Lloyd - 10th April 2003 10:29 - #

  10. Thank you for pointing out that bug. I was tearing my hair out wondering why my pages had a damned horizontal scrollbar. However, I am the same as Ian Lloyd, I would quite like my quotes in italic.

    Michael McLoughlin - 25th May 2003 21:15 - #

  11. you're a god damn genius. I too had this problem on a site I am currently creating offline to replace my existing site. I thought it was just the fact I was working way too late in the night ;) thx!

    matthew - 13th November 2003 02:35 - #

  12. I found similar bugs on Mozilla, and god knows how many number of stupid bugs Safari has, which is not a capable browser anyway but still evolving.

    Serge - 29th January 2004 23:21 - #

  13. Another freaky IE6 effect - I now have the text and images of a page appearing ON TOP of the scrollbars! Resizing the window to force the creation of scrollbars then has page items appearing at a higher level than the scroll bars. I tried it with NS7 and there's no problem. So how is IE6 achieving this? VERY strange.

    Paul S - 19th March 2004 10:49 - #

  14. I've seen more occurrences of this IE/italics bug, so I've studied it a little more and found some fixes. Thanks to Big John's help, this ended up into a demo hosted on his site (PositionIsEverything.) BTW, this very same page when viewed with IE6 has an horizontal scrollbar which comes and goes when you slowly resize the window width, probably caused by the italics in the "note to spammers".

    Bruno - 2nd April 2004 09:48 - #

  15. GHF GFGFGJKYTF YTOLI7RI 87576747 JKLJH, VYJTDCYUT

    ABANOP - 14th April 2005 18:31 - #

  16. Any idea why links come out red on Safari. Is it a bug?

    Johan DeSilva - 30th September 2005 14:34 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/04/09/italicBlockquotesCauseScrollba

A django site