alexjsharp.com

I am not a css designer. I hate the language, I hate the implementation, I hate the inconsistency of browser support. This is no fault of css or the good people who have pioneered and built the language. Rather, it is more the nature of a client-side technology. Javascript has suffered many of the same problems, but cross-browser support has gotten noticeably better in recent years.

Unfortunately, css is probably the one web technology (other than HTML) that is nearly impossible not to use. For the most part, my deep hatred of css programming is due to the “hackish” nature the language has been forced to adopt, almost exclusively because of Microsoft Internet Explorer 5.5 and 6, the massive number of bugs these browsers have, and Microsoft’s failure to patch these browsers. That said, let’s get on with it.

Often I need to display a series of items on the same line. Whenever possible, I try not to use floats because of the plethora of bugs in earlier versions of IE. My first attempt is often to use <li>’s, set list-style: none; and display: inline;. However, due to the nature of how a display: inline; element is meant to be displayed, this approach is simply not useful for any type of content beyond a menu/nav bar. So, we are forced to float the list items. I don’t know about you, but I feel defeated.

First, here’s a sample of what kind of data we need to display:

<ul id="products">
  <li>
    <div class="prod_img"><img src="path/to/image" alt="blah" /></div>
    <div class="description">
      <strong>Here's a little description.</strong><br />
      <span>Here's some more.</span>
    </div>
  </li>
  <li>...</li>
</ul>

And here’s the style rules that should satisfy our needs:

ul#products {
  list-style: none; 
  overflow: auto;
  border: 1px solid black; /* border added to illustrate forthcoming IE display bug */
}
ul#products li {
  list-style: none;
  float: left;
}

We have the overflow: auto; declaration so that the containing ul “hasLayout”. We have to to do this when a containing element contains all floats, or elements that don’t flow in the normal course of the document. As expected, IE 6 screws this up. We have to add a seemingly ambiguous height property declaration:

ul#products {
  height: 100%;
}

There, now we’ve got it. Inline list items that can contain block-level items, while remaining on the same line.

A short rant

Maybe this a bit whiny/preachy, but having to resort to this kind of thing royally pisses me off. It’s not that it’s a lot to type, or that I had to implement some css hack that only IE version x will recognize. No, it’s simply that I had to make a special exception just for older versions of IE, while everything else works the way it’s supposed to work.

That, in a nutshell, is why I enjoy server-side programming, and why I for the most part deplore client-side programming. With server-side technologies, you know your boundaries. You are confined to the limits of your server operating system software, and the limits of the language in which you’re working. If you work within those limits, generally speaking, things will work the way they are supposed to work.

With client-side technologies, namely CSS, you end up spending just as much time learning and implementing the bugs, workarounds, and compatibility issues that you do actually writing code! This problem is not exclusive to Microsoft, albeit they are a big part of it. A perfect example is cross-browser compatibility for the various css display modes. All of those display properties have been part of CSS since CSS version 2 was released. Are you ready for a laugh? CSS2 was released in May 1998, now more than 10 years ago! Seriously!? Ten years, and we still can’t get cross browser support for inline-block. Rant over.