a element not showing background image

Question

I am trying to add a backgroung image for a "a" element, but it would only show part of the image ( so if I have Home as value, whatever space home takes that is what is shows of the image, if the value is empty it wont show anything of the image).

Despite I have setted up the width and height of the "a" element to display.

Can anybody help me?

Code.

<div style="width:1200px;height:25px;text-align:left;">
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
</div>

I am sure is something silly, but I cant find out what.

Answer 1

<a> is an inline element. Inline elements cannot have a set width and height.

You therefore need to change the display mode of the element using the CSS property display.

Use display: block; if you want your elements to be taken out of the flow of text and considered a block (ie.: stacked vertically, one block per line).

Use display: inline-block; if you want your element to behave like an inline element position wise but have block-like properties.

Note: inline-block is supported by IE6 on <a>. In IE6, inline-block display style is only supported on elements which has an inline default style.

Answer 2

Add display:block; to the anchors (block vs inline-block). Once you do that though, you may need to float:left; the anchors to keep them side-by-side. If you go that route, follow them all up with a clear:both; div.

a.box  { float:left; width:100px; height:25px; margin:0 8px; }
.clear { clear:both; }

<a href="#" class="box">Foo</a> 
<a href="#" class="box">Foo</a> 
<a href="#" class="box">Foo</a> 
<div class="clear"></div>