I have a span nested inside of a link. I can't get the :active psudo-class to fire for the spanned part of the link in Firefox. It is working the way I think it should in IE. Probably easier to look at some code:
<html>
<head>
<style type="text/css">
.xxx{
background-color:#00ffff;
color:#000000
}
.xxx:link{
background-color:#ff0000;
}
.xxx:visited{
background-color:#ff4444;
}
.xxx:hover{
background-color:#ff8888;
}
.xxx:active{
background-color:#ffbbbb;
}
/*-----------------------*/
.aaa{
background-color:#ffff00;
color:#000000
}
.aaa:link{
background-color:#00ff00;
}
.aaa:visited{
background-color:#44ff44;
}
.aaa:hover{
background-color:#88ff88;
}
.aaa:active{
background-color:#bbffbb;
}
/*-----------------------*/
/*almost. active doesn't work in the span*/
.xxx .bbb{
background-color:#ffff00;
color:#000000
}
.xxx:link .bbb{
background-color:#00ff00;
}
.xxx:visited .bbb{
background-color:#44ff44;
}
.xxx:hover .bbb{
background-color:#88ff88;
}
.xxx:active .bbb{
background-color:#bbffbb;
}
/*-----------------------*/
.xxx .ccc{
background-color:#ffff00;
color:#000000
}
.xxx .ccc:link{
background-color:#00ff00;
}
.xxx .ccc:visited{
background-color:#44ff44;
}
.xxx .ccc:hover{
background-color:#88ff88;
}
.xxx .ccc:active{
background-color:#bbffbb;
}
/*-----------------------*/
.xxx .ddd{
background-color:#ffff00;
color:#000000
}
.xxx:link .ddd:link{
background-color:#00ff00;
}
.xxx:visited .ddd:visited{
background-color:#44ff44;
}
.xxx:hover .ddd:hover{
background-color:#88ff88;
}
.xxx:active .ddd:active{
background-color:#bbffbb;
}
/*-----------------------*/
a .eee{
background-color:#ffff00;
color:#000000
}
a:link .eee{
background-color:#00ff00;
}
a:visited .eee{
background-color:#44ff44;
}
a:hover .eee{
background-color:#88ff88;
}
a:active .eee{
background-color:#bbffbb;
}
/*-----------------------*/
a.xxx .fff{
background-color:#ffff00;
color:#000000
}
a .xxx:link .fff{
background-color:#00ff00;
}
a .xxx:visited .fff {
background-color:#44ff44;
}
a .xxx:hover .fff{
background-color:#88ff88;
}
a .xxx:active .fff{
background-color:#bbffbb;
}
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">abcdefgABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</a><br />
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">abcdefg<span class="aaa">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">abcdefg<span class="bbb">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">abcdefg<span class="ccc">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">abcdefg<span class="ddd">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">abcdefg<span class="eee">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">abcdefg<span class="fff">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
</body>
</html>
I have tried all sorts of combinations, and the closest I have come to success (my definition) is the third example. All of the states work well in IE. In Firefox, the active state shows when clicking on the first part of the link, but not when clicking on the spanned portion.
What I am I missing here?!?!?!?You are missing a (valid (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->)) DTDYou are missing a (valid (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->)) DTD
-slapping head-
I think you may be onto something. Old habits die hard when one is in a hurry.
Quick test an this seems to be working, mostly.
Will report back later with final results
Thank you very much.
(I hate it when it is something stupid like this)Getting closer.
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=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">No Span</a><br />
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">Unspanned <span class="bbb">Spanned</span></a>
</body>
</html>
A few things about this current version.
I changed the colors to make them easier (on my monitor) to see the changes
Added some padding. 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" ?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=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">No Span</a><br />
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">Unspanned <span class="bbb">Spanned</span></a>
</body>
</html>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 <!-- m --><a class="postlink" href="https://bugzilla.mozilla.org/show_bug.cgi?id=13258">https://bugzilla.mozilla.org/show_bug.cgi?id=13258</a><!-- m -->
<html>
<head>
<style type="text/css">
.xxx{
background-color:#00ffff;
color:#000000
}
.xxx:link{
background-color:#ff0000;
}
.xxx:visited{
background-color:#ff4444;
}
.xxx:hover{
background-color:#ff8888;
}
.xxx:active{
background-color:#ffbbbb;
}
/*-----------------------*/
.aaa{
background-color:#ffff00;
color:#000000
}
.aaa:link{
background-color:#00ff00;
}
.aaa:visited{
background-color:#44ff44;
}
.aaa:hover{
background-color:#88ff88;
}
.aaa:active{
background-color:#bbffbb;
}
/*-----------------------*/
/*almost. active doesn't work in the span*/
.xxx .bbb{
background-color:#ffff00;
color:#000000
}
.xxx:link .bbb{
background-color:#00ff00;
}
.xxx:visited .bbb{
background-color:#44ff44;
}
.xxx:hover .bbb{
background-color:#88ff88;
}
.xxx:active .bbb{
background-color:#bbffbb;
}
/*-----------------------*/
.xxx .ccc{
background-color:#ffff00;
color:#000000
}
.xxx .ccc:link{
background-color:#00ff00;
}
.xxx .ccc:visited{
background-color:#44ff44;
}
.xxx .ccc:hover{
background-color:#88ff88;
}
.xxx .ccc:active{
background-color:#bbffbb;
}
/*-----------------------*/
.xxx .ddd{
background-color:#ffff00;
color:#000000
}
.xxx:link .ddd:link{
background-color:#00ff00;
}
.xxx:visited .ddd:visited{
background-color:#44ff44;
}
.xxx:hover .ddd:hover{
background-color:#88ff88;
}
.xxx:active .ddd:active{
background-color:#bbffbb;
}
/*-----------------------*/
a .eee{
background-color:#ffff00;
color:#000000
}
a:link .eee{
background-color:#00ff00;
}
a:visited .eee{
background-color:#44ff44;
}
a:hover .eee{
background-color:#88ff88;
}
a:active .eee{
background-color:#bbffbb;
}
/*-----------------------*/
a.xxx .fff{
background-color:#ffff00;
color:#000000
}
a .xxx:link .fff{
background-color:#00ff00;
}
a .xxx:visited .fff {
background-color:#44ff44;
}
a .xxx:hover .fff{
background-color:#88ff88;
}
a .xxx:active .fff{
background-color:#bbffbb;
}
</style>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">abcdefgABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</a><br />
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">abcdefg<span class="aaa">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">abcdefg<span class="bbb">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">abcdefg<span class="ccc">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">abcdefg<span class="ddd">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">abcdefg<span class="eee">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">abcdefg<span class="fff">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
</body>
</html>
I have tried all sorts of combinations, and the closest I have come to success (my definition) is the third example. All of the states work well in IE. In Firefox, the active state shows when clicking on the first part of the link, but not when clicking on the spanned portion.
What I am I missing here?!?!?!?You are missing a (valid (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->)) DTDYou are missing a (valid (<!-- m --><a class="postlink" href="http://www.w3.org/QA/2002/04/valid-dtd-list.html">http://www.w3.org/QA/2002/04/valid-dtd-list.html</a><!-- m -->)) DTD
-slapping head-
I think you may be onto something. Old habits die hard when one is in a hurry.
Quick test an this seems to be working, mostly.
Will report back later with final results
Thank you very much.
(I hate it when it is something stupid like this)Getting closer.
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=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">No Span</a><br />
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">Unspanned <span class="bbb">Spanned</span></a>
</body>
</html>
A few things about this current version.
I changed the colors to make them easier (on my monitor) to see the changes
Added some padding. 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" ?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=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">No Span</a><br />
<br />
<br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript:void(0)" class="xxx">Unspanned <span class="bbb">Spanned</span></a>
</body>
</html>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 <!-- m --><a class="postlink" href="https://bugzilla.mozilla.org/show_bug.cgi?id=13258">https://bugzilla.mozilla.org/show_bug.cgi?id=13258</a><!-- m -->