user1809757 user1809757 - 2 years ago 76
CSS Question

Rollover Image In Cell Table Overriding Previous Cell Image - Repeating Images in Table

I'm trying to make rollover images with a hyperlink in each table cell, but for some reason each subsequent cell I make is overriding the cells before it .:. each cell becomes a repeated image. The code worked fine the first time I wrote it; this is totally out of the blue. Here are the image codes for two adjacent cells - what happens for me for some reason, the 2nd cell keeps showing up as the 1st cell image as well.

<table style="width: 655px; height: 630px; border: 2px dotted black;">
<tbody>
<tr align="center">
<td style="border: 2px dotted black; width: 220px; height: 210px;"> <style type="text/css">
.rollover a {display: block;
width: 210px;
height: 155px;
background-image: url( IMG1a );}
.rollover a:hover{display: block;
width:210px;
height: 155px;
background-image: url( IMG1b );}
</style><div class="rollover"> <a href="link1"></a></div></td>

<td style="border: 2px dotted black; width: 220px; height: 210px;"> <style type="text/css">
.rollover a {display: block;
width: 210px;
height: 155px;
background-image: url( IMG1a );}
.rollover a:hover{display: block;
width:210px;
height: 155px;
background-image: url( IMG1b );}
</style><div class="rollover"> <a href="link1"></a></div></td></tr></tbody></table>

Answer Source

Without a larger chunk of HTML I am assuming that you have this in your page verbatim. <style> elements are not scoped to a part of the page. So if you have these two style elements in the page, the last statement will override the first and influence both divs.

To resolve this, you have to give each div or a a specific selector, like an id:

<style type="text/css">
#first-div.rollover a {display: block;
  width: 210px;
  height: 155px;
  background-image: url( IMG1a );}
#first-div.rollover a:hover{
  background-image: url( IMG1b );}

#second-div.rollover a {display: block;
  width: 185px;
  height: 131px;
  background-image: url( IMG2a );}
#second-div.rollover a:hover{
  background-image: url( IMGb );}
</style>

<div class="rollover" id="first-div">
  <a href="link1"></a>
</div>
<div class="rollover" id="second-div">
  <a href="link2"></a>
</div>

And as always, include your <style> in your <head> tag, or even better in a separate file!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download