Block level inside an inline madness!

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.

Probably on the link he posted (the c ode remains the same, he just reuploaded hte image)

http://www.css-lab.com/demos/sprites/images/sprite.png

The page is at post 6 :slight_smile:

Let me see if I can find an example for you.
Here is a fairly simple horizontal sprite nav that works with images disabled. It is just using a very basic image with two states, it would look better if it had three states and then the #current LI item could get a different shade so it did not blend together with the other links on hover.

Sprite Nav with Replacement Text

Sprite navs can be hard to understand at first but once you understand how the BG positions change on hover then it all becomes clearer. You have to set up classes on your LI so you can target the BG positions.

ok, thanks all.

updated it? where?