Remove border on linked images

I have removed the blue border around the images I put a link on, but now there is a space around the images. How do i remove the spaces so the 4 images look like one?

Heres the problem:
http://img261.imageshack.us/img261/9466/gapzl5.png

The code:
<div id="top_nav">
<a href="#"><img src="images/top_nav_4.png" alt="shared hosting" width="220" height="45" class="image" /></a>
<a href="#"><img src="images/top_nav_3.png" alt="VPS" width="220" height="25" class="image" /></a>
<a href="#"><img src="images/top_nav_2.png" alt="dedicated hosting" width="220" height="27" class="image"/></a>
<a href="#"><img src="images/top_nav_1.png" alt="about us" width="220" height="33" class="image" /></a> </div>

The css:
http://www.ultimateflcl.com/

And the Url:
http://www.ultimateflcl.com/

Thank you :)

Hi there Sman5109,

try it like this...

.image {
border-style: none;
display:block;
}

coothead

You could do it with texts :)

You could do it with texts :)
Errr, what are texts. :confused:

coothead

I think codingmasta was saying that the links could be produced using regular text rather than img-based text.

Hi there Bill,

It seems a long while since we were together on the same thread. ;)
Thanks for revealing codingmasta's thoughts. :cool:
Looking at the image displayed in the post, I do not think that it would be possible though.
And as the OP has already gone to the length of creating them, it is more practical to use...
display:block; :D

coothead

Thanks for the help guys! :)

It worked :)