If you check out Zeldman’s Mini-site for Designing With Web Standards with IE 5/Mac, you will notice a few differences when compared to the same site viewed in just about any other current browser: the secondary navigation (an unordered list displayed inline) aligns the text to the left, and each button’s clickable area is restricted to the link text, not the entire visible area of the button.
I figured I could fix this, without requiring a new version of IE 5/Mac, and so I tinkered a little: Zeldman: DWWS BookSubNav Bug Fix.
The fix above reduces the navigation to just the UL and its parent DIV, and in my testing it works in all browsers except Opera 6 (which breaks when viewing Zeldman’s original layout anyway).
What did I do to fix the issues? I simply added a <span> to the button text, like so: <span>Home</span>
That’s it! Now the buttons display properly on all browsers, since this addition does not alter the way the other browsers render the CSS.
I’ve sent the changes off to Zeldman, so hopefully this post will soon be rendered obsolete.
Comments
3 responses to “Zeldman’s DWWS Mini-site Bug”
i believe adding overflow: hidden; to the #booksbnav ul class will accomplish the same trick, although i don’t have a mac to try it out on right now.
I also tinkered around with it, and sent Zeldman my findings. And although what I came up with isn’t as simple as your solution, it also doesn’t add any (redundant) markup to the page.
http://www.modulo26.net/Untitled-2.html
However, it does require manual manipulation of (gasp!) padding on the last 2 a’s.
It’s always fun to see how different people come to the same end result!
andy, congrats, your solution was featured on zeldman’s site, but there was a problem with the background color overflowing past the border (screenie). i just submitted my solution, hope it helps ;).