Box dimensions of SPAN in JavaScript seem incorrect (Firefox 2)

[John Nagle]

I'm writing a Greasemonkey script which, among other things, puts a
SPAN element around some A tags. Sometimes, though, the height of the
SPAN element is smaller than that of the enclosing element.

The relevant portion of the DOM looks like this:

DIV (x=71,y-441, w=780, h=8)
#text
SPAN (x=71,y=441, w=780, h=2)
A (x=72,y=442, w=91. h=52)
STRONG
#text
P
#text
SPAN
#text

The position and size given are from the Firefox 2 DOM inspector.

Note that the SPAN tag is too wide and not high enough to enclose its contents.
Why is this happening? Usually, the SPAN tag encloses its contents, but not here.

Absolute positioning and layers don't seem to be involved; none of the
items below the first SPAN have a class, and that SPAN doesn't specify
size, position, or layer.

What I'd like to do is to compute the enclosing box for everything
below the SPAN, regardless of of absolute positioning, etc. Is there
any way to do this?

(What I'm doing, of course, is adding annotation information to A tags on
other web pages, using Greasemonkey. Most of the time, putting a SPAN
around the link properly encloses the link with a box, but not always.)

John Nagle

 

[David Mark]

   I'm writing a Greasemonkey script which, among other things, puts a
SPAN element around some A tags.  Sometimes, though, the height of the
SPAN element is smaller than that of the enclosing element.

        The relevant portion of the DOM looks like this:

        DIV                     (x=71,y-441,w=780, h=8)
            #text
            SPAN                (x=71,y=441, w=780, h=2)        
                A               (x=72,y=442, w=91. h=52)
                    STRONG
                        #text
                    P
                        #text
                    SPAN
                        #text

The position and size given are from the Firefox 2 DOM inspector.

A paragraph inside an anchor inside a span? That isn't right.

Note that the SPAN tag is too wide and not high enough to enclose its contents.
Why is this happening?  Usually, the SPAN tag encloses its contents, butnot here.

There's no telling with markup like that.

Absolute positioning and layers don't seem to be involved; none of the
items below the first SPAN have a class, and that SPAN doesn't specify
size, position, or layer.

What I'd like to do is to compute the enclosing box for everything
below the SPAN, regardless of of absolute positioning, etc.  Is there
any way to do this?

I don't follow that.

 

[John Nagle]

A paragraph inside an anchor inside a span? That isn't right.

I know, I can read the spec too.

Unfortunately, that's what Google AdWords does to the DOM. Try,
for example, "http://vids.myspace.com/" (The layout changes every few
minutes; keep trying until you get four ads at the bottom.) That's why
most Google text ads are clickable anywhere in the ad, not just on the actual
link text.

In fact, many Google AdWords ads have a P element within an A element in
the DOM. Firefox seems to update the SPAN sizes properly for a vertical
column of Google ads, but not for a horizontal row of ads. If you want
to see this, use the DOM inspector, get to the A tag around a Google ad,
and watch the flashing red box around the selected area. For vertical
blocks of Google AdWords it's right; for horizontal blocks, it's wrong.

Interestingly, not all Google AdWords blocks work that way.
See, for example, "http://www.w3schools.com/tags/tag_span.asp".
There, blocks of ads are in a TABLE, not a DIV. Each ad has
two A elements, and they contain only inline elements.

I don't follow that.

Think of it this way: If I put a CSS style with a border on the
SPAN element, the border should surround the ad. (This is just
for debugging; the real goal is to put some annotation about
the advertiser on the ad.)

Is this a "bubbling" problem, where, for some reason, the box
for the A tag wasn't recalculated?

John Nagle
SiteTruth

 

[David Mark]

    I know, I can read the spec too.

Hopefully you don't have to in this extreme case.

    Unfortunately, that's what Google AdWords does to the DOM.  Try,

Google. It figures. They must have an incompetents-only hiring
policy. It is amazing that a company that cannot produce competent
markup or JavaScript could lead the Internet advertising industry.

for example, "http://vids.myspace.com/" (The layout changes every few
minutes; keep trying until you get four ads at the bottom.)  That's why
most Google text ads are clickable anywhere in the ad, not just on the actual
link text.

That is something that could easily be accomplished without resorting
to hideously deformed markup.

    In fact, many Google AdWords ads have a P element within an A element in
the DOM.  Firefox seems to update the SPAN sizes properly for a vertical
column of Google ads, but not for a horizontal row of ads.  If you want
to see this, use the DOM inspector, get to the A tag around a Google ad,
and watch the flashing red box around the selected area.  For vertical
blocks of Google AdWords it's right; for horizontal blocks, it's wrong.

    Interestingly, not all Google AdWords blocks work that way.
See, for example, "http://www.w3schools.com/tags/tag_span.asp".
There, blocks of ads are in a TABLE, not a DIV.  Each ad has
two A elements, and they contain only inline elements.

The only consistency with Google's systems is that they are
consistently wrong. Why would a block of ads be a table? At some
point, they must have changed their corporate mantra from "don't be
evil" to "don't do anything right."

     Think of it this way: If I put a CSS style with a border on the
SPAN element, the border should surround the ad.  (This is just
for debugging; the real goal is to put some annotation about
the advertiser on the ad.)

But realize that inline elements are not always bounded by a rectangle
(i.e. they can wrap.)

     Is this a "bubbling" problem, where, for some reason, the box
for the A tag wasn't recalculated?

This has nothing to do with (event) bubbling or anything related to
JavaScript. You might try posing this question to an HTML authoring
group, but you will likely get the answer that you cannot predict the
rendering of a block-level element inside of an inline element (or any
other invalid markup.)

Or you could complain to a group frequented by Google developers, but
I can tell you from experience that they will not listen. Lately
their mantra seems to be "see no evil, hear no evil, etc."