Link to home
Start Free TrialLog in
Avatar of leena42
leena42

asked on

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
Avatar of LZ1
LZ1
Flag of United States of America image

IE 7 does not fully support the active selector.
http://www.quirksmode.org/css/contents.html#t16 
 
Avatar of leena42
leena42

ASKER

Not even on a tags?
Avatar of leena42

ASKER

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

ASKER CERTIFIED SOLUTION
Avatar of leena42
leena42

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
In case anyone comes across this, IE 7 does have a background position bug, however it is not well documented.  
Avatar of leena42

ASKER

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....
Avatar of leena42

ASKER

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....