Replace css values depending on users browser

Hi All

I'm trying to set up my website for both Firefox and IE. I want to be able to change some CSS values if the user is using IE. I have a list of images that when the user hovers over them the place name appears. In Firefox the name is correctly displayed in the middle of the images. In IE it is off to the side. The CSS for this is..

a.info span {
display: none;
}
 
a.info:hover {
position: relative;
}
 
a.info:hover span {
display: block;
position:absolute;
/* firefox */
top:10px;
width:120px;
border: 0;
 
/*IE 
top:40px;
left: 0px;
width: 120px;
*/
background-color: #ffffff;
font-size:18px;
font-family:"Trebuchet MS";
color:#ff1493;
text-align:center;
}

This is the code that displays the image and uses .

echo "<td><a href=scripta.php?place=$ID class=\"info\">
<img border=0 src=$thumb align=middle>";
echo "<span> " . $row['Place'] . " </span></a></td>";

Can I change the values for this using Javascript?

Thanks in advance

This is the website..www.pictiuirshannagh.5gigs.net