Forum Moderators: not2easy
Egad..here's the problem. I'm trying to make the major level of the navigation system have small-caps while leaving the submenus at normal font-variant. One would think this is fairly simple, no? Well, using Dreamweaver or StyleMaster I can format the ul and it looks great! But when I view it in Mozilla, Firefox, anything, except Safari, the small-caps doesn't work.
All but Safari, render the navigation without any formating to speak of...sizes are the same, font-weights are the same, etc.
Why can I format it in Dreamweaver or a CSS coding product like StyleMaster and yet when it's moved to production, the results are not equivalent?
Here is the the code in question: Any ideas? It must be obvious to anyone but me.
#navBar{
border-right: 1px solid #CCCCCC;
background-image: url(/images/sideimage1.jpg);
background-repeat: no-repeat;
background-position: right top;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:90%;
}
#navBar ul a:link, ul a:visited{
display: block;
color: #FFFFFF;
text-align: right;
padding-right: 2px;
}
#navBar ul a:link:hover, #navBar ul a:visited:hover{
color: orange;
}
#navBar ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.spacer{
margin-top: 10px;
}
#navbar ul li{
margin-bottom: 5px;
font-size: 95%;
font-variant: small-caps;
font-weight: bold; }
#navbar ul li ul li {
margin-bottom:0;
font-size: 85%;
font-variant: normal;
font-weight: normal;
}