Unexpected text highlighting/underlining in FF

[fastbill]

Sorry for the long-winded tale of woe, but this one's really got me stumped :(.

I'm building a new website that currently has more than 75 pages. On one--and only one--page, Firefox does something unusual when the mouse passes over text or images: FF either displays an underline beneath the current text, or in some cases it changes the text color to blue (as if the text were a hyperlink). FF does not actually make the text become a hyperlink--it displays the normal I-beam text cursor. IE7 doesn't do anything unusual on this page. I'm running FF 3.0.3.

You can see this behavior throughout this page on my test site at
http://test.civicleague.net/t3/FCT-Shows.php.

Scroll down about 2/3 of the way, to "Our Next Production" -- no problem with this text line. As you move your mouse downward, the next 2 lines ("A Mystery...") become underlined. Moving further down, the next 2 lines ("An original...") become both blue text and underlined!

The HTML for this part of the page is:

<tr>
<td align="center" valign="top">
<p>
<span class="type16head">Our Next Production</span>
</p>
</td>
</tr>

<tr>
<td align="center" valign="top">
<a name="pirates" />
<p>
<span class="type16subhead">A Mystery Dinner Experience</span>
<br /><span class="type16head"><i>The Pirates of Framingham</i></span>
</p>
<p class="type16subhead">
An original stage play
<br />Written by the FCT Writers Group
</p>
...

The two styles are defined in a .css file this way:

.type16head {
font-size: 18px;
font-weight: bold;
color: #6E8869;
padding: 3px 8px 7px 8px;
text-align: left;
}
.type16subhead {
font-size: 14px;
font-weight: bold;
color: #6E8869;
}

It seems that if the "class=" attribute is in a <span>, FF underlines the text, and if the "class=" attribute is in a <p> it both underlines and changes to blue. I use these 2 "class=" values (type16head and type16subhead) throughout the site, and all other pages display normally in FF.

I do not see anything that would cause this unusual FF behavior, and would appreciate any and all suggestions.

Thanks!
fastbill

[Schmoopy]

I think I've found you're problem, you're not ending your <a> tags properly, you're putting
<a name="bla"/> and so the rest of your page is treated as a "a:hover" element, end these tags like this:

<a name="bla"></a>

That should get rid of your problem,

another note to take is that in your style.css file

"margin" is mispelt:


.magin {
padding:5px;
color: #333333; /* was #666666 */
}


You should correct this to "margin", hope this fixes your problem.

[Moshambi]

another note to take is that in your style.css file

"margin" is mispelt:


.magin {
padding:5px;
color: #333333; /* was #666666 */
}


You should correct this to "margin", hope this fixes your problem.

I dont think that would matter so much as it is a class so as long as when he calls the class inside the html he spells it the same way.

[Schmoopy]

Ohh, lol yea I get your point, I saw it as "magin" without a . preceding it, silly me :P

[fastbill]

Thanks very much! The suggestion from Schmoopy did solve the problem, though I do not see why. Tags that do not contain any text can usually be self-terminating. For example, all of my "image" tags look like this:

<img src="..." />

They work just fine. So, the anchor tag when used to name a point in the HTML should also be self-terminating, since no text is involved. That is, these should be equivalent:

<a name="bla" /> [Note that a space is required before the "/".]
<a name="bla"></a>

Any idea about why the first form fails, and the second form works? It almost seems to be a bug in Firefox 3.0.3, since the page displays correctly in IE7 with the self-terminating form of the <a> tag.

Thanks again,
fastbill

[Moshambi]

Well I don't really think that the <a> tag is self terminating, because you can use it to create a link without text but then no link would appear right? I'm just assuming of course.