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.

css selectors and html tables

CSS is fun. It has a concept of "selectors." Selectors are ways of specifying what elements in your document have styles applied to them. If you want to know more about selectors, css.maxdesign.com.au has an exellent article on css selectors.

Kiosk web interface, website design, et al.

For the past several years I've more or less ignored the existance of HTML 4, CSS, and JavaScript. My web design has centered around a fluent knowledge of html tables and little else. My new website design is much more in tune with today's web technology. Hopefully, assuming I can get off my butt and do it, I'll be writing a few articles in the coming weeks about things I've learned and whatnot.

I started a new project today to try and do a kiosk interface completely via a web browser. I'll post a link to it when I've actually finished up work on it. It uses XML, JavaScript, DOM, and fun with CSS. I've already found a "feature" of Opera that's making me want to switch to back to using firefox for the devices this interface will run on, but I haven't decided yet.

I may just end up writing something that uses the mozilla rendering engine and nothing else, but that's probably more work put into this than I want to spend. More on things as they develop...