An element that does not display a background image

Question

I am trying to add an inverse image for the “a” element, but it will only display part of the image (so if I have Home as a value, regardless of space, this is what the image shows, if the value is empty, it doesn't display nothing from the image).

Despite the fact that I set the width and height of the displayed element "a".

Can someone help me?

The 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'm sure this is stupid, but I can’t understand that.

Answer 1

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

Therefore, you need to change the display mode of the element using the CSS display property.

Use display: block; , if you want your elements to be extracted from the text stream and considered as a block (i.e. stacked vertically, one block per line).

Use display: inline-block; if you want your element to behave like the position of an inline element, but has block-like properties.

Note. inline-block supported by IE6 on <a> . In IE6, the inline-block display style is only supported for elements with the default inline style.

Answer 2

Add display:block; to anchors ( block vs inline-block ). Once you do this, you may need float:left; bindings to hold them side by side. If you are following this route, follow them with 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>