292192 - CSS bug: HTML entity codes in the "content" property render as raw code

Status: RESOLVED DUPLICATE of bug 207461

(Firefox :: General, defect)

Description

[Berkana]

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.7) Gecko/20050414 Firefox/1.0.3
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.7) Gecko/20050414 Firefox/1.0.3

In a web page I built (updated version soon to be online at
http://www.namisanmateo.org/) I use the CSS property known as "content" to
insert text in the text next to the logo as it is moused over. The problem is,
one of the characters I want to insert is the "em-dash", whose HTML entity code
is —, or —. The browser does not render the resulting mouse-over
content addition as an em-dash though; it renders whatever entity code I typed
into the content property as the code, rather than the entity the code stands for.

My CSS style rule for this is as follows:
==================================================
a:hover h1.with_logo #citystyle:after{
	content: "—Homepage";} 
==================================================

And the HTML (specifically xhtml 1.0) it styles is as follows:
==================================================
<a href="/" title="NAMI San Mateo County Home">
  <h1 class="with_logo">
    <acronym>NAMI</acronym> <span id="citystyle">San Mateo County</span>
  </h1>
</a>
==================================================
This doesn't just happen with that particular entity code; it happens for other
entity codes I've tried (&aelig;), whether the numeric or the abreviated code is
used.

Reproducible: Always

Steps to Reproduce:
1.Create a text-bearing element (h1 for example)
2.Wrap it in an <a> element
3.create a CSS style rule with the selector: a:hover h1:after{. . . }
4.give the style rule the following property: content: "&mdash;Home";
5.load the page, and mouse-over the <a> element.
Actual Results:  
When mousing over the text, the inserted content shows up (good so far), but the
HTML entity code "&mdash;" does not render as an em-dash. It shows up as the raw
code "&mdash;". This happens for other entity codes as well.

Expected Results:  
I expected the special character entity code to render as the special character
entity, not as the raw code.

My CSS style rule for this is as follows:
==================================================
a:hover h1.with_logo #citystyle:after{
	content: "&mdash;Homepage";} 
==================================================

And the HTML (specifically xhtml 1.0) it styles is as follows:
==================================================
<a href="/" title="NAMI San Mateo County Home">
  <h1 class="with_logo">
    <acronym>NAMI</acronym> <span id="citystyle">San Mateo County</span>
  </h1>
</a>
==================================================
This doesn't just happen with that particular entity code; it happens for other
entity codes I've tried (&aelig;), whether the numeric or the abreviated code is
used.

I guess the work-around is to use JavaScript, but I don't know enough JavaScript
to do this. Alternatively, I could simply replace the text with an image of the
text as the background to the div and swap that, but I want to use text, not
images, for accessibility and bandwidth savings. As it stands, there's no way to
make special character HTML entities show up using the content property.

Comment 1

[Erik Fabert]

*** This bug has been marked as a duplicate of 207461 ***