Hi,

I have a page where I used a background image for an "A" tag. And if I don't use "display:block" for the "A" tag then the background image is cut-off at the top.

The expected output: http://img687.imageshack.us/img687/2853/displayblockcutexpected.jpg

The actual output: http://img259.imageshack.us/img259/4894/displayblockcutoff.jpg

The html code:

<ul id="mainNav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Experts</a></li>
    <li><a href="#">Quiz</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Horoscopes</a></li>
</ul>

The CSS code

#mainNav a{
	display: block;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.2em;
	color: white;
	background: url(images/left_side.png) no-repeat left top;
	padding: 7px 15px 4px 15px;
}

Can any one explain what is going one here?

Thanks in advance.