Ian Schaefer

Recently we styled the main navigation menu for a Develisys client site. The nav was challenging from a production point of view for it combined overlapping transparent tabs or unequal widths; normal, hover, and active states; was styled on a clean, accessible unordered list in the html; and finally, we wanted it to be as fast as possible, deciding ultimately that the nav should request only a single image from the server. After some struggle, we arrived at a workable method that looked and worked like a charm in the current Firefox, Opera, and Netscape, IE 6 and 7, and degraded gracefully in the downlevel browsers. Not bad.

But it soon emerged that the near-final version of the nav was crippled and unusable on Safari 1.3 and 2.0. In Safari, anywhere you clicked on nav would reload the current page. To the designers, it became immediately apparent the anchor on the currently active tab was a large as the entire button background image, about 650px x 110px, or so, preventing the use click from targeting any of the inactive tabs. Dead navigation.

I have yet to determine if this is a bug in the Safari browser or an undefined behavior. The behavior in question occured under the following circumstances:

• absolutely positioned (+) ul
• absolutely positioned (+) li, overflow hidden
• absolutely positioned (-) anchor set to display block, with a background png image of all navigation tabs
• negative text-indent to make the original list text disappear (The Pixy Technique, if I’m not mistaken.)

I’ll cut to the chase, it turned out to be the text-indent that threw everything out of whack. Not just negative, but for any value. We decided to hide the anchor text with {display:none} instead of the negative text indent, as this works equally well across all browsers, and did not necessitate re-thinking the entire navigation styling.

Because this was an interesting case, I decided to try to generalize the trouble with Safari. I’ll be back with that soon…

This entry was posted on Sunday, April 29th, 2007 at 10:32 pm and is filed under Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.