Miscellaneous bugs noticed in IE6 and/or IE7

JavaScript: href overwrites contents for mailto: scheme

If a JavaScript applet appends to the href attribute of a link object that has a href starting in mailto: and contains an @ symbol in its link text, the modified href will replace the link text as well.

I have also posted this bug to an MSDN forum.

an @symbol among some other words

<body onload="document.getElementById('mailLink').href += '?subject=Bug';">
<p><a id="mailLink" href="mailto:some.address">an
@symbol among some other words</a></p>
</body>

Three CSS bugs

I have posted the following three bugs to an MSDN forum in a single post.

CSS: skipped first line, influenced by border

In this strange scenario, the two list items are exactly alike except for the border in one of them. Still they render different on IE6 and IE7, where the first one without the border will occupy two lines and place the bar into the second line. IE6 will even omit the bullet of the list item, which IE7 does supply—at least if you have some whitespace between the inner div elements.

foo

bar
foo

bar

<ul>
<li>
<div style="position: relative;">
<div style="position: absolute;">foo</div>
<div style="padding-left: 10em;">bar</div>
</div>
</li>
<li>
<div style="position: relative; border: 1px solid black;">
<div style="position: absolute;">foo</div>
<div style="padding-left: 10em;">bar</div>
</div>
</li>
</ul>

CSS: margin of nested div influences position of bullet

It looks like IE would place the bullet always next to the block containing its first child element, even if that has some extra margin.

The CSS2.1 specs say that the marker box should be outside the principal block box.

First item
Second item
which has a second line as well.
Third item

<ul>
<li style="border: 1px solid green;">First item</li>
<li style="border: 1px solid black;"><div
    style="margin-left: 5em;">Second item</div>
    which has a second line as well.</li>
<li style="border: 1px solid green;">Third item</li>
</ul>

CSS: relative position takes padding of parent into account

The following example should read foo bar and not the other way round. The bar is directly inside the bordered div, which has a 10em left padding. The foo is in a nested div with absolute position and a left offset of 5em, which should be measured from the border of the enclosing div, not including the padding. This issue seems to be solved in IE7.

bar

foo

<div style="position: relative; padding-left: 10em; border: 1px solid black;">
bar<div style="position: absolute; left: 5em; top: 0px;">foo</div>
</div>