Forums
View unanswered posts | View active topics It is currently Sun Nov 23, 2014 8:48 pm



Reply to topic  [ 1 post ] 
 a:active style not working as expected 
Author Message

Joined: Tue Nov 13, 2012 8:39 am
Posts: 2
Post 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>


Tue Nov 13, 2012 11:54 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: Yahoo [Bot] and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.