How to prevent jumping on rollover

benton · 06-26-2008, 02:08 AM

I'm trying to display a box around images as the user mouse's over them. The code works but the images jump. Here is a link to an example http://64.22.87.10/~codetest/rollover/test.html And here is the code used on that page. I would appreciate any thoughts on what the problem is. (Note that the tables are not my decision and must be used.)

HTML Code:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="ltr" lang="en">
<head>
<style type="text/css">
.bgrollover {
background-color: #fff;  
border-style: double; 
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
} 
.bgrolloverPlain {
background-color: #fff;  
border-style: none; 
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
} 
a.bgrollover, a.bgrolloverPlain {
background-color: #fff;  
border-style: none; 
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
} 
a.bgrollover:hover, a.bgrolloverPlain:hover {
background-color: #fff; 
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif; 
text-decoration: none;
}
</style> 
</head>
<body>

<table border="0" width="100%" cellspacing="0" cellpadding="2">
  <tr>
   <td><table border="0" width="30%">
    <tr>
     <td class="bgrolloverPlain" align="center" onMouseover="this.className='bgrollover'" onMouseout="this.className='bgrolloverPlain'"><img src="imgb.jpg" width="250" alt=""><br>Premium Quality</td>
    </tr>
   </table></td>
   <td><table border="0" width="30%">
    <tr>  
     <td class="bgrolloverPlain" align="center" onMouseover="this.className='bgrollover'" onMouseout="this.className='bgrolloverPlain'"><img src="imgc.jpg" width="250" alt=""><br>Prestige Quality</td>
    </tr>
   </table></td>
  <tr>       
</table>              
</body>
</html>