If you check out that link with Internet Explorer (yes, even IE6), Safari, Opera, you will see four images on that page – a poster image just under the heading, two mid-size brochure images down the left, and a small business card image in the lower right.

But if you look in Firefox, chances are you won’t see the poster image at all; in fact, Firefox goes further: sometimes hiding the descriptive text I’ve used in place of captions to identify the various images, and on occasion, it won’t even reserve the proper space for the poster image, thus messing up the layout and bringing the business card image to the top of the page.

I’ve encountered the Firefox disappearing content bug before, but Internet Explorer is the one that usually has the reputation for it. Unfortunately, while it probably occurs more frequently in IE, it’s more difficult to resolve in Firefox without reconstructing the layout altogether.

Which I will do, of course – if you’ve paid attention to the actual content of the linked page, you’ll see it’s a presentation of my first graphic design print project, which I worked on for my employer (for my full time job). As I get more experience working with Illustrator and InDesign, I’ll be advertising that I’ve expanded from web work into print, as well. Should be fun.

Web developers everywhere will breathe a sigh of relief when IE6 is put to rest.

Like the more familiar bug, this is 3 px and float-related, as well.

I’ve encountered this bug more than once in the following scenario:

1. Inline unordered list of text hyperlinks.

2. Hyperlinks floated.

3. Any text link of multiple words will display 3 px lower than it is supposed to.

Actually, I almost think my description in (3) is backward, since IE7 displays single words roughly 3px higher than other browsers – thus the “jog” may actually be reverse: except where there are multiple words in the text link, IE displays 3 pixels above where it is supposed to.

Note that assigning a height does not work in this case. (Nor does zoom.) The only workaround I’ve discovered so far is to create a class for IE to render the item with 3px less top padding than its mates.

I queried the famous bug-quasher Big John Gallant (no relation) about this, and even he had not been previously familiar with the bug.

If you’ve encountered this IE behaviour and are aware of a fix, post away.