Elod P Csirmaz’s Blog: April 2010

10 April 2010

Firefox makes DOM standard compliant on change

Firefox seems to take some liberties with the DOM: it inserts and closes
elements to make the structure (more) standard compliant, but only if something
is changed. As this does not seem to be done by any other major browser,
debugging problems caused by this can be tricky.

To take an example, the following code has block-level elements inside an inline
element:

<html>
<head>
</head>
<body>
<a href="#link">
<div id="container">text1</div>
<div>text2</div>
</a>
<script type="text/javascript">
document.getElementById('container').innerHTML='new text';
</script>
</body>
</html>

When the JavaScript runs, apart from modifying the content of the first DIV,
Firefox also inserts a new A element around the content:

<body>
<a href="#link">
<div id="container"><a>new text</a></div>
<div>text2</div>
</a>
<script type="text/javascript">
document.getElementById('container').innerHTML='new text';
</script>
</body>

Its behaviour is inconsistent: in structures similar to the above, it may also close
the outer A element before the opening DIV tag (and re-open it after the second
closing DIV tag again), making the whole structure wholly standard compliant.

Naturally, the easiest way to avoid this is to create standard-compliant code.
But it may be useful to be aware of this feature of Firefox, just in case.

2 April 2010

Transparent Links Are Not Clickable in IE

Oh yes, I forgot. Although it works fine in Firefox, in IE(8) you can't click on a transparent link placed on top of something else if there is something below it. Take, for example, the following code:
<div style="width:100px;height:100px; position:relative;border:1px solid blue;">
<div style="width:100px;height:100px;">content<br />content</div>
<a style="position:absolute;left:0;top:0; width:100px;height:100px;" href="link"></a>
</div>

Which produces:

content
content


In IE, you can't click on the link above the text. (It may work fine elsewhere.) Interestingly, giving a background colour to the A element makes it immediately clickable:
<div style="width:100px;height:100px; position:relative;border:1px solid blue;">
<div style="width:100px;height:100px;">content<br />content</div>
<a style="position:absolute;left:0;top:0; width:100px;height:100px; background-color:red;" href="link"></a>
</div>

content
content

Hence a possible solution: create a transparent image, and use it as a background image of the A element. It will work as expected.