i tried to put the id attribute on the <a>, but then the link isn’t the EXACT size of the image.
Hi, All you need to do is set the #home_on ID on the anchor, then set that anchor as display:block in the CSS so it can take dimensions. As you know anchors are inline elements by default, but inline elements (except inline-block) can’t take dimensions.
[B]a#home_on[/B] {
[COLOR=Blue]display:block;[/COLOR]
width: 66px;
height: 28px;
background: url(img/home_on.jpg) top left no-repeat;
}
<div id="navi">
[COLOR=Blue]<a id="home_on"[/COLOR] href="index.html" title="our homepage">[COLOR=Blue]</a>[/COLOR]
</div> <!-- end of navi -->
If that is the only link then it is ok to nest one anchor in a div like that because IE can have trouble with inline elements sitting on their own.
From the looks of that div #navi I am guessing there will be more links. If so you should be using a UL with your anchors nested in LI items.