border occuring when put "a" tag outside "img" tag

Question

Without "a" tag,it's fine:

<style type="text/css">
body {
    font: 1.0em verdana, arial, sans-serif;
}

* {
    margin:0; padding:0;
}

</style>

<table cellpadding="0" cellspacing="0" border="0">
        <tr>
                <td><img src="/images/title_equipment.gif" /></td>
                <td><img src="/images/about.gif" /></td>
                <td><img src="/images/services.gif" /></td>
                <td><img src="/images/systems.gif" /></td>
                <td><img src="/images/equipment_new.gif" /></td>
                <td><img src="/images/equipment_used.gif" /></td>
                <td><img src="/images/news.gif" /></td>
                <td><img src="/images/contact.gif" /></td>
        </tr>
        <tr>
                <td><img src="/images/balers.gif" /></td>
        </tr>
</table>

But if adding "a" tag outside "img",border comes:

<style type="text/css">
body {
    font: 1.0em verdana, arial, sans-serif;
}

* {
    margin:0; padding:0;
}

</style>

<table cellpadding="0" cellspacing="0" border="0">
        <tr>
                <td><a href="#"><img src="/images/title_equipment.gif" /></a></td>
                <td><a href="#"><img src="/images/about.gif" /></a></td>
                <td><a href="#"><img src="/images/services.gif" /></a></td>
                <td><a href="#"><img src="/images/systems.gif" /></a></td>
                <td><a href="#"><img src="/images/equipment_new.gif" /></a></td>
                <td><a href="#"><img src="/images/equipment_used.gif" /></a></td>
                <td><a href="#"><img src="/images/news.gif" /></a></td>
                <td><a href="#"><img src="/images/contact.gif" /></a></td>
        </tr>
        <tr>
                <td><img src="/images/balers.gif" /></td>
        </tr>
</table>

Answer 1

This is the default behaviour in some browsers, IE included. You need to add this to your CSS:

a img {
    border:0;
}

Answer 2

<img src="" border="0" />

or with css

border: 0;