magpiebrain

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)”:http://www.w3.org/TR/REC-CSS2/visufx.html#overflow-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…

Advertisements

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”>
      .overflowthingy{
        width:expression(document.body.clientWidth-400);
        overflow-x:auto;
        overflow-y:hidden
      }
      </style>
    <![endif]–>

    It’s ugly, but it works…

    Reply
  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.

    Reply
  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

    Reply
  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;
    }

    Reply
  5. ChaoticXSinZ

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

    Reply

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

You are commenting using your Google+ 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: