quick css question

downtroden · 01-18-2005, 09:57 AM

I have a div with a header and some subtext... what I'm wanting is the header (a link) to fill the entire background of the div with a color when hovered.

current css:

Code:

body {
	font-family: arial;
	font-size: 11px;
	padding: 0px;
	margin: 0px;
	}

#box {
	width: 120px;
	border-style: solid;
	border-width: 0px 0px 0px 1px;
	border-color: #000000;
	float: left;
	margin-left: 5px;
	padding: 10px;
	line-height: 14px;
	display: block
	}

#box a:link, a:visited{
	text-transform: uppercase;
	font-weight: bold;
	color: 5599CE;
	text-decoration: none;
	font-size: 14px;
	line-height: 12px;
	}

#box a:hover{
	text-transform: uppercase;
	font-weight: bold;
	color: 5555CE;
	text-decoration: none;
	font-size: 14px;
	line-height: 12px;
	background-color: #CECECE;
	}

sample html:

Code:

<div id="box">
<a href="#">sample header</a><br>
sample sub header, would be a little snippet of text in reality.
</div>

I'm just not seeing why this isn't working? Shouldn't the link of the div fill the background of the div when hovered?

1-True-Love.com · 01-29-2005, 12:56 PM

Dis you try assigning the hover to the box? That might fix your problem.

FGTH · 02-04-2005, 01:42 PM

You're missing the pound signs in your color declarations:

Code:

color: #5599CE;
color: #5599CE;
color: #5555CE;

Also, you should include an alternate and a generic font:

Code:

font-face: Arial, Verdana, Sans;

Quote:

Originally Posted by downtroden

I have a div with a header and some subtext... what I'm wanting is the header (a link) to fill the entire background of the div with a color when hovered.

current css:

Code:

body {
	font-family: arial;
	font-size: 11px;
	padding: 0px;
	margin: 0px;
	}

#box {
	width: 120px;
	border-style: solid;
	border-width: 0px 0px 0px 1px;
	border-color: #000000;
	float: left;
	margin-left: 5px;
	padding: 10px;
	line-height: 14px;
	display: block
	}

#box a:link, a:visited{
	text-transform: uppercase;
	font-weight: bold;
	color: 5599CE;
	text-decoration: none;
	font-size: 14px;
	line-height: 12px;
	}

#box a:hover{
	text-transform: uppercase;
	font-weight: bold;
	color: 5555CE;
	text-decoration: none;
	font-size: 14px;
	line-height: 12px;
	background-color: #CECECE;
	}

sample html:

Code:

<div id="box">
<a href="#">sample header</a><br>
sample sub header, would be a little snippet of text in reality.
</div>

I'm just not seeing why this isn't working? Shouldn't the link of the div fill the background of the div when hovered?