Question : cant get css buttons to work

Hi,

I would like to add some effects to my buttons and i got some code and the gif, but just cannot seem to get it to work, i have attached the code, if someone could point me in the right direction i would be very grateful!

the page is here http://haughtons.actionit.ie/one.html

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:



<!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" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script> 
<title>Haughton Exhibitions</title>
<style type="text/css">
<!--
.container {
	height: 768px;
	width: 1024px;
	margin-right: auto;
	margin-left: auto;
	background-color: #D2D3D5;
	background-image: url(testing.jpg);
}
.menu {
	height: 50px;
	width: 870px;
	padding-top: 40px;
	padding-left: 60px;
	font-size: 24px;
}
.content {
	width: 640px;
	height:550px;
	float: left;
	padding-left:60px;
}
.content2 {
	width:268px;
	height:550px;
	float: right;

}
body {
	background-color: #D2D3D5;
}
.container .content2 table {
	text-align: right;
}
.containright {
	right: auto;
}
tr th {
	text-align: right;
}
body,td,th {
	color: #72B242;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}
#container1  {
width: 600px;
   height: 340px;
   margin: 0px auto;
   margin-bottom: -120px;
   padding: 10px;
   background-color: #6DA740;
}  
}
.right1 {
	text-align: right;
}
.contact_button { width: 94px; height: 96px; font-size: 0; text-indent: -9999px; overflow: hidden; background: url(Contact.gif) top left no-repeat }
.contact_button:hover { background-position: left center }
.contact_button:hover { background-position: left center }
	

-->
</style>
<script type="text/javascript">
       $(function(){
           $('#container1').corner("cc:#fff round 32px");
       });
</script>
</head>

<body>


<div class="container">
  
  <div class="menu">Haughton Exhibitions LTD</div>
<div class="content">
<div id="container1">
<a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
	<script type="text/javascript" src="swfobject.js"></script>
	<script type="text/javascript">
		var s1 = new SWFObject("imagerotator.swf","rotator","600","340","1");
		s1.addParam("allowfullscreen","true");
		s1.addVariable("file","madrid.xml");
		s1.addVariable("width","600");
		s1.addVariable("height","340");
		s1.write("container1");
	</script></div>
<div class="content2"><table width="100" border="0" cellspacing="0" cellpadding="0">
  <tr>
    
  </tr>
</table>
  <table width="100" border="0" cellspacing="0" cellpadding="0">
    <tr>
      
      </tr>
  </table>
  <span class="c"><table width="200" border="0">
  <tr>
    <td><a href="includes/contact.html"><img src="Contact.gif" alt="" name="" width="94" height="96" border="0" class="contact_button" /></a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</span></div>

</div>
</body>
</html>

Answer : cant get css buttons to work

This seems to be a button sprite, you will need to remove the image from the HTML and modify your code & css as below

Cheers

1:
2:
3:
4:
5:
6:
7:
8:
9:



//Change your css classes as below, you also have an extra } before .right1 class

a.contact_button { width: 94px; height: 31px;display:block; font-size: 0; text-indent: -9999px; overflow: hidden; background: url(Contact.gif) top left no-repeat }
a.contact_button:hover { background-position: left center }
a.contact_button:active { background-position: bottom center }

//Modify your HTML line for the button as below

<td><a href="includes/contact.html" class="contact_button">&nbsp;</a></td>