No replies
rain
Offline
newbie
Last seen: 15 years 2 weeks ago
Joined: 2004-11-26
Posts: 1
Points: 0

I'm trying to create a row of buttons in a generated file that can be included on a number of pages. This means the text on the button varies according to the page it is included in. The buttons are created with three images (the middle one repeating to create the background for the text on the button). I want to simulate the button being pressed without using javascript to replace the images as the number and type of buttons can constantly change.

The simplified css I have below works perfectly to simulate the button press using a:hover but if I change this to a:active (so that the button only appears depressed when the link is clicked on), the
link seems to be disabled because of the height specified on the line
commented below. Without the height specified the images do not
display correctly.

The html generated for each button is:

<a href="newpage.html"><span class="leftSide"></span><span class="back">Button A</span><span class="rightSide"></span></a>

I'm not terribly familiar with css but I can't find out why specifying the height is causing this problem. Any ideas as to why and how I could get the code to work?

Thanks in advance...

.leftSide { 
  display:inline-block;
  vertical-align:middle;
  width: 3px;
  height: 25px;
  background: url("GreyLeftSide.gif") left top no-repeat;
}
.back {
  color: #000;
  padding: 4px 3px 0px 3px;
  font-family:Verdana, Arial, Helvetica, sans-serif; 
  font-size:8pt; 
  font-weight: bold; 
  text-decoration: none; 
  vertical-align:middle;
  white-space:nowrap;
  overflow: visible;
  height: 25px; /*Removing this line gives the correct behaviour but the background image is the wrong size */
  background: url("GreyBack.gif") left top height:25px;
}

a:active span.leftSide { 
  padding-left: 1px;
  background: url("GreyLeftSideActive.gif") left top no-repeat ;
}  
a:active span.back { 
  padding-left: 1px;
  background: url("GreyBackActive.gif") left top;
}