Making an image a link adds a background I can't get rid of

Ok, I'm not really sure how to describe this, so I'll just show an example.

Check out this:
http://www.l4eclan.com/bipco/wtf1.htm
and
http://www.l4eclan.com/bipco/wtf2.htm

They are the exact same code, except that in the second one the buttons ('Products,' 'Services,' etc.) are linked somewhere. For some crazy reason, making them links adds whitespace around them that I can't seem to get rid of.

I have tried setting the border, margin, and padding of the <img>, <a>, and <li> tags to 0, to no avail. Can anyone tell me how to get rid of that damn whitespace? If I set the background color of the <a> tags to blue, it makes the whitespace blue... if that helps any. If I make the border, margin, or padding colors of those same tags blue, it doesn't show up. Weird.

Any ideas?

 

In your CSS, change:

.menu a, .menu h2 { display: block;
					border-style: none;
					margin: 0;
					padding: 2px 3px; }

Code (markup):

to:

.menu a, .menu h2 { display: block;
					border-style: none;
					margin: 0; }

Code (markup):

 

Add

a img {
    display: block;
    }

Code (markup):

An inline image is set above the bottom of its container, and the white space before and/or after it in the source is collapsed to a space; thus the extra space.

cheers,

gary

 

Thank you! That works prefectly.

 

Great to know that your question has been answered. Introduce yourself in the introduction section. Meet many more professionals on this forum.