Previous Message
Next Message

Problem with background color change on hover

Sent by Kimberley Wilcox on 28 March 2006 20:08

This is probably a newbie mistake (I'm still learning CSS), but I am having
trouble with changing the background-color for a:hover on my list items. I
would like for the whole block to change from gray to white, and currently
only the area behind the text changes color.

You can see the problem in both IE and Firefox at; this
is a devel server, so you will likely get some security warnings--our server
admin hasn't updated the security certificate in a while. Here's a
screenshot if you don't want to risk it:

Here's my CSS for the navigation links:

/* navigation bar link area */
    border-bottom: 1px solid #666666;
    margin-top: -3px; /* Pulls up content to cover up browser-imposed gaps
    width: 170px;

/* navigation links; note that links are expressed as list items */
#navigationlinks ul {
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;

#navigationlinks li {
    padding: 4px;
    border-top: 1px solid #666666;
    background-color: #dddddd;
    color: #333333;

#navigationlinks li a {
    width: 100%;

#navigationlinks li a:hover {
    background-color: #FFFFFF;

/* in-text link styles */
a:link, a:visited, a:active, a:hover{
    color:#6699cc; text-decoration:none

Here's the HTML:

<div id="navigationlinks">
<li><a href="#">About SCIL</a></li>
<li><a href="#">Events/Reports</a></li>
<li><a href="#">Minutes</a></li>
<li><a href="#">Officers</a></li>

Could someone please tell me what I am doing wrong? Thank you so much!
css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: