1

I read a tip to make a <div> into a link here: Make a div into a link

One of the answers there suggested that this would work even within a table.

The goal is to make clickable, several items of text in an image, without using an image map or CSS. The image is positioned on the page in a table cell, and the <div> is inside the <td> so that the link is properly positioned over the text in the image.

It works as intended EXCEPT, the background image in the table cell is repeated, after adding a <div>.

Here is the code:

<td height="419" align="left" valign="top" background="images/bg_FINAL.jpg"><img src="newimages/Splashpage.jpg" alt="" style="position:relative; left:0; top:0; " >
        <div style="height:100px; width:142px; float:none; position:relative; left:265px; top:-223px; " >
        <a href="http://SomeURL.com" style="position:absolute; top:0; left:0; width:100%; height:100%; display:block; " ></a>
        </div>
</td>

The bg_FINAL.jpg image is repeated below the normal height of the table (419px in this case), and I don't understand why. Removing the <div> immediately makes it look normal again (with a solid color bordering the table).

P.S. As a new user, I can't post images (need 10 reputation points apparently), but here are two screenshots showing the problem:

http://www.box.com/s/bo8jef7o4ahy8kbeusdp

http://www.box.com/s/v2mafsgomj4tksul53rz

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Axl
  • 11
  • 2
  • I'm still not sure exactly what you're asking. Likely, using `` for layout is not the right way to do it. There's nothing in your screenshots that suggest that you'd need any kind of image map. Use live text where you can (including [@font-face](http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp) if using special fonts) and a background image – Scrimothy Sep 28 '12 at 03:52

1 Answers1

0

This is a shot in the dark since there is no example provided or screenshots of what exactly it looks like & it may not be the correct fix but I hope it may help!

Since you aren't declaring whether or not you want the background to repeat, it will automatically repeat it self. The image is probably set to the same width as the table so you aren't seeing it repeat on the x-axis, only on the y-axis. So declare a style attribute inside the td element and declare the (background-repeat:none) and that should solve the problem.

Like so.

<td height="419" align="left" valign="top" background="images/bg_FINAL.jpg" style="background-repeat:none;">
djowinz
  • 356
  • 1
  • 4
  • 17
  • I appreciate your taking a crack at it. Unfortunately adding `style="background-repeat:none;` had no effect. I do see the background on the x-axis, normally. It only changes on the y-axis. But, here's a clue: removing the `` similarly restores the background to normal. So, perhaps there's something about the interaction of the IMG and the DIV? – Axl Sep 04 '12 at 21:06
  • @Axl if you can provide the source code or a live version for me to debug that would be much appreciated. – djowinz Sep 04 '12 at 21:35