Life Doesn't Make Sense

Posted Wednesday, February 08, 2006, at 02:21PM by e;

Here's the kind of thing that makes people want to not get into web development: I have an app I'm working on, and part of it relies on a pretty tightly spaced interface containing form elements, particularly select boxes. Select boxes are a pain because unlike most everything else, they just can't be styled. That's not cool. So to fix that problem I wrote a javascript library that runs through a page and replaces all the select boxes with easily-stylable unordered lists that function like selects. That's a bit of a challenge, but easy enough to solve.

So I now have ul's, and I style them to look like drop-down select boxes. In Safari and Firefox it works perfectly. In IE, though, the text of the select options magically appears below where the select would have been. If you open the select, they disappear and function correctly, but then they pop back right afterward.

After spending all morning tracking down what exactly could be triggering this, it turns out to be something just as illogical as you might expect.

Here's a rough estimation of the code around the select:

<div>
  <b>Description:</b>
  <select id="foo" name="foo">
    <option value="1">Option 1</option>
  </select>
</div>

In the stylesheet that bold tag was redefined as a block element:

#search_residential form div b {
  display: block;
  font-weight: normal;
}

Somehow that display: block; was the issue. Why? No clue. But without it IE works just fine.

I'm glad to get a solution, but I sure wish it was one I understood.