Closed Bug 467395 Opened 13 years ago Closed 13 years ago

Hyperlinks containing a <div> tag sometimes ignore CSS styles

Categories

(Core :: DOM: HTML Parser, defect)

x86
Windows Vista
defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 324875

People

(Reporter: jperson, Unassigned)

References

()

Details

Attachments

(2 files)

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?
In this screen shot, the bug is seen.  The link "Buy GIS.NET 3.0" should look similar to other links on the page.
In this screen shot, the link appears correctly.  In any case where the bug appears, refreshing the page fixes the bug.
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → 1.9.0 Branch
I see it also in old browsers like Firefox 1, so this is not a recent regression.
Version: 1.9.0 Branch → Trunk
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.
> 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.
Status: UNCONFIRMED → RESOLVED
Closed: 13 years ago
Component: Layout → HTML: Parser
QA Contact: layout → parser
Resolution: --- → DUPLICATE
Duplicate of bug: 324875
You need to log in before you can comment on or make changes to this bug.