Touring Mechanic

I’m starting this blog as a diary of my daily coding challenges. With luck, I’ll be challenged often enough to keep it interesting, at least to me. No worries so far.

Last night I decided to tackle a long-standing, mildly annoying problem in Touring Machine. When you load the list page in Firefox, you can sometimes see the tabs start out a certain distance apart:

and then move closer together:

I figured it was probably caused by JavaScript–specifically, the code that activates the tab elements as a YUI Tabview. So I tried loading the page with JavaScript disabled, and sure enough, it stayed in the widely spaced “before” form.

Aside from some failed attempts to Google a fix, my first step was to inspect the tab elements with Firebug. Comparing the JavaScript-disabled page to the YUI-altered one revealed, curiously, no significant difference. Same HTML, same CSS style. So why did they look different?

My next step was to find out when the change was happening. Stepping through it with Firebug, I found this line in TabView.addTab:
[source:JavaScript]tabParent.appendChild(tabElement);[/source] YUI is taking each tab and appending it to the element it’s already in. This has the effect of moving the tab to the end of the row… and, still mysteriously, reducing the space between it and its siblings.

At this point I believe the bug is not that YUI shrinks the space between tabs, but that Firefox puts extra space there in the first place. (IE 7 displays tabs with the “after” spacing.) I’m reducing it to a minimal test case–something to do with UL (display: block) and LI (display: -moz-inline-stack (?!))–but now the question is, once I understand the bug, what can I do about it?

(By the way, you can also see this bug in one of Yahoo!’s own examples.)

This entry was posted on Tuesday, April 10th, 2007 at 12:16 pm and is filed under javascript, yui, firefox, firebug, css. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.