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

[sgware]

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?

[snow]

have you tried:

"border-collapse:collapse;" ?

Sounds like it could work based on what you've described...


Snow

[ukgeoff]

Even though your are experimenting, you should still put you code in a properly structured html page.

I.e., DOCTYPE, etc, otherwise the browser is making a guess at how to interpret things.

Seperate your css into its own file.

[Rob]

just lose the whitespace in the source between the a tags and the li tags.

Lost the source formatting and bunch it up.... you should find your problem has gone.

[antonyx]

ive had that problem before and i used hspace:0px; and it got rid of it in ie

[sgware]

I figured out the problem. There was a style that was meant to be applied to something else but was getting applied to those images. Thank for the help though .