Search this site


Metadata

Articles

Projects

Presentations

Site design refresher / CSS overflow property on IE 7

I updated some of this site's design. The most obvious changes are cosmetic (new banner logo at the top, slight color/layout differences). The least obvious change (hopefully) is that this site is now layed out purely with CSS, not tables.

After refreshing my rotting CSS braincells, I got a layout working properly and was quite happy. Then I tested in IE, and saw my <pre> tags being displayed incorrectly (according to my desire, not necessarily the code, which don't always align):

The above should have been two lines of text with a horizontal scroll bar. I want to say use scroll-bar for text that's too wide but expand vertically without a scroll bar: Never a vertical scroll bar, only ever a horizontal one.

I've spent a bit today scouring the web with not much help. I've randomly permuted css values for overflow, overflow-x, overflow-y, min-height, etc. Having failed that, I read everything I could find from randomly permuted search queries, one of which lead me to a depressingly long detail about IE6's expanding box problems. The page claims (and several others do, also) that IE7 fixes several box expansion problems.

I created a very small demo with minimal CSS to show the problem here: Click here to view the demo. It includes the solution I found, detailed below.

After some other random permutation, I gave up and tried wrapping the pre in a div and applying the overflow properties to the div. It worked. It's 2009 and I still have to deal with weird and obscure browser rendering inconsistencies. I came up with this:

<style>
  .scroll-wide {
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 500px;
  }

  /* On firefox, pre tags have a top and bottom margin > 0, which makes your 
   * scrolling div have a blank top line, which isn't what
   * we want. Fix one weirdness to find another? I didn't fully investigate.
   * Here's the fix: */
  div pre {
    margin-top: 0;
    margin-bottom: auto;
  }
</style>

...

<div class="scroll-wide">
  <pre>
    stuff
  </pre>
</div>

Solving this with wrap-pre-in-a-div can be automated with jQuery and a CSS definition:

// javascript
$("pre").wrap("<div class='pre-wrap'></div>");

// In CSS
div.pre-wrap {
  /* overflow/height/whatever options */
}
It's still possible I was doing something wrong and that this hack isn't necessary, but I don't know. I'm just glad to have it working now.

PS: If you use Meyer's reset.css, you'll want to include pre { margin-bottom: auto; } , or IE will again clip the bottom of the pre contents with the scrollbar.

javascript: the 'top' object.

My jquery puffer demo wasn't working in IE. This was the error:

Line 25 is:

  top = pos[1];

Turns out 'top' is one of those magically populated objects. In Firefox, you are allowed to assign to top and hence the demo works. In IE, it tells you that assignment is not implemented for that particular object.

In IE, alerting 'top' will show '[object]'. In Firefox, alerting 'top' will show '[object Window]'

If I change my code to use 'top_pos' instead of 'top', the demo works now.