IE5.x/Win bug on this page

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.

In today’s Report:
CSS banners “fixed”
Making our ALA and Happy Cog “banners” work in IE5/Mac. CSS rollover tips.
A List Apart 181 + Digital Web
Separating content from structure?

CSS banners “fixed”

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.

ALA banner exposed.

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.

Update 16 May

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.

A List Apart 181 + Digital Web

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.


12 May 2004 11 am est

In today’s Report:
Hot socks from Reboot
Three favorites from the May 1st Reboot. These sites might stimulate your creativity.
Bug fix
IE5/Mac users, rejoice. How a single carriage return fixed 47 display errors.

Hot socks from Reboot

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:

Jeedoubleu – the portfolio of Greg M. Washington
Most portfolios showcase the work without giving much away about the person behind it. Jeedoubleu inverts that paradigm, using the head and hands of the artist as the means by which you view his work. It’s funny, memorable, and definitely qualifies as an art directional concept. Jeedoubleu is imaginatively and technically impressive, yet its self-deprecating humor keeps it from becoming precious. Clever touches (eye movements, changing expressions linked to site sections, “breath” on the glass of your monitor screen) add depth to the metaphor and keep it fresh.
Technical note: Although the Flash-based site claims that you need IE5/Win to view it, that is not the case. I had no trouble experiencing Jeedoubleu in a variety of non-IE, non-Windows browsers.
CMN
Another portfolio site (almost all Reboot participants are agency sites or personal portfolios). Designed to showcase the creator’s expertise at illustration and graphic design, it also reveals a strong sense of color and the ability to balance several kinds of content on a single page. The color scheme, shapes used, and deliberate distressing of key elements show that the designer is aware of current trends but not a slave to them: he works them into his own style.
If I could recommend one change, it would be to make the designer’s name and contact information more obvious. I’m guessing the designer is named Claudio something, but even his bio doesn’t seem to make that clear.
Playground Blues – the blog of Nathan Paul Borror
After the technical wizardry of Jeedoubleu and the ornate visual touches of CMN, Playground Blues might seem a bit rudimentary at first glance. It is anything but. What Playground Blues achieves is simplicity — one of the toughest things to do well.
As one would hope for in a word-driven site, Playground Blues focuses on your interaction with its content instead of dazzling you with an overt display of graphic design chops. Yet the chops are evident in the way every design detail communicates. Just as good writing works hard to convey ideas — and not to impress you with the writer’s vocabulary — good design sometimes renders itself almost invisible, simply by doing its job well.
So it is with Playground Blues. The care given to size relationships, the subtlety of the navigational interface, the delicious color scheme, and the surprising yet understated interactive effects are all there for visual pleasure seekers, yet they all serve an overarching goal of presenting information simply and effectively. All that, plus web standards and accessibility. Hopefully next year’s Reboot will include more content-driven, standards-based sites; but that is up to you.

Other fine sites participated in this year’s Reboot, but why take my word for it? Visit May 1st Reboot and see for yourself.

Bug fix

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.

Previously in The Daily Report...

Blog This
Now anyone, at virtually any experience level, can own and manage an attractive and standards-compliant personal site. With input from Adaptive Path and Stopdesign, Blogger reinvents itself (and we lend a hand).
What is Art Direction?
Stephen Hay tackles the question in this week’s A List Apart. This week’s New Yorker shows how art direction provides a framework for understanding written content.
Contrast-o-meter and other adjustments
The zeldman.com redesign continues, with a new feature for laptop users and other adjustments.
Yet Another Fine Job Opportunity
IconNicholson seeks client-side developer.
Design opportunity: Free the Slaves
Better design for a better world.
Campbell-Ewald wants you
Work in the standards-friendly digital division of the ad agency that produced Elmore Leonard.