www.webdeveloper.com
Results 1 to 6 of 6

Thread: :active trouble with span nested in link

  1. #1
    Join Date
    Apr 2005
    Posts
    5

    :active trouble with span nested in link

    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:
    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="javascript:void(0)" class="xxx">abcdefgABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</a><br />
    <br />
    <br />
    <a href="javascript:void(0)" class="xxx">abcdefg<span class="aaa">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
    <br />
    <br />
    <a href="javascript:void(0)" class="xxx">abcdefg<span class="bbb">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
    <br />
    <br />
    <a href="javascript:void(0)" class="xxx">abcdefg<span class="ccc">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
    <br />
    <br />
    <a href="javascript:void(0)" class="xxx">abcdefg<span class="ddd">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
    <br />
    <br />
    <a href="javascript:void(0)" class="xxx">abcdefg<span class="eee">ABCDEFGHIJK<br />LMNOPQRSTUVWXYZ</span></a>
    <br />
    <br />
    <a href="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?!?!?!?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    You are missing a (valid) DTD
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Apr 2005
    Posts
    5
    Quote Originally Posted by Fang
    You are missing a (valid) 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)

  4. #4
    Join Date
    Apr 2005
    Posts
    5
    Getting closer.

    Here is the code that I am currently working with
    Code:
    <!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 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" ?

  5. #5
    Join Date
    Apr 2005
    Posts
    5
    I corrected the DTD and the padding problems have cleared

    still no solution to the :active spanned section in FF

    Thanks again in advance

    Code:
    <?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>

  6. #6
    Join Date
    Apr 2005
    Posts
    5
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles