Sam Newman's site, a Consultant at ThoughtWorks

As you may of noticed, I’ve been having some problems with the “@overflow@(w3c – Overflow and clipping)”: property and IE. Simply put, @overflow@ should define how content outside the displayable area is handled. Using the @auto@ value should display scrollbars when required – and this works perfectly on Mozilla. On IE however I couldn’t get it to work at all.

The problem is seems is that IE isn’t bright enough to work out the width of the on screen element – if I give my @pre@ blocks a width (which I can now do with a fixed-width layout) it correctly displays horizontal scrollbars and stops playing havoc with my layout. Its not all plain sailing however – when it adds the horizontal scrollbar, it doesn’t correctly resize the @pre@, and therefore also displays vertical scrollbars! Oh well, such is life…

6 Responses to “IE and overflow: auto”

  1. farlukar

    if you know how much of the screen it will NOT occupy (e.g. you’ve got 200px margins on each side) you can use

    <!–[If IE]>
      <style type=”text/css”>

    It’s ugly, but it works…

  2. Sam

    Great tip – thanks Farlukar! In the end, I just assumed a fixed width for pre blocks, and IE correctly displays scrollbars, but your tip will be very useful if I go back to a liquid layout.

  3. Lenny

    i absolutely love you for that code!!! ahh ! lol absolutely great tip…i feel so stupid that i didn’t think of it haha =D

  4. ChaoticXSinZ

    I find that this works for me in all browsers.

    pre {
    overflow: auto;

    pre {
    width: 100%;
    overflow: auto;
    overflow-x: auto;
    overflow-y: hidden;

  5. ChaoticXSinZ

    Sorry, but it seems that my previous comment has been striiped of the ie conditional statements around the second code block.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS

%d bloggers like this: