CSS definitions for empty anchor tags propagate to other elements




15 years ago
15 years ago


(Reporter: tw_buckner, Unassigned)


Windows 2000

Firefox Tracking Flags

(Not tracked)





15 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040608
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040608

I noticed when editing HTML that style definitions for empty named anchors are
also reflecting in subsequent elemtents (paragraphs, list items, headings, but
not tables).  The anchors are named (ID and NAME attributes) but do not surround
other content, such as text.  It passes as valid XHTML (or HTML).  The problem
goes away  if you end the anchor around other content.  I pasted a complete HTML
example file below.  When it renders, colors specified for the named anchors
also render when you hover the cursor over paragraphs, lists, and some other
elements (not tables, however).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">

body, h1, h2, h3, h4, p, table, td, caption, th, ul, ol, dl, li, dd, dt
{font-family: sans-serif; color: #000000}
pre		  { font-family: monospace}
a:link    { color: #0000ff }
a:visited { color: #0000ff }
a:hover   { color: #0000ff }
body	  { background: #FFFFFF}
h2        { font-size: 18pt; margin-top: 5; margin-bottom: 1 }
h3        { font-size: 14pt; margin-top: 5; margin-bottom: 1 }
p         { margin-top: 10px; margin-bottom: 10px }



<h2><a id="top" name="top" />Head 2</h2>

<hr />

<li>List item 1: <a href="index.html">Link to this file</a></li>
<li>List item 2: <a href="http://www.mozilla.org">Link to Mozilla</a></li>
<li>List item 3: <a href="http://www.microsoft.com">Link to Microsoft</a></li>
<li>List item 4: <a href="http://www.w3c.org">Link to W3C</a></li>

<p>another paragraph</p>

<h3><a id="h3" name="h3" />Here comes a table</h3>

<table border="1" cellpadding="5">
<tr><th>table header 1</th><th>table header 2</th></tr>
<tr><td>table cell 1</td><td>table cell 2</td></tr>


Reproducible: Always
Steps to Reproduce:
1. Copy the HTML from the problem details into a file and save as HTML.
2. Open the saved file in Mozilla.
3. Hold the mouse cursor over various elements in the page (paragraphs, etc) and
notice the color change.  These colors are not defined for these elements.
4. Edit the HTML and wrap the empty named anchors around the nearest text and save.
5. Repeat steps 2 and 3.  The problem goes away.

Actual Results:  
CSS definitions for anchor elements are also rendered for other elements.  In
this example, hovering the mouse cursor over a paragraph or list item, the text
turns blue.  Subsequent anchors that wrap around text seem to turn this behavior
off (does not work for list item 2, for example).

Expected Results:  
As the style definitions indicate, the color for the other elements should only
have rendered black, even when the mouse cursor is positioned over them.

Comment 1

15 years ago
Unless you're serving your page as application/xhtml+xml, this is invalid.

The page is most likely served as text/html, which means it is parsed as HTML. 
So you cannot use XML closing syntax on a tag that requires a separate closing tag.

This is also prohibited by the spec.  See http://www.w3.org/TR/xhtml1/#C_3
Last Resolved: 15 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.