CSS Help

[beefeater267]

Hi,

I have a document w/ CSS and my Links look like they are applied to the style (font family / size), however, they are still that blue link color and are underlined.

can anyone help figure out why? It worked fine when I had it on my main page.. but, i moved this structure into an IFRAME. i dont know exactly what happened

my HTML structure is:

<div>
<TABLE ID="tblSubMenuBar">
<TR>
<TD CLASS="clsMenuBarSubItem" ID="divSubMenuIE">
<A CLASS="clsMenu">LINK</A>
</TD>
</TR>
</TABLE>

AND STYLES:


DIV#divMenuBar
{
background-color: #EEEEEE;
}

TABLE#tblMenuBar TD
{
font-family:verdana;
font-size: 11px;
color:Black;
padding:0px 5px 0px 5px;
cursor:default;
font-weight:bold
}

TABLE#tblMenuBar TD.clsMenuBarItem
{
font-family:Arial;
font-weight:bold;
cursor:hand;
background-color: #F0EDE1;
}

TABLE#tblSubMenuBar TD.clsMenuBarSubItem
{
font-family:Arial;
font-weight:bold;
cursor:hand;
background-color: #F0EDE1;
font-size: 11px;
width:130px;
}

TABLE#tblSubMenuBar TD.clsMenuBarSubItem-Selected
{
font-family:Arial;
font-weight:bold;
cursor:hand;
background-color: #C6C5B5;
font-size: 11px;
width:130px;
}


TABLE#tblSubSubMenuBar TD.clsMenuBarSubSubItem
{
font-family:Arial;
font-weight:bold;
cursor:hand;
background-color: #F0EDE1;
font-size: 11px;
}
TABLE#tblSubSubMenuBar TD.clsMenuBarSubSubItem-Selected
{
font-family:Arial;
font-weight:bold;
cursor:hand;
background-color: #C6C5B5;
font-size: 11px;
}



TABLE#tblMenuBar TD.clsMenuBarItem-Selected
{
font-family:Arial;
font-weight:bold;
cursor:hand;
background-color: #C6C5B5;
}


DIV.clsMenu
{
font-family:Arial;
font-size: 11px;
background-color: #F0EDE1;
position:absolute;
visibility:hidden;
width:130px;
padding:5px 5px 5px 8px;
border-top:1 white solid;
font-weight:bold;
}

DIV.clsMenu-Selected
{
font-family:Arial;
font-size: 11px;
background-color: #F0EDE1;
position:absolute;
visibility:hidden;
width:130px;
padding:5px 5px 5px 8px;
border-top:1 white solid;
font-weight:bold;
}

DIV.clsMenu A
{
font-family:Arial;
text-decoration:none;
color:black;
font-weight:bold;
}

.selected-Menu
{
font-family:Arial;
font-weight:bold;
cursor:hand;
background-color: #C6C5B5;
font-size: 11px;
}

 

[tgreer]

On just a quick glance, I don't see that you style the ":visited" pseudo-class. Thus visited links will be blue, underlined.



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[Vragabond]

You never set up your css correctly. What you have is every <a> element within a div with a class of clsMenu and the setting for that div element with a class of clsMenu. Looking at your code, you do not even have a div with a class of clsMenu so your specific declarations for <a> are not applied anywhere and it all reverts to default. Underline and blue.

 

[beefeater267]

ok then,

well, based off of the HTML and the CSS i gave, what can i add to the CSS to make these links black?

 

[Vragabond]

Hard to give advice without seeing the rest of the code and knowing how you want to go about doing it. Here's a few suggestions:

a.clsMenu {
  color: black;
  text-decoration: none;
}

#tblSubMenuBar a {
  color: black;
  text-decoration: none;
}

.clsMenuBarSubItem a {
  color: black;
  text-decoration: none;
}

All these will work (separately). Just pick one that suits your needs the best. You can also combine them (#tblSubMenuBar .clsMenuBarSubItem a.clsMenu {}).