4 replies [Last post]
Big Bob
Offline
newbie
Last seen: 16 years 3 weeks ago
Timezone: GMT+8
Joined: 2005-04-15
Posts: 4
Points: 0

I expected this to be simple, but has really turned into a head-scratcher.

I simply have some spanned text inside of a link. I am having trouble with FF. Seems like FF doesn't think that what is in the span is part of the same link or even a link at all.

I am trying to get the background of both "Unspanned" and "Spanned" to change when I click on either of them.

Here is the code that I am currently working with

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>title</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<style type="text/css">
.xxx{
	background-color:#ffffff;
	color:#000000;
	font-weight: bold;
	padding:5px;
}

.xxx:link{
	background-color:#ff0000;
}

.xxx:visited{
	background-color:#ff4444;
}

.xxx:hover{
	background-color:#ff8888;
}

.xxx:active{
	background-color:#ffbbbb;
}


/*-----------------------*/

.xxx .bbb{
	background-color:blue;
	color:#000000
}

.xxx:link .bbb{
	background-color:aqua;
}

.xxx:visited .bbb{
	background-color:silver;
}

.xxx:hover .bbb{
	background-color:yellow;
}

.xxx:active .bbb, .xxx .bbb:active {
	background-color:green;
}

/*xxx:active .bbb, .xxx .bbb a:active{background-color:green;}*/


</style>
</head>
<body>
<a href="javascript:void(0)" class="xxx">No Span</a><br />
<br />
<br />
<a href="javascript:void(0)" class="xxx">Unspanned <span class="bbb">Spanned</span></a>
</body>
</html>

A few things about this.

The padding does not seem to work in IE when there is a span inside the link

FF does not seem to think that what is inside the span is a link. Note that there is no underline on "Spanned". This may explain some of the other behaviours.

To the point at hand.
Hovering and/or Clicking on "Unspanned" or "Spanned" in IE will cause the background to change.

Hovering over "Unspanned" or "Spanned" in FF will cause both backgrounds to change.

Clicking on "Unspanned" in FF with cause both backgrounds to change

Clicking on "Spanned" in FF will cause only the background of "Spanned" to change, but not the background of "Unspanned".

Any ideas on how to get the background of "Unspanned" to change when clicking "Spanned" ?

Thanks for any help

Big Bob
Offline
newbie
Last seen: 16 years 3 weeks ago
Timezone: GMT+8
Joined: 2005-04-15
Posts: 4
Points: 0

:active trouble with span nested in link

I corrected the DTD and the padding problems have cleared

still no solution to the :active spanned section in FF

Thanks again in advance

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type"
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />


<style type="text/css">
.xxx{
	background-color:#ffffff;
	color:#000000;
	font-weight: bold;
	padding: 5px 5px 5px 5px;
}

.xxx:link{
	background-color:#ff0000;
}

.xxx:visited{
	background-color:#ff4444;
}

.xxx:hover{
	background-color:#ff8888;
}

.xxx:active{
	background-color:#ffbbbb;
}


/*-----------------------*/

.xxx .bbb{
	background-color:blue;
	color:#000000
}

.xxx:link .bbb{
	background-color:aqua;
}

.xxx:visited .bbb{
	background-color:silver;
}

.xxx:hover .bbb{
	background-color:yellow;
}

.xxx:active .bbb, .xxx .bbb:active {
	background-color:green;
}

/*xxx:active .bbb, .xxx .bbb a:active{background-color:green;}*/



</style>
</head>
<body>
<a href="javascript:void(0)" class="xxx">No Span</a><br />
<br />
<br />
<a href="javascript:void(0)" class="xxx">Unspanned <span class="bbb">Spanned</span></a>
</body>
</html>

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 10 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

:active trouble with span nested in link

lose the xml prolog - it throws IE into quirks mode.

Big Bob
Offline
newbie
Last seen: 16 years 3 weeks ago
Timezone: GMT+8
Joined: 2005-04-15
Posts: 4
Points: 0

:active trouble with span nested in link

But I am not having any problems with IE, the problem is with Firefox.

Big Bob
Offline
newbie
Last seen: 16 years 3 weeks ago
Timezone: GMT+8
Joined: 2005-04-15
Posts: 4
Points: 0

:active trouble with span nested in link

Found the answer.
This is a known and fixed Firefox bug.
It has been fixed in the current, nightly build.
I am not sure when it will make it to a release.

See https://bugzilla.mozilla.org/show_bug.cgi?id=13258 [/url]