467395 - Hyperlinks containing a <div> tag sometimes ignore CSS styles

Status: RESOLVED DUPLICATE of bug 324875

(Core :: DOM: HTML Parser, defect)

Description

[J. Person]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

This is an intermittent bug.  When following a hyperlink, a page will sometimes not apply CSS styles to <div> tags which are within an <a> tag.  It appears that font sizes and colors are not applied.  When this problem occurs, refreshing the page seems to fix the problem.  

We use <div> tags inside of <a> tags to create a "command link," a hyperlink in the form of a rectangle which contains an image, a title, and a description.  We realize that placing tags inside of an <a> tag bends the rules, but it has been working well across all browsers.  The HTML we use looks like this for each link:

<a class="CommandLink" href="Page.html" title="Visit a Page">
  <div class="Body">
    <img src="LinkImage.png" />
    <div class="Right">
      <div class="Title">Visit a Page</div>
      You can learn more about something by clicking this link.
    </div>
  </div>
</a>
 
... 

Reproducible: Sometimes

Steps to Reproduce:
The fastest way to witness this bug would be to browse a web site already using this pattern of HTML.  I've captured a couple of screen shots which demonstrate the glitch:

1.  View the screen shot: http://www.geoframeworks.com/FireFox/Example1.jpg

... in this screen shot, the link "Buy GIS.NET 3.0" has no CSS styling applied, unlike the other similar links on the page.  If you were to refresh the page, however, the link would appear properly, looking like this second screen shot:

2. View the screen shot: http://www.geoframeworks.com/FireFox/Example1_a.jpg

... it appears that the "missing CSS" problem only occurs when you click and follow a hyperlink.

The HTML for each link on the page follows the HTML pattern in the "Details" section.

1. Visit http://www.geoframeworks.com
2. 

1. Create about 3 pages using the HTML pattern listed above.  Use CSS to apply styles 

The best way to reproduce this error would be to have multiple links using this pattern of HTML.  Or, you can see this in action at our web site: http://www.geoframeworks.com.  You should see the bug appear after clicking about 4-5 links on the site.

Actual Results:  
When following a link which uses the HTML pattern in the "Details" section, styles which set the font size and color for the link are not applied.  It appears that the style for the <a> tag is somehow overriding the style of the <div> tags it contains.

Expected Results:  
The style of the <div> tags inside of an <a> tag should always be applied.  

I believe I have a hunch as to what is causing this bug.  I believe that in rare cases the style of an <a> tag is applied *after* styles are applied to content inside of the tag.  This effectively clobbers styles inside of the tag.  

This appears to be a timing issue.  Since we use a <link> tag to specify a CSS stylesheet, I wonder if styles are being applied before the CSS stylesheet file has been loaded?

Comment 1

[J. Person]

Attachment: An example of a hyperlink in which CSS styles are not applied to the tags within a hyperlink.

In this screen shot, the bug is seen.  The link "Buy GIS.NET 3.0" should look similar to other links on the page.

Comment 2

[J. Person]

Attachment: An example of the proper appearance of the page.

In this screen shot, the link appears correctly.  In any case where the bug appears, refreshing the page fixes the bug.

Comment 3

[Ria Klaassen (not reading all bugmail)]

I see it also in old browsers like Firefox 1, so this is not a recent regression.

Comment 4

[Ria Klaassen (not reading all bugmail)]

You can reproduce it easily by pasting http://geoframeworks.com/Shop/Default.aspx in the locationbar, and on this page, remove the Default.aspx part. Navigating between those two addresses shows the problem.

Comment 5

[Jesse Ruderman]

> We realize that placing tags inside of an <a> tag bends the rules, but it has
> been working well across all browsers.

Placing inline-level tags inside <a> tags is fine.  But placing block-level tags inside <a> brings you dangerously close to situations that require "residual style" handling, which every browser does differently.  It's better to make the <a> (and children, if needed) be display:block using CSS.

http://ln.hixie.ch/?start=1138169545&count=1 explains this in detail.  

That said, Firefox is obvious being buggy here, since it is inconsistent with itself.  I think this is the "or, for that matter, if the TCP/IP packet boundary happens to fall in the wrong place" case mentioned in that blog post.