Pushing Browsers

So I have been working on a small piece of navigation at work. Tabs, to be exact. Multiple items, but no more than 5 at a time. Variable length titles (including some rather long). As it is a list of links, of course, I wanted to use an unordered list. It all made perfect semantic sense. Just spit out the list, add some CSS for the tab look, and done.

However, there were requirements for its behavior. The tabs were not allowed to wrap around to the next line. They also could not just drift off the right side of the page. Everything had to be shown. And it was alright for the individual tabs to wrap and grow taller. Basically, I was told the nav had to act like a table, just not in so many words.

Because I am likely more standards-driven than most doing similar work, I wanted to stick with the list. Doesn’t make any sense to have non-tabular data in a table, I thought. Within a few minutes, I had found a semi-solution. W3C recommends the display attribute having a “table-cell” property, which was just what I was looking for. Threw it in my code, hit reload in Firefox, and wham, there it was. Needed a slight bit of tweaking, but it was working for the most part. Then I alt-tab’bed over to IE7….

Nothing.

Low and behold, Microsoft hasn’t added that to IE. Of course not. Why would they? It’s only been in the recommendation since… you know, May 1998. At least! (I don’t have the heart to look any further back).

I am not “new” as my sister would say… I know how it is. I hadn’t expected it to be there, but the more work I had to do on an alternate table-based solution, the more it annoyed me. I keep hearing more and more about the CSS3 recommendation, adding more elements to HTML 5, and all of these other grand documents, which all currently amount to little-to-nothing. Maybe I am missing the point, but if 1998 is going to be ignored, why should 2008 be any different?

I am going to keep this rant short, the rant wasn’t really the point. The greater point is that was enough of a call-to-action for me. That’s what it took to realize I should start looking into what I can do about giving certain browsers a push in the right direction. They seem to be lost.

IE Flicker… thought we had a solution

So we thought we just had a solution to the IE 6 background-image flicker problem. We were trying the javascript again, but calling it from the CSS. Nope, back to intermittent searches.

IE 6 background flicker problem revisited

So I fell into the (now famous to me) Internet Explorer 6 background-image flicker problem. Oh, fun times. There have been a few different solutions presented, ranging from javascript to server settings (or my favorite [sarcasm], to put the background-image on a copy of itself so you don’t see the flicker). The problem is that I was using a pre-SP1 IE, so the javascript solution wouldn’t work, and I did not have access to the server.

After my testing, I’ve found that the statement of the problem isn’t quite correct. Most say that is whenever you put a background-image style on a link. This isn’t quite accurate. The problem I have observed is:

When a background-image style is applied to either a DOM element with an event attached to it, or to any of its children.

This makes it a wider problem than I had originally thought. The one caveat I have found is that an inline event (for example, an ‘onclick’ attribute written in the <element>) will not trigger this effect.

The thing that amazes me about this, and worries me about those trying to apply a duplicate background-image to hide the flicker, is that every mouseover is causing another server hit for that image. It seems incredible that individuals and companies can just turn a blind eye to this. I would be inclined to send Microsoft an invoice…

Postscript: I used Fiddler which was a really big help testing for this. Turns out it is owned by Microsoft. Anyone sensing any guilt there???

Internet Explorer 6 still stinks

Another day with a considerable chunk WASTED on IE6. What a totally irresponsible release.