Changing the color of the link

[zxk105]

Hello,

I am trying to build a DHTML drop down menu. I would like to change the color of the cell and the link when the mouse moves over it. I found the following code online but it only works when you move (hover) over the link. How do I also change the color when I move over the cell?

a.MenuItem
{
COLOR: #FDE90E;
FONT-SIZE: 11px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: None;
FONT-WEIGHT: Bold;
}
a.MenuItem:link
{
COLOR: #FDE90E;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: None;
FONT-WEIGHT: Bold;
}
a.MenuItem:visited
{
COLOR: #FDE90E;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: None;
FONT-WEIGHT: Bold;
}
a.MenuItem:hover
{
COLOR: #1880FB;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: None;
FONT-WEIGHT: Bold;
}

[MatthewHSE]

Try setting the anchors to display:block.

[katana_one]

You will also need to add the following rule where you want the background color to change on the links.

background-color: #FF0000;

Also, much of the CSS you posted is redundant. You already have defined the text color, and font properties in the first rule. You should only need to define them for the other rollover states if they will differ from the first set of rules.

[zxk105]

Ok I have removed the extra not needed lines and I have added the display:block stuff. This is what I have:

a.MenuItem:link
{
COLOR: #FDE90E;
display:block;
}
a.MenuItem:visited
{
COLOR: #FDE90E;
display:block;
}
a.MenuItem:hover
{
COLOR: #1880FB;
display:block;
}

However, now the color of the link is still yellow when the mouse is just around the edge (top and bottom). Can I fix this b/c the link simply looks like it disappears cause it is the same color as the background. Thanks.....

[MatthewHSE]

Are the links inside parent elements with padding applied? That could cause this problem. You might also try applying margin:0 to the links (though it should be 0 by default, right?).

[zxk105]

I think this is happening b/c I set the height of each <td> to 20px. So there is a little bit of room between the link and the border where a.MenuItem:hover cannot come in action. However, when I don't use the height then it looks kinda cramped. But even when I get rid of height="20" the same thing happens when the mouse is hovering just over the very top of <td>. Is there a way to change the color of the link/font strictly dealing with <td> and not <a...>? Thanks.....

[MatthewHSE]

I think this is happening b/c I set the height of each <td> to 20px. So there is a little bit of room between the link and the border where a.MenuItem:hover cannot come in action.

Yes, that could do it.

However, when I don't use the height then it looks kinda cramped.

Try adding some padding to the <a> tag itself. That's what I normally do in these kinds of circumstances.

But even when I get rid of height="20" the same thing happens when the mouse is hovering just over the very top of <td>.

Have you checked to make sure you've specified padding:0 on the <td>? If not, I believe a 2px padding will be applied by default. You need to specify no padding to overcome that.

Is there a way to change the color of the link/font strictly dealing with <td> and not <a...>?

No, not really. But you can get the effect you want by styling the <a> tag. It may take some experimenting with padding, margins, and display properties, but you can get it. Try the suggestions above and see what happens.

[zxk105]

I took a different approach. I made images and placed them in <td>. It solved everything right away. Thanks for the advice though. It makes sense and I'm sure it would work. Take care.......

[MatthewHSE]

It solved everything right away.

Yes, it may have solved the problem you were having, but it may also have created a few usability issues. I don't want to pick apart a system that works for you, but you should consider the potential problems your solution may have created.

For instance, people with text browsers or with images turned off may not be able to use the menu. Additionally, you are almost certainly missing out on the search engine benefits of using actual text. Graphics also take longer to load and are additional calls to the server. And, if you want to use hover effects, using images causes you to need two images for each link. This in turn can cause significant display problems in IE with the default settings, unless you use some method of preloading each of the images, thus further slowing the display of actual page content. If you ever want to change the look of your menu, you'll have to swap out all those images instead of just changing a couple CSS rules. And what happens if/as your site and navigation system grows? More images, more server requests, more loading time . . .

If the images are working for you now, then you need to decide if it's worth all those potential disadvantages. I believe you would be much better off using plain text and learning how to use CSS to style it to meet your needs. I don't want to be dogmatic about it, but you deserve to know all the facts before making a final decision.

[zxk105]

You are right. I did all the graphics which were tiny in size and when I tested it online it wasn't switching the images quickly enough. So I will go back to CSS. If I have more issues I will be back. Thanks for your help and advice....

[zxk105]

We are almost there! I changed everything so now I am using text and CSS. There is however one little problem. In Netscape it works just fine but in IE .hover does not come in action when the mouse is pointing over the cell but not directly over the link even though I am using display: block;. So background and link color stay the same which is not supposed to happen. I think this could be fixed by using &nbsp to fill out the horizontal space. But I was wondering if there is another way?

[MatthewHSE]

Now that we're down to specifics, it might be a good idea if you posted the relevant CSS and HTML code. Right off hand I don't think an &nbsp; would fix the problem you're describing. I do know that it's possible to do what you want, but it's hard to say what to do without seeing your exact setup.

[zxk105]

Well I tried &nbsp; and it worked! Finally, my idea that worked.... :) ...anyhoo here is the HTML for a drop down button (there are only 3 drop down buttons out of 7):

<td height="30" width="100">
<div id="label1"><a href="history1.html" onMouseOver="img1.src=img1on.src; return!showMenu('1', event, 'label1'); menuOver('rollimg2');" onMouseOut ="img1.src='images/history_off.gif';"><img src="images/history_off.gif" name="img1" width="100" height="30" border="0"></a></div>
<div id="menu1" style="width: 260px; position:absolute; z-index:1; visibility:hidden" onMouseOver="event.cancelBubble = true;">
<table border=0 cellpadding=0 cellspacing=1 width="260">
<tr id="1a"><td width="260" bgcolor="#1880FB" onMouseOver="this.style.backgroundColor = '#FDE90E'; window.status='http://www32.brinkster.com/outpostna/history1.html'; return true" onMouseOut = "this.style.backgroundColor = '#1880FB'; status_bar();" onClick="document.location = 'history1.html';" class="MenuBox"><a href="history1.html" class="MenuItem" onMouseOver="menuOver('rollimg2');" onMouseOut="menuOut('rollimg2');"><b>&nbsp;The Rusyn Youth Movement</b></a></td></tr>
<tr id="1b"><td width="260" bgcolor="#1880FB" onMouseOver="this.style.backgroundColor = '#FDE90E'; window.status='http://www32.brinkster.com/outpostna/history2.html'; return true" onMouseOut = "this.style.backgroundColor = '#1880FB'; status_bar();" onClick="document.location = 'history2.html';" class="MenuBox"><a href="history2.html" class="MenuItem" onMouseOver="menuOver('rollimg2');" onMouseOut="menuOut('rollimg2');"><b>&nbsp;Rusyn Youth Organizations in Europe&nbsp;&nbsp;</b></a></td></tr>
<tr id="1c"><td width="260" bgcolor="#1880FB" onMouseOver="this.style.backgroundColor = '#FDE90E'; window.status='http://www32.brinkster.com/outpostna/history3.html'; return true" onMouseOut = "this.style.backgroundColor = '#1880FB'; status_bar();" onClick="document.location = 'history3.html';" class="MenuBox"><a href="history3.html" class="MenuItem" onMouseOver="menuOver('rollimg2');" onMouseOut="menuOut('rollimg2');"><b>&nbsp;The World Forum of Rusyn Youth&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></a></td></tr>
<tr id="1d"><td width="260" bgcolor="#1880FB" onMouseOver="this.style.backgroundColor = '#FDE90E'; window.status='http://www32.brinkster.com/outpostna/history4.html'; return true" onMouseOut = "this.style.backgroundColor = '#1880FB'; status_bar();" onClick="document.location = 'history4.html';" class="MenuBox"><a href="history4.html" class="MenuItem" onMouseOver="menuOver('rollimg2');" onMouseOut="menuOut('rollimg2');"><b>&nbsp;The Carpatho-Rusyns&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></a></td></tr>
</table>
</div></td>
------------------------------------
And here is my CSS for the menu:

td img {
display:block;
margin:0;
padding:0;
vertical-align: bottom;
}

.MenuBox {
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
cursor: pointer;
cursor: hand;
margin:0;
padding:0;
}

a.MenuItem {
COLOR: #FDE90E;
BACKGROUND-COLOR: #1880FB;
FONT-SIZE: 11px;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: None;
FONT-WEIGHT: Bold;
display:block;
margin:0;
padding:2;
}

a.MenuItem:link {
COLOR: #FDE90E;
BACKGROUND-COLOR: #1880FB;
display:block;
margin:0;
padding:2;
}

a.MenuItem:visited {
COLOR: #FDE90E;
BACKGROUND-COLOR: #1880FB;
display:block;
margin:0;
padding:2;
}

a.MenuItem:hover {
COLOR: #1880FB;
BACKGROUND-COLOR: #FDE90E;
display:block;
margin:0;
padding:2;
}
----------------------------

Have fun.......