Uncategorized

Chasing Down the CSS “Peek-a-boo” Bug

There are a few threads to this story. I had seen an odd thing on one of our new XHTML designed web sites— this one uses an HTML <ul> list and CSS for rollover effects and graphic-looking buttons for the navigation.

In Internet Explorer 6 (and then reports came in for IE5 users) the text to the right of the 4 first navigation links was hidden, or the text would disappear of you moused over one of the navigation links. The text would show up if you scrolled down and came back.

I Googled a bit on “IE CSS bug” scoured some CSS listservs and came up with some things that sounded related but were different situations. I then added “+disappear” to my Google search query and came up with 2 links that were a bit closer to my situation… but one of these sites had a link to an awesome CSS site called “Position Is Everything” and from there got quickly to the page describing the Peek-a-boo IE6 bug. Holly ‘n John offered a few ideas, but it seemed to clue in to IE issues with breaking content that had been floated. Bingo!

It was suggestion under the “Update!” label that was the fix– adding a line-height specification to the div that held the content– it is certainly counter-intuitive, but it worked like a charm.

One lesson here is that you need to avoid an over-reliance on Google as the be-all to finding information. It is not. It distorts some relevancy by bubbling popular links up. I have had more than a handful of examples where sites I explored off the top Google returns had related links that had exactly what I needed, but were not sites that showed up on the search results. Almost as a matter of practice, when I am one click off a Google search, I scan for links that offer promise.

The other issue is almost the sheer lunacy one faces in CSS web design and the varying bugs, workarounds, and frankly voodoo effects between Internet Explorer 5.0, 5.5, and 6.0– all of them have behaviors completely out of synch with the w3 standards. And the problem with Microsoft (well at least one problem) is that it only allows one version of their browser to exist at a time– any updates wipe out your older version. But there is nothing wrong with other PC web browsers (NetScape, Mozilla…) to have multiple instances of different versioned software…

But there is an answer. Recently while digging around, I stumbled (I relish serendipitous clicks) on Ryan Parman’s post on how to install multiple versions of IE. It can be done a a manual process as described elsewhere, but Ryan has put together a collection of zipped archived of the needed files for versions of IE from 3,4,5,5.5,6, just download and unzip.

In about 15 minutes, I had dl-ed IE5 and IE5.5 to my office PC and had them running side by side with IE6. Watch out as in any of these the “About Explorer” link in the help menu reports only the version of the current installation. And if you have 2 or three different versions running, it can be hard to tell them apart.

But heck, this works! I can now test web sites on the 3 main PC browser platforms, and do this all from one PC.

Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.