CSS woes

[downtroden]

I'm trying to help my wife out by updating a page for her 'radio' class at a local community college... however I'm having some issues with CSS. I've got a right sidebar navigation system that isn't acting the way I'm telling it to. I've tried a solution with a table and without a table and both react the same in each browser. Explorer does it correctly. Omniweb, Firefox and Safari however do not... and they all make the same mistake. Since Explorer is REALLY forgiving I'm assuming the problem is with the origin of the code (me). Any advice/tip would be appreciated.

with table http://www.azoln.com/max/index_table.html
withoutable http://www.azoln.com/max/index.html

for quick reference, the styles for the links:

.nav_bar {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #E0E0E0;
background-repeat: repeat
}

.nav_bar a:link{
color: #000000;
text-decoration: none;
display: block;
height: 30px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
border-color: #FFFFFF #000000 #000000;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
background-image: url(images/link_back.gif);
background-repeat: repeat;
background-position: 0px 0px
}

.nav_bar a:visited{
color: #000000;
text-decoration: none;
display: block;
height: 30px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
border-color: #FFFFFF #000000 #000000;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
background-image: url(images/link_back.gif);
background-repeat: repeat;
background-position: 0px 0px
}

.nav_bar a:hover{
color: #000000;
border-color: #000000 #000000 #FFFFFF;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px: #000000 #FFFFFF #FFFFFF
background-repeat: repeat;
background-position: 0px 56px;
background-color: #999999
}

.nav_bar a:active{
color: #FFFFFF;
border-color: #000000 #000000 #FFFFFF;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px: #000000 #FFFFFF #FFFFFF
background-repeat: repeat;
background-position: 0px 28px;
background-color: #999999
}

[Jazzee]

Have you tried removing height="100%" ? I'm thinking it's either that or the padding you have for the links in the stylesheet.

[seonewbee]

Why are there 3 colors for the border?

Is there supose to be a period between _navbar and a:link in _navbar a:link ?

Like this:


ul.menu
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
list-style-type: none;
background-color: #CDCEFF;
}

a.menu { padding: 3px 10px; display: block; text-decoration: none;}

a.menu:link, a.menu:visited
{
color: #66f;
}

a.menu:hover
{
color: #ff0;
background-color: #00f;
}

[downtroden]

i've always put the a:'state' after the class name... but anyway, for those who wonder.
30px height on the link class was the issue. thanks for the help