I have implemented a jQuery menu on a Master page, where the menu structure is created using an Unordered List. Each list item contains an anchor tag which includes an image tag and a couple of spans.
The functionality of the menu is such that only text is visible initially (without any borders or background colors), and when you hover over a list item, the image and spans expand and become visible. Everything works perfectly in IE8, but when testing in Chrome or Firefox, each list item displays with a thin gray border. While this is acceptable, it's not the desired effect I want to achieve. I suspect this issue is related to the anchor tag, as none of the standard CSS techniques are resolving it. I even tried removing the anchor tag from one list item, and the border disappeared, but unfortunately, I need the hyperlink there. The img tags have valid src attributes pointing to the correct images. In the CSS defined within the HEAD section of the site.master page, I've set the following attributes for "a", "a img" and "a span":
text-decoration:none;
border-style:none;
border:none;
outline:none;I also attempted adding `border="0"` directly to the IMG tag, but to no avail. The only time the border disappears is when the anchor tags are removed entirely.
I'm currently stuck on this issue and would greatly appreciate any help!
To provide clarity, here is an example of 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>
Below is the Style Sheet used:
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;
}
/* Remaining style definitions */