IE5.0 and 5.5/Windows users, the inclusion of a small image lower down on this page triggers a bug in your browser, forcing the content of the sidebar below the fold. The bug affects this page only.
The ALA and Happy Cog “banners” at the top of the sidebar are finally working in IE5/Mac.
The trick was to remove “overflow: hidden
” from the rules that turn these two h5
headlines into clickable images with rollovers. (Hat tip: Gulliver and Micah, who each proposed the same solution on the same day, with no knowledge of each other.) Let’s look closer.
Shown above is the ALA banner replacement image. You may notice a slight green halo at the edges of the letter forms. That’s because the image was designed to antialias against the green background color of the sidebar. You will definitely notice that the logo appears twice. The light-green version corresponds to the initial display when the page loads; the dark brown version below it is the rollover state. CSS afficianados will guess that I’m using Pixy’s CSS rollovers with no preload or some variation thereof.
The Pixy method works by stacking multiple image states in the same image file (i.e. in just one GIF, PNG, or JPEG); using that file as a background image on an anchor link; telling the link to display: block
and setting its size so as to crop into just one image version; and then changing background position to slide up and down as the reader’s mouse cursor hovers over the link.
Like other web designers, I’ve been experimenting with variations on Pixy’s idea since the moment I saw his web page. Not because I enjoy tinkering with code — I don’t — but because Pixy’s premise has the potential to replicate table + JavaScript + multiple image layouts in a semantic, accessible environment, and at great bandwidth savings.
With each site I design, I reinvent the method somewhat. Thus the variation I use here is smarter and simpler than the one I developed for the Happy Cog redesign of just a few weeks ago.
First I tell the h5
that links to A List Apart to display its text 9999px to the left of the element’s position:
div#banners h5#alaban { margin: 0; padding: 0; text-indent: -9999px; width: 230px; height: 28px; }
That way, the linked text will be hidden from CSS-capable browsers but will appear in non-CSS environments and in screen readers. (Mike Rundle devised the method, which has been confirmed to work in the JAWS screen reader.)
Next I tell the link to cover the entire 230 x 28 space, and to use the ALA banner replacement image as a background:
div#banners h5#alaban a { display: block; margin: 3px 0 0 0; padding: 0; width: 100%; height: 100%; text-decoration: none; background: transparent url(/i04/alaban.gif) top left no-repeat; }
Lastly I tell browsers to slide the background image up by 28px (thus “replacing” the green logo with the brown logo) when your mouse cursor hovers over the link:
div#banners h5#alaban a:hover { background: transparent url(/i04/alaban.gif) 0 -28px no-repeat; }
And it all just works.
I originally wrote the middle rule as follows (difference highlighted):
div#banners h5#alaban a { display: block; margin: 3px 0 0 0; padding: 0; width: 100%; height: 100%; overflow: hidden; text-decoration: none; background: transparent url(/i04/alaban.gif) top left no-repeat; }
The thought was, if I’m telling CSS to crop the image (to show only part of it), I should also specify how to handle the part that is not shown.
Duh. No. Overflow: hidden
controls the handling of foreground elements that exceed the width or height of the container. It does not control the cropping of background elements. I put it in there to hide the replaced text (the text that shows up in screen readers, non-CSS-capable user agents, and browsers with CSS turned off).
And although it shouldn’t cause IE5/Mac to soil itself, it also isn’t needed here, because the replacement method I’m using (-9999px) sticks the text way offscreen.
I think. Hey, I’m just figuring this stuff out as I go along, same as you.
In this week’s issue of A List Apart For People Who Make Websites, first-time ALA contributing writer Michael Cohen wraps his brain around Separation: The Web Designer’s Dilemma:
Presentation separated from structure. Structure separated from content. The foot bone connected to the...
And so on. A List Apart 181 is brought to you by managing editor Erin Kissane, managing producer Dan Benjamin, and the letter S.
Also this week, and speaking of independent magazines for people who make websites, the makers of A List Apart congratulate the makers of Digital Web Magazine on a smart, clean redesign.
The annual May 1st Reboot encourages digital authors around the world to redesign their sites and relaunch them on the same day — not for any business reason, but to encourage creative diversity and foster a sense of community. This year it was my honor to serve as one of the event’s judges. Here are three sites I liked a lot:
Other fine sites participated in this year’s Reboot, but why take my word for it? Visit May 1st Reboot and see for yourself.
IE5/Mac users, this site should display correctly now, aside from the known sidebar banner issue described in the colophon.
Before launching the May 3rd redesign of zeldman.com, I tested every page in IE5/Mac, and everything (except the sidebar banner) worked perfectly. But immediately after the launch, the site fell apart in that browser.
A whitespace bug was to blame. If you’re designing in CSS, and if IE5/Mac users are part of your audience (and millions still use that browser), you might want to know about this simple problem and even simpler solution.
As most developers and all Designing With Web Standards readers know, a whitespace bug in all versions of Internet Explorer for Windows destroys layouts that use lists to create menus. To avoid triggering the bug, most of us have gotten into the habit of removing whitespace from our lists. Thus we write:
<ul><li>item one</li><li>item two</li></ul>
... instead of ...
<ul> <li>item one</li> <li>item two</li> </ul>
After crafting and testing the templates that drive this site, I broke out components into Apache includes (the shoestring designer’s CMS), so I could change site-wide elements at any time, simply by editing one file. All standard procedure.
After pasting the menu area into its own include file, I noticed that a carriage return preceded the </div>
that ended the top navigation. Without thinking about it, I deleted that carriage return.
If I had tested in IE5/Mac immediately after doing so, I might have realized that that carriage return protected IE5/Mac from one of its bugs — a bug that broke my nice new layout in 47 places. But I was editing several files just then, and by the time I checked the site in IE5/Mac, it was not clear what had gone wrong.
A reader who calls himself Gulliver, acknowledging that what he was proposing was a “hack that shouldn’t be necessary,” pointed out that the addition of a non-breaking space between the end of the list and the closing of the div solved all of IE5/Mac’s problems with my redesigned layout. Gulliver’s tip gave me the clue that led to my not-technically-a-hack solution of inserting a carriage return before the </div>
.
And all is now well in Puppet Land.
If you find this kind of dull technical stuff useful, in the near-future I’ll write up CSS layout bugs that cripple IE/Win and Mozilla Firefox, along with simple workarounds I developed to fix those fumbles prior to the relaunch. But enough for one day.