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.