Ie7 CSS background-postion not changing on a:active

Hi there,

I am trying to get my a tags to change the background-position on a:active.  It seems to work in IE8 but not in IE7.  I have tested it with background-color in ie6, 7, 8 and it seems to work.  Any ideas would be greatly appreciated.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
<!--

     .shared_button
     {
            text-align: center;
            color: White;
            font-family: Trebuchet MS, Arial, Verdana, Sans-Serif;
            font-size: 14px;
            cursor: pointer;
            font-weight: bold;
            display: inline-block;
            height: 25px;
            line-height: 1.5;
       }
    
     .shared_buttonExtraLarge
      {
            border-style: none;
            border-color: inherit;
            border-width: 0;
            margin-top: 10px;
            width: 181px;
           background-image: url(ExtralargeBlueButton.jpg);
       }

     

     a.shared_button:hover
     {
          background-position: center;
          color: White;
     } 

     
     a.shared_button:active
     {
          background-position: bottom;
          color: White;      
     }

-->
</style>
</head>
<body>
     <a class="shared_buttonExtraLarge shared_button">Change Location</a>
</body>

Open in new window

ExtralargeBlueButton.jpg
leena42Asked:
Who is Participating?
 
leena42Connect With a Mentor Author Commented:
the a tage needed: href="something"

0
 
LZ1Commented:
IE 7 does not fully support the active selector.
http://www.quirksmode.org/css/contents.html#t16 
 
0
 
leena42Author Commented:
Not even on a tags?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
leena42Author Commented:
If you just change the colour it will change in ie7.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
	a.test {background-color:#00FFFF; display:block;}
	a.test:hover {background-color: #0099FF; }
	a.test:active {background-color: #888888; }	
</style>
</head>

<body>

	<a class="test" href="#">Hello, I am a link :) </a>
</body>
</html>

Open in new window

0
 
LZ1Commented:
In case anyone comes across this, IE 7 does have a background position bug, however it is not well documented.  
0
 
leena42Author Commented:
I figured out what the problem was and decided to post it so if anyone else was having this problem they would see the solution. It was so simple and silly....
0
 
leena42Author Commented:
I figured out what the problem was and decided to post it so if anyone else was having this problem they would see the solution. It was so simple and silly....
0
All Courses

From novice to tech pro — start learning today.