TJKDesign: Home Page
Creative Commons License
This work is licensed under a
Creative Commons License.

If you've found this beneficial, consider making a donation through Paypal

Guild of Accessible Web Designers Logo
Valid XHTML 1.0!
Section 508
Web Standards
Tables-less Layout
Frames: a solution or a problem?
XML Feed
NN4.7 Safe!

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

IE5 Mac Bugs...

This document contains 4 test cases related to MSIE 5 Mac. If you're viewing this page using another browser, you should not notice any abnormal behavior.

Phantom Links (v5.0)

To demonstrate the "phantom links" or "ghost links" bug, I'm using here some markup and CSS vaguely related to the Suckerfish Menu from HTMLDog. As with the original menu, the following example shows that MSIE5 Mac does not reveal the sub links (2nd level List Items) when the cursor is over the top level links. Or does it?

In fact, MSIE5 Mac creates invisible links. If a user holds his/her mouse right below the "1st Set" and "2nd Set" links, where the sub links are supposed to pop up, the cursor changes from "text" to "hand" and the href values for the sub links appear in the status bar. And these "ghost links" are perfectly clickable.

BTW, if you like this kind of menu you may want to read my article about CSS-Dropdown menus.

Demo:


Velit esse cillum dolore excepteur sint occaecat sed do eiusmod tempor incididunt. Cupidatat non proident, qui officia deserunt lorem ipsum dolor sit amet. Ut enim ad minim veniam, sunt in culpa duis aute irure dolor.

The easy fix I found to fight this bug is to use position:relative in the rule where float is used for the LIs.

The same thing once I added that single declaration:


Velit esse cillum dolore excepteur sint occaecat sed do eiusmod tempor incididunt. Cupidatat non proident, qui officia deserunt lorem ipsum dolor sit amet. Ut enim ad minim veniam, sunt in culpa duis aute irure dolor.

Background—painting bug caused by floats (v5.0)

The top of the tabs below should be chopped off in IE 5.0 Mac! It is like this browser shrink wraps the background vertically around the anchors.

BTW, if you like this kind of menu you may want to read my article about Scalable Tabs.

Demo:

The easy fix I found to fight this bug is to use position:relative in the rule where float is used for the LIs.

The same thing once I added that single declaration:

Strange bug triggered by placement of closing tags (v5.0)

I've run into that one twice. Once with nested floats, another time with nested Lists. It seems that it can cause very odd behavior.

I've experienced 4 situations:

  1. A float containing nested floats may well "decide" to clear another float (check it out),
  2. A float containing nested floats cannot be cleared, no matter what one tries,
  3. List Items in nested Lists break apart,
  4. The content of a float box nested inside another float is not rendered (check it out).

Each time, I was able to fix the problem by moving the closing DIV tag to a new line.
For example I replaced this:

<div class="mainFloat"><!--#include virtual="/aBunchOfFloats.asp" --></div>

With this:

<div class="myMainFloat"><!--#include virtual="/aBunchOfFloats.asp" -->
</div><!-- make sure this closing tag starts a new line (MSIE5 Mac) -->

Demo:

This is the same example as our first "demo" (above), the only difference is that there is no white space in the markup for these ULs. See what happens when you hover over the "1st Set" and "2nd Set" Links.


Velit esse cillum dolore excepteur sint occaecat sed do eiusmod tempor incididunt. Cupidatat non proident, qui officia deserunt lorem ipsum dolor sit amet. Ut enim ad minim veniam, sunt in culpa duis aute irure dolor.

Strange bug that stacks up List Items.

In some cases, Lists may inherit a text-align value from a parent element. The easy fix is to style the List with the correct text-align declaration.