Internet Explorer 5 Mac: oddities

Phantom links

IE sometimes generates an active areas in the empty left-hand region of a block-level element when text-align is set to other than {text-align:left}. See the Codebitch page for more. A sample with {text-align:center} here. or anothe fine example: right–aligned text in a paragraph, some small parts of text are highlighted (a span with a background colour). When the span also contains a link (<span><a>text</a></span>), the width of the span is extended, and part of the preceding text is covered by the line box created by the link. Nesting the span inside of the link box (<a><span>text</span></a>) does avoid the problem however (screen shot).

What actually happens is: a block level element (eg. a <p>,...) has a declared value of {text-align:center}. The text-node is then moved to the center, but the line block created by the <a> tag is left flush left. A simplified testcase: sample A shows an inline list with borders on the <li>. Sample B shows the same list, but now the <li> contains link blocks. Notice how the list-items (the bordered boxes) are actually extended in IE mac. Screenshots.

Some possible solutions:

  1. Faking {text-align:center}. For IE Mac only (by using the backslash–in–comments hack), we set the text-alignment to left, and include a hefty padding on the left to move the whole box.
  2. Using some CSS2.1 property: {display: inline-block}. This is supported by IE5 mac. This requires to declare the width on each separate linkbox. It won't validate as yet (CSS2.1 is still a draft) (CSS 2.1 is now a Candidate Recomentation - update Feb 28, 2004). CSS is embeded. [update] By using {display: inline-block} on both the a and the li, it is possible to avoid setting a width altogether: demo. A width need to be declared on the a, but by combining it with white-space:nowrap, it is possible to limit the width to 1px. This little trick is also used in the last example below.
  3. A right-positioned navigation bar can be fixed by floating the parent container to the right. The example uses an unordered list. The <ul> is floated right; the <li> and the <a> are floated left. Note that this requires some slight hacking to please all browsers. View source for the css and some comments. This example is now quite old. A better example is this navigation list, which uses {display: inline-block}, for the various elements: <li> and <a>. The css is in the head of the document.

Note: solutions [1] and [2] are best used with a fairly static design, as they rely on optical effects.

section – contents

Also around here
[ Empty spaces ]
a weblog

This collection of documents and test cases related to Internet Explorer 5 for Mac is no longer maintained and is only kept online for historical reasons.

Comments and suggestions: are not needed anymore. Thanks to all who provided info and tips in the past.

File last updated: September 09, 2009.

back to top

permanent location: http://www.l-c-n.com/IE5tests/phantom-links/index.shtml.