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…
No Trackbacks
6 Comments
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…
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.
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
heh – new layout ate the pre tag…
I find that this works for me in all browsers.
pre {
overflow: auto;
}
pre {
width: 100%;
overflow: auto;
overflow-x: auto;
overflow-y: hidden;
}
Sorry, but it seems that my previous comment has been striiped of the ie conditional statements around the second code block.