3 replies [Last post]
troutdream
Offline
newbie
Last seen: 5 years 51 weeks ago
Timezone: GMT-7
Joined: 2006-08-16
Posts: 10
Points: 0

Hi,

I'm working on a CSS alphabet menu and am making progress but having trouble too. A test is here: http://troutdream.com/alphabet/

I want to have the entire background of each square to change to a darker color and the letter to turn white on hover, but right now the background effect is only on the letter itself - not the cell. When I try adding an onmouseover event to the TD tag, I lose the effects on the letter (it doesn't turn white).

Any ideas? Thanks!

Here's the css I'm using:

.alphabet1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
vertical-align: middle;
border-top: 1px solid #996633;
border-left: 1px solid #996633;
border-bottom: 1px solid #996633;
background-color: #FFFFFF;
}
.alphabet1 a:link {
text-decoration: none;
color: #996633;
}
.alphabet1 a:visited {
text-decoration: none;
color: #996633;
}
.alphabet1 a:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #C3AE98;
}
.alphabet1 a:active {
text-decoration: none;
color: #FFFFFF;
}

Thank you!

troutdream
Offline
newbie
Last seen: 5 years 51 weeks ago
Timezone: GMT-7
Joined: 2006-08-16
Posts: 10
Points: 0

Figured it out: .alphabet1

Figured it out:

.alphabet1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color:#FFFFFF;
text-align:center;
vertical-align: middle;
margin: 0px;
}
.alphabet1 a:link {
text-decoration: none;
color: #996633;
display: block;
width: 17px;
height: 17px;
border-top: 1px solid #996633;
border-left: 1px solid #996633;
border-bottom: 1px solid #996633;
}
.alphabet1 a:visited {
text-decoration: none;
color: #996633;
display: block;
width: 17px;
height: 17px;
border-top: 1px solid #996633;
border-left: 1px solid #996633;
border-bottom: 1px solid #996633;
}
.alphabet1 a:hover {
text-decoration: none;
color: #FFFFFF;
background-color: #C3AE98;
}
.alphabet1 a:active {
text-decoration: none;
color: #FFFFFF;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 1 year 48 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

how about ... .alphabet1

how about ...

.alphabet1 {
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	background:#FFFFFF;
	text-align:center;
	vertical-align: middle;
	margin: 0px;
}
.alphabet1 a {
	text-decoration: none;
	color: #996633;
	display: block;
	width: 17px;
	height: 17px;
	border: 1px solid #996633;
        border-right: none;
}

.alphabet1 a:hover {
	color: #FFFFFF;
	background-color: #C3AE98;
	}
.alphabet1 a:active {
	color: #FFFFFF;
}

shorter, sweeter and less duplication Smile

troutdream
Offline
newbie
Last seen: 5 years 51 weeks ago
Timezone: GMT-7
Joined: 2006-08-16
Posts: 10
Points: 0

Awesome! Thanks!

Awesome! Thanks!