Can't Remove Border From Hyperlink IMG in Chrome or Firefox (Working in IE8)

Question

I am using a jquery menu on a Master page, and the menu is built with a Unordered List. Inside each li, there is anchor tag. Inside this anchor tag, there is an image tag and a couple spans.

Now, the way the menu works is that you just see text (no borders or background colors) until you hover over the listitem, at which point the image and spans expode out and become visible. Everything is working great, and everything displays exactly as it should in IE8, but when I run the site in Chrome or Firefox, each listitem is displayed with a thin gray box. While this looks ok, it is not my desired effect. I assume that this is directly related to the anchor, but none of the standard CSS tricks are working. I have tried removing the anchor tag from one of the list items, and sure enough, the border is gone for that listitem. Unfortunately, I need that hyperlink there. The img tags have a src attribute, and it is defined and pulling the correct image. In the CSS (which I have in the HEAD of the site.master page, I have the following attributes set for "a", "a img", "a span":

        text-decoration:none;
        border-style:none;
        border:none;
        outline:none;

I have also tried adding border="0" directly to the IMG, but no luck at all. The only time I have seen that border disappear is when I remove the anchor tags.

I am stuck on this. Any help is greatly appreciated!

Just for ease, here is what one of the menu items looks like in code:

<ul id="sdt_menu" class="sdt_menu">
            <li>
                <a href="#">
                    <img src="images/1.jpg" border="0" alt=""/>
                    <span class="sdt_active"></span>
                    <span class="sdt_wrap">
                        <span class="sdt_link">the island</span>
                        <span class="sdt_descr">About</span>
                    </span>
                </a>
                <div class="sdt_box">
                        <a href="#">Airlines</a>
                        <a href="#">Travel Info</a>
                        <a href="#">Currency</a>
                </div>
            </li>

And here is the Style Sheet:

ul.sdt_menu
{
    position: absolute;
    top: 148px;
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:968px;
    border: 0px;
}
ul.sdt_menu a{
    text-decoration:none;
    outline:none;
    border: 0px;
}
ul.sdt_menu li{
    float:left;
    width:161px;
    height:85px;
    position:relative;
    cursor:pointer;
    text-decoration:none;
    outline:none;
    border:0px;
}
ul.sdt_menu li > a{
    position:absolute;
    top:0px;
    left:0px;
    width:161px;
    height:85px;
    z-index:12;
    -moz-box-shadow:0px 0px 2px #000 inset;
    -webkit-box-shadow:0px 0px 2px #000 inset;
    box-shadow:0px 0px 2px #000 inset;
    text-decoration:none;
    outline:none;
    border:0px;
}
ul.sdt_menu li a img{
    border:none;
    text-decoration:none;
    outline:none;
    position:absolute;
    width:0px;
    height:0px;
    bottom:0px;
    left:85px;
    z-index:100;
    -moz-box-shadow:0px 0px 4px #000;
    -webkit-box-shadow:0px 0px 4px #000;
    box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
    position:absolute;
    top:25px;
    left:0px;
    width:161px;
    height:60px;
    z-index:15;
    border:none;
    text-decoration:none;
    outline:none;
}
ul.sdt_menu li span.sdt_active{
    position:absolute;
    background:#111;
    top:85px;
    width:161px;
    height:0px;
    left:0px;
    z-index:14;
    -moz-box-shadow:0px 0px 4px #000 inset;
    -webkit-box-shadow:0px 0px 4px #000 inset;
    box-shadow:0px 0px 4px #000 inset;
    border:none;
    text-decoration:none;
    outline:none;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
    margin-left:15px;
    text-transform:uppercase;
    text-decoration:none;
    outline:none;
    border:none;
}
ul.sdt_menu li span span.sdt_link{
    color:#333333;
    font-size:24px;
    float:left;
    clear:both;
    text-decoration:none;
    outline:none;
    border:none;
}
ul.sdt_menu li span span.sdt_descr{
    color:#0066FF;
    float:left;
    clear:both;
    width:155px; /*For dumbass IE7*/
    font-size:12px;
    letter-spacing:1px;
    text-decoration:none;
    outline:none;
    border:none;
}
ul.sdt_menu li div.sdt_box{
    display:block;
    position:absolute;
    width:161px;
    overflow:hidden;
    height:161px;
    top:85px;
    left:0px;
    display:none;
    background:#000;
    z-index:100;
    text-decoration:none;
    outline:none;
    border:none;
}
ul.sdt_menu li div.sdt_box a{
    float:left;
    clear:both;
    line-height:30px;
    color:#0066FF;
    text-decoration:none;
    outline:none;
    border:none;
}
ul.sdt_menu li div.sdt_box a:first-child{
    margin-top:5px;
}
ul.sdt_menu li div.sdt_box a:hover{
    color:#666666;
}

Answer 1

Thanks for posting the stylesheet. That gray "border" you're seeing is from this rule:

ul.sdt_menu li > a {
  -moz-box-shadow:0px 0px 2px #000 inset;
  -webkit-box-shadow:0px 0px 2px #000 inset;
  box-shadow:0px 0px 2px #000 inset;
}

According to http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx IE didn't add box-shadow support until IE9, which is why you don't see the shadow in IE8.