Help with CSS and tables

[ikilledsanta]

<table border=0 width="100%">
<tr>
<th rowspan=3 valign=top bgcolor="#555555">
<span id="vertnav">
<ul id="vertnavlist">
<li id="vertbackone"><a href="../characters.html" id="vertback1">Back to Character Information</a></li>
<li id="vertactive"><a href="bernard.html" id="vertcurrent">Bernard</a></li>
<li><a href="charley.html">Charley</a></li>
<li><a href="linda.html">Linda Loman</a></li>
<li><a href="biff.html">Biff Loman</a></li>
<li><a href="harold.html">Harold Loman</a></li>
<li><a href="willy.html">Willy Loman</a></li>
<li><a href="ben.html">Benjamin Loman</a></li>
<li><a href="woman.html">"The Woman"</a></li>
<li><a href="howard.html">Howard Wagner</a></li>
</ul>
</span>
</th>
<td width="15%" align=center><b>Bernard</b><br><img src="../pictures/bernard.jpg" alt="Bernard"></td>
<td width="85%">CHARACTER INFO</td>
</tr>
<tr>
<td><br></td>
</tr>
<tr>
<td width="15%" align=center><b>Played by David Chandler</b><br><img src="../pictures/davidchandler.jpg" alt="David Chandler"></td>
<td width="85%">ACTOR INFO</td>
</tr>
</table>

here is the CSS for it:
#vertnavlist
{
padding: 0;
margin-left: 0;
font: bold 12px Georgia, Verdana, sans-serif;
background: #555;
width: 13em;
}

#vertnavlist li
{
list-style: none;
margin: 0;
border-top: 1px solid #555;
text-align: left;
}

#vertnavlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #333;
background: #222;
text-decoration: none;
}

#vertnavlist li a:link { color: #fff; }
#vertnavlist li a:visited { color: #fff; }

#vertnavlist li a:hover
{
border-color: #666;
color: #FFF;
background: #000;
}

#vertnavlist li a#vertcurrent
{
border-color: #555;
color: #FFF;
background: #555;
}

#vertnavlist li #vertback1
{
font: bold 12px Georgia, Verdana, sans-serif;
color: white;
background: #000;
border-color: #000;
}

#vertnavlist li a:hover#vertback1
{
text-decoration:underline;
}

Here's a screenshot of it:
http://i108.photobucket.com/albums/n26/ikilledsanta/trouble.jpg

I want to take out the border above the table on the vertical gray column. I want it to be 1 pixel, like the other borders. I would prefer to do this in the CSS file, since I have it on 10 or so different pages, but I could change them all manually if I have to. Thanks in advance for any help.

If you have any suggestions on how to make it look better, that would be nice too :thumbsup:

[Arbitrator]

Browsers give default margins and/or padding to list elements depending upon browser. Have you removed the list’s default top margin? I infer that it’s a margin instead of a border because the area below the list appears to be the same color as the “border” and you don’t seem to have a border that large specified.

The browsers also may not like it that you have a ul element with a span element as its parent since that’s invalid in (X)HTML. If you need a generic element to surround a list element, use a div.

If those above things are not the cause of the problem, then it would be useful to see more code (preferably all of it) and a list of what browsers you see the problem in.

Finally, and on another note, I simply must say that tables for layout is bad practice and using deprecated presentational attributes such as align, border, valign, and width—when CSS should be used instead—is also bad practice.

[ikilledsanta]

Ok thanks a lot, it was the margin-top. I specified the margin-left, but not the margin-top. I always write with bad practice, sorry. Some things I can't remember how to do in CSS, and some things I can't remember how to do in HTML, so I mix and match. None of my sites or pages get popular enough that anyone would want to edit them, so as long as it works it doesn't matter. Although I guess it does make it easier for people like you who want to help.

[VIPStephan]

Although I guess it does make it easier for people like you who want to help.

No, creating websites with valid (http://validator.w3.org) and semantic (http://brainstormsandraves.com/articles/semantics/structure/) code, styled with CSS also makes it easier for you to maintain and edit the pages afterwards.
And if you're interested, read the article about why tables for layout is stupid (http://www.hotdesign.com/seybold/).

[ikilledsanta]

Rather than make another topic, I'm gonna post another question I just ran across here. I remembered something I saw like last year...it was a link that faded into a color. So I searched and found this site: http://www.phpbb.com/phpBB/viewtopic.php?t=126192

It works beautifully, but I want it to fade the background color of the link. Here's the links code:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="home.html" id="current">Home</a>
<li><a href="playwright.html">About the Playwright</a></li>
<li><a href="acknowledgements.html">Acknowledgments</a></li>
<li><a href="characters.html">Character Information</a></li>
<li><a href="directions.html">Directions</a></li>
<li><a href="donate.html">Donate</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="tickets.html">Ticket Sales</a></li>
</ul>
</div>

Up a little bit is a screenshot of my site...its the topmost set of links, they are horizontal. When it hovers, I want it to fade from #222 to #777. This is much too complicated of Javascript for me, I've never tried to make anything like this before.