Link box - help?

[susanrm]

Hi all,

I'm attempting to do suckerfish-type CSS drop down lists. In Firefox and IE, the top element is an image, and when I add link HTML to it, a colored box appears around the image. I want this to go away. I'm rusty enough in CSS to be clueless about how to do this and have banged my head against it enough to ask for help.

Here is the CSS:
.drop-link {
font-family: Arial, sans-serif;
font-size: 9pt;
text-align: left;
color: #660099;
font-style: normal;
text-decoration: none;
}
.navbar {
align: center;
border: 0;
margin: 5;
}


#nav ul {
padding: 3px 3px 3px 3px;
background: #CCFFFF;
border-style: dashed;
border-width: thin; /* sets border width on all sides */
border-color: yellow;
list-style: none;
}

#nav {
padding: 0;
margin: 0;
list-style: none;
}

#nav a {
display: block;
width: 10em;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 9pt;
text-align: left;
font-style: normal;
text-decoration: none;
color: #660099;
padding: 0;
}

#nav li {
float: left;
width: 8em;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}


Here's the html:


<table align="center">
<tr>
<td class="navbar">
<ul id="nav">

<li><a href="about.php"><img src="./images/navbar/About__Our_School.gif" alt="About Our School" width="69" height="43"></a>
<ul>
<li class="drop-link"><a href="./mission.php">Mission Statement</a></li>
<li class="drop-link"><a href="./vision.php">Vision</a></li>
<li class="drop-link"><a href="./story.php">Our Story</a></li>
<li class="drop-link"><a href="./bios.php">Staff Bios</a></li>
<li class="drop-link"><a href="./publications.php">Publications</a></li>
<li class="drop-link"><a href="./articles.php">Related Articles</a></li>
</ul>
</li>
<li ><img src="./images/navbar/Admissions.gif" alt="Admissions" width="72" height="43">
<ul>
<li class="drop-link"><a href="./openhouse.php">Open Houses</a></li>
<li class="drop-link"><a href="./interested.php">Forms</a></li>
</ul>
</li>
<li><img src="./images/navbar/Parents___Families.gif" alt="Parents & Families" width="62" height="43">
<ul>
<li class="drop-link"><a href="./parentscompany.php">Parents' Company</a></li>
<li class="drop-link"><a href="./families.php">Parents &amp; Families</a></li>
<li class="drop-link"><a href="./photogallery.php">Special Event Photos</a></li>
<li class="drop-link"><a href="./secure.php">Secure Area</a></li>
</ul>
</li>


</ul>


The website in progress is http://thegardenroad.org/newindex.php

I know there are display problems in IE Windows, too, but I'll take care of those separately.

Any help would be appreciated.

Thanks,
Susan

[AfroJoJo]

Add this to your CSS:

a img {
border: none;
}

[susanrm]

Ah, so simple... thanks! I tried variations of things like that, but I never quite hit it.

Susan