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
}