CSS hover creating hotspot in entire table row

Question

I recently applied a hover feature to a set of buttons. When applied to a different website the coding was fine. When applied to this site the link/hotspot goes to the next button. For example: I have buttons home/about/gallery/blog/prints/contact and you would think with the dimensions set in CSS style sheet that the link would only apply to those dimensions. Not with this one. The link/hotspot shows linked to index.shtml from the edge of the table to the other side of the home button. There are spaces between buttons but the link/hotspot goes 50%across the space until it hits the next buttons link/hotspot. And the final button "contact" spans across to the opposite edge of the table. Any clues as to what I am doing wrong?

CSS:

div.nav-home {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 130px;
Margin-right: -60px;
background-position: right top;
background-repeat: no-repeat;
width: 75px;
height: 64px;
}
#home {
background-image: url('img/home.png');
}
#home:hover {
background-image: url('img/home_hover.png');
}

Index.shtml:

<table width="1213" height="64" align="center" background="img/tablebg2.png">
<!--#include file="menubuttons.html" -->

menubuttons.html:

<tr>    
<td align="center" width="75">
    <a href="/index.shtml" title="HOME" ><div id="home" class="nav-home"></div></a>
</td>

<td align="center" width="86">
    <a href="/about.shtml" title="ABOUT" ><div id="about" class="nav-about"></div></a>
</td>

<td align="center" width="94">
    <a href="/gallery.shtml" title="GALLERY" ><div id="gallery" class="nav-gallery">
</div></a>
</td>   

<td align="center" width="63">
    <a href="/blog.shtml" title="BLOG" ><div id="blog" class="nav-blog"></div></a>
</td>   

<td align="center" width="85">
    <a href="/prints.shtml" title="PRINTS" ><div id="prints" class="nav-prints"> 
 </div></a>
</td>

<td align="center" width="103">
    <a href="/contact.shtml" title="CONTACT" ><div id="contact" class="nav-contact">
</div></a>
</td>   
</tr> 

FIXED: (maybe not properly?)

I have only been coding for 2 months and have a pretty good idea on how to write it out, but I don't know what everything means such as the DIV tag. I know I was searching on here last night and I assumed I was to put the div inside a TD.

I was able to fix everything by simply adding a few spacer.png's before the first button in between each set of buttons and after the last button. This also fixed my spacing issues on the sides.

Thanks for the help. I simply am trying to find an easy way to make my buttons change on hover. This method was the first I found last night on here and am now trying to perfect it.. well in my head at least. I need to research on the unordered list a little because I have heard that that makes things more simple...

Here is the link(based off the back end of a site I recently finished) www.blackmarkettattoos.com/amysesco/index.shtml

Answer 1

I think the problem is the fact that you are using DIV, which is a container tag inside table's cell, and for both you apply style (to the DIV as class and to the TD as inline).

Generally, it is better to create menus with lists, but if you must use the code you provided, then try to remove width: 75px; from the div.nav-home.

Check these two links for how to create CSS menus with lists:

• css.maxdesign.com.au
• Dynamic Drive CSS Library