IE 6.0 does not understand overflow:auto

If my blog looked like shit for the past few days then it’s your own fucking fault. You need to get your ass off IE 6.0 and upgrade to a real browser – even if it is IE 7.0. I don’t care – just stop using that antique piece of crap and get with the program. Oh, and thanks for letting me know jackass! I only noticed it today when someone at work wanted to check out my blog.

Anyway, since I have that rant out of the way, I apologize for the way my blog looked in older version of IE. Let me explain what happened. I thought I was going to be clever, and let my <pre> blocks scroll sideways using the overflow CSS atribute:

pre {
	overflow: auto;
}

It turns out that this trick doesn’t work in IE 6.0 and below. My <pre> tags would expand to full width, wrecking havoc to my layout, and generally making things look ugly. Ugh! Fortunately, some dude named Sébastien Lorion already figured this issue out some time in 2005. Here is a quick solution based on his notes:

pre {
	overflow-x: auto;
	width: 450px;
}

html>body pre {
	overflow: auto;
}

This works in both IE and firefox. For IE you need to specify the absolute width of your container, and use the overflow-x instead of overflow. The second definition overrides the first, but only in Firefox and other compliant browsers as IE does not understand this type of notation.

Thanks Sébastien!

[tags]overflow, overflow-x, ie, ie 6.0, internet explorer, css, firefox[/tags]

This entry was posted in Uncategorized. Bookmark the permalink.



2 Responses to IE 6.0 does not understand overflow:auto

  1. Yengkhom Ranjan INDIA Mozilla Firefox Linux says:

    Hi Sébastien,

    This is my CSS for Overflow:auto of a tbody

    tbody{
    height: 500px;
    overflow-y: auto;
    border-right:1px solid #708090;
    }

    It works properly in Firefox… but not in IE 6… Can you please help me it is urgent

    Thanks & regards,
    Ranjan Yengkhom
    Mumbai, India

    Reply  |  Quote
  2. Alex AUSTRALIA Mozilla Firefox Windows says:

    Thanks for the tip.

    Sadly IE6 still isn’t dead, despite the recent funeral.

    Reply  |  Quote

Leave a Reply

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