About this site's lack of design: Yes, it's supposed to look this way — I'm using a sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Design, random musings, and the Web. Since 1977


Zeldman’s DWWS Mini-site Bug

If you check out Zeld­man’s Mini-site for Design­ing With Web Stan­dards with IE 5/Mac, you will notice a few dif­fer­ences when com­pared to the same site viewed in just about any oth­er cur­rent brows­er: the sec­ondary nav­i­ga­tion (an unordered list dis­played inline) aligns the text to the left, and each but­ton’s click­able area is restrict­ed to the link text, not the entire vis­i­ble area of the button.

I fig­ured I could fix this, with­out requir­ing a new ver­sion of IE 5/Mac, and so I tin­kered a lit­tle: Zeld­man: DWWS Book­Sub­Nav Bug Fix.

The fix above reduces the nav­i­ga­tion to just the UL and its par­ent DIV, and in my test­ing it works in all browsers except Opera 6 (which breaks when view­ing Zeld­man’s orig­i­nal lay­out anyway).

What did I do to fix the issues? I sim­ply added a <span> to the but­ton text, like so: <span>Home</span>

That’s it! Now the but­tons dis­play prop­er­ly on all browsers, since this addi­tion does not alter the way the oth­er browsers ren­der the CSS.

I’ve sent the changes off to Zeld­man, so hope­ful­ly this post will soon be ren­dered obsolete.

This item was posted by Dan Rubin on Tuesday, June 10th, 2003.


You can follow comments on this item via the RSS 2.0 feed.

Comments are closed.

3 comments on “Zeldman’s DWWS Mini-site Bug”

  1. Posted by vlad on Wednesday, June 11th, 2003.

    i believe adding over­flow: hid­den; to the #books­b­nav ul class will accom­plish the same trick, although i don’t have a mac to try it out on right now.

  2. Posted by Arikawa on Wednesday, June 11th, 2003.

    I also tin­kered around with it, and sent Zeld­man my find­ings. And although what I came up with isn’t as sim­ple as your solu­tion, it also does­n’t add any (redun­dant) markup to the page.


    How­ev­er, it does require man­u­al manip­u­la­tion of (gasp!) padding on the last 2 a’s.

    It’s always fun to see how dif­fer­ent peo­ple come to the same end result!

  3. Posted by vlad on Wednesday, June 11th, 2003.

    andy, con­grats, your solu­tion was fea­tured on zeld­man’s site, but there was a prob­lem with the back­ground col­or over­flow­ing past the bor­der (scree­nie). i just sub­mit­ted my solu­tion, hope it helps ;).