with Lorelle and Brent VanFossen

Damn MSIE Bugs in HTML and CSS

Designing web pages is a great joy, now that I don’t do it for as a business but for myself (helping a few people from time to time – but currently, it’s not a JOB), but the bugs within Microsoft Internet Explorer (not to mention the OTHER browsers) are a real pain in the ass.

One of the reoccurring bugs I have had to find fixes and hacks around is known as the Peek-a-Boo Bug. When you run the mouse over a link, the entire paragraph reformats itself and jumps around, or that link and/or others on the page in a list disappear. You can see a lovely example of this at Positioniseverything MSIE Peek-a-boo Bug.

There are several ways to fix this, and the easiest is to define a 1% height container around your entire document that forces a height onto every container on your page. This is called the Holyhack and works brilliantly. But it doesn’t work consistently. Microsoft Internet Explorer still seems to pop this annoying bug up when you aren’t paying attention.

Recently, I ran into it again, after thinking I had had this fixed for two years. At the end of each of the questions in our Asking Zone, such as a question section which explains how we protect ourselves from theft on the road and while traveling, there are a couple of links to other articles on our site. Before I fixed it, at the end of the paragraph was a small graphic arrow with a hyperlink that would take you back to the Asking Zone page. When you would move the mouse over any of the links in that paragraph, the whole thing would jump around and sentences would compress over the top of each other until you moved the mouse over another link, and then the paragraph would “straighten out”. Ughly and ridiculous.

I played around with the Holyhack and it still wouldn’t fix itself. The only fix I could finally come up with is to get rid of the graphic and replace it with a word link [RETURN]. Ugly but simple.

But not the fix I wanted. I wanted the arrow graphic. I hate making these compromises in my web page design. Maybe I’ll be able to fix this when I make the conversion to PHP.

I have a bunch of links to helpful sites dealing with bugs and hacks in MSIE and other browsers in my article series on web site development and validation. And if you have interest in CSS and HTML, be sure and check out the fun experiments I did with CSS. I’m really proud of those and love bragging about them. Few people understand them, but the idea that all of these designs were made with WORDS and CODE and no graphics at all….that really impresses me. I hope you are impressed.
Mobile, Alabama

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>