CSS3 PIE Forums
http://css3pie.com/forum/

a:active style not working as expected
http://css3pie.com/forum/viewtopic.php?f=3&t=1849
Page 1 of 1

Author:  amnotafraid [ Tue Nov 13, 2012 11:54 am ]
Post subject:  a:active style not working as expected

I want to make a button for a kiosk application (touch screen) that has rounded corners, a background gradient, and shadowed text. PIE has been VERY useful in getting the rounded corner and gradient to work together in IE9. Thank you!

When the user touches the button (clicks on it, if they have a mouse), I want to change the background gradient so that it looks like the button is pressed in. (See an example here that is similar to what I want: http://www.rlc.dcccd.edu/Kiosk/index.php?KioskType=full)

Using PIE, I tried styling [class]:active, but was not successful getting the background to change when the button was clicked. Is there a way to do this?

Boring details and codeThe code below will make two buttons--one with an anchor around the button div (Anchor Outside) and another with the anchor around the just the text (Anchor Inside) in the button. Here are the results of this code in each browser:

IE9: Neither button changes when clicked
Chrome: Both buttons change when clicked (desired). Anchor outside has an underline on text (not desired)
Firefox: Both buttons change when clicked (desired).
Opera: Anchor outside changes when clicked (desired). Anchor inside does not change when clicked.
Safari: Similar to Chrome. Both buttons change when clicked (desired). Anchor outside has an underline on text (not desired)

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head> 
   <meta charset="utf-8" />
   <title>Test Button</title>
   <style>
.main_button {
  border: 1px solid #b7b7b7;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 1% 2%;
  padding: 0.5em;
  float: left;
  text-align: center;
  color: white;
  background-color: #21515d;
  width: 27%;
  height: 3em;
  behavior: url(PIE.htc);
  background-image: -webkit-linear-gradient(top, #d3d3d3, #707070);
  background-image: -moz-linear-gradient(top, #d3d3d3, #707070);
  -pie-background: linear-gradient(top, #d3d3d3, #707070); }

.main_button:active {
  border: 1px solid #a0a0a0;
  background-color: #707070;
  behavior: url(PIE.htc);
  background-image: -webkit-linear-gradient(top, #707070, #d3d3d3);
  background-image: -moz-linear-gradient(top, #707070, #d3d3d3);
  -pie-background: linear-gradient(top, #707070, #d3d3d3); }

.main_button a {
  color: white;
  text-decoration: none; }

.main_button a:active {
  outline: none; }

a:active {
  text-decoration: none; }

div.button_text {
  font-weight: bold;
  text-decoration:none;
  line-height: 3em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); }

#IEroot div.button_text {
  font-weight: normal;
  line-height: 3em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  zoom: 1;
  background-color: #cccccc;
  -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc) progid:DXImageTransform.Microsoft.DropShadow(Color='#60000000', OffX=-1, OffY=-1)";
  filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc) progid:DXImageTransform.Microsoft.DropShadow(OffX=-1, OffY=-1, Color='#60000000'); }

   </style>
</head>

<body id="home">
   <!--[if IE]>
   <div id="IEroot">
   <![endif]-->
   <a href="testButton.html">
    <div class="main_button">
      <div class="button_text">
        Anchor outside
      </div>
    </div>
   </a>
   
  <div class="main_button">
    <div class="button_text">
      <a href="testButton.html">Anchor inside</a>
    </div>
  </div>
   
   <!--[if IE]>
   </div>
   <![endif]-->   
</body>
</html>

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/