When is an anchor a block element? Box model problem, and tough DOMquestion

[John Nagle]

Here's another one of those obscure Greasemonkey/Adwords related questions.

Google Adwords sometimes generates blocks of ads like this

DIV ad block
A ad link
DIV div surrounding text
#text ad text
A
DIV
#text
A
DIV
#text

This renders as if A were a "block" tag.
This isn't expressed as HTML source; it's created dynamically by Javascript.
If it were expressed as HTML, it would be wrong, because there's an A
tag (normally an inline element) enclosing a DIV (a block element).
Expressed as Javascript, one can argue about it. Large numbers of
Google generated ads do this.

Anyway, my problem is this. I'm attaching "rating icons" to each Google ad.
(See "http://www.sitetruth.com", if you're interested in the rating process.)
To do this, I wrap each A tag in the structure above with a DIV. So I get

DIV
DIV new DIV
DIV new DIV with Z value for new layer
A link to rating information
IMG rating icon in new layer
A original ad link
DIV original ad div
#text original ad text
DIV new DIV
DIV new DIV with Z value for new layer
A link to rating information
IMG rating icon in new layer
A
DIV
#text
DIV new DIV
DIV new DIV with Z value for new layer
A link to rating information
IMG rating icon in new layer
A
DIV
#text

This works fine, and doesn't change the appearance of the Google ads. The
rating icon is in a new, translucent layer, so that it doesn't mess up the
existing page layout. The problem is that, for some layouts, the new DIV
doesn't get the correct height or position. Instead of surrounding the ad's
A tag, it has zero height and is at the left margin for all the ads. That's
a violation of the box model. It's as if somehow its position wasn't
recomputed. This is in Firefox 2.

It's probably a Firefox bug. But I need a workaround. Do I need to
do something to force a recalc, or make modifications to the DOM in
a specific order, or something like that?

John Nagle
SiteTruth

 

[Thomas 'PointedEars' Lahn]

Here's another one of those obscure Greasemonkey/Adwords related questions.

Google Adwords sometimes generates blocks of ads like this

DIV ad block
A ad link
DIV div surrounding text
#text ad text
A
DIV
#text
A
DIV
#text

This renders as if A were a "block" tag.

`A' is _not_ a tag, it is an *element* (consisting of a start and an end tag
to enclose its content), and it is an inline element. The above parse tree
will never be generated, because the underlying markup is invalid. An `A'
(or `a') element MUST NOT contain block elements (which makes it an inline
element), including the `DIV' (or `div') element per *all* current (X)HTML DTDs.

http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.1
http://www.w3.org/TR/html4/struct/links.html#h-12.2

[...]
It's probably a Firefox bug.

Quite the contrary. Firefox's tag-soup parser, like any tag-soup parser,
tries to make the best of the nonsense it is being presented with. The
result of that, including the tree of DOM objects and their associated
properties, is not necessarily intuitive and consistent among user agents,
because UAs are given much freedom by the specification in how to process
invalid code.

http://www.w3.org/TR/html4/appendix/notes.html#h-B.1


PointedEars

 

[John Nagle]

The above parse tree
will never be generated, because the underlying markup is invalid.

Wrong again. Try

<a href="http://www.example.com">
<div>Test text.
</div>
</a>

in Firefox 2. The DOM generated is:

A
#text
DIV
#text

and the A element has a computed style of "display inline". Despite
that, it has the box model of a block. So, even though the
markup is not standard-compliant, the Firefox browser maintains proper
box nesting. But there are similar cases where the browser generates
box nesting errors. I haven't yet been able to generate this from
HTML directly, rather than with Javascript code that modifies the DOM.

Could someone with a clue answer this? Thanks.

John Nagle
SiteTruth

 

[Thomas 'PointedEars' Lahn]

Wrong again.

There have been instances where I have been wrong, yet I consider myself to
provide a correct answer most of the time, and therefore this comment would
be uncalled for.

Try

<a href="http://www.example.com"> <div>Test text. </div> </a>

in Firefox 2. The DOM generated is:

A
#text
DIV
#text

Unfortunately, you are right about this one. It isn't just a convenience of
the DOM Inspector. DIV.parentNode.tagName is "A". JFTR: It's very wrong
what Gecko does here. That's a *real* bug.

and the A element has a computed style of "display inline".

As it should have.

Despite that, it has the box model of a block.

It does not, not even in Quirks Mode.

<a style="border: 1px solid red">
<div id="foo">a</div>
</a>

does _not_ put the border around the "a", let alone spans it to the width of
the parent element as it should be. It does (and should) with

<div id="foo" style="border: 1px solid red">
<a>a</a>

So, even though the markup is not standard-compliant, the Firefox browser
maintains proper box nesting. But there are similar cases where the
browser generates box nesting errors.

As I said, you cannot expect consistent behavior with invalid markup.
Whether you believe it or not.


PointedEars