CSS Problem??

Ziycon

Im trying to get the color of the text to change when the mouse is over the link, i have added a background color and font color in the '#nav li:hover, #nav li.sfhover' block and the background changes fine but the text color wont change! Any ideas????

#nav, #nav ul
{
	float: left;
	width: 100%;
	list-style: none;
	line-height: 1;
	background-color: #000;
	font-weight: bold;
	font-size: 12px;
	padding: 0;
	border: solid #CCC;
	border-width: 1px 0;
	margin: 0 0 0 0;
}
#nav a
{
	display: block;
	width: 10em;
	w\idth: 11em;
	color: #fff;
	text-decoration: none;
	padding: 0.25em 1em;
}
#nav li
{
	float: left;
	padding: 0;
	width: 10em;
	text-align: left;
}
#nav li ul
{
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em;
	w\idth: 14.4em;
	font-weight: normal;
	border-width: 1px;
	margin: 0;
}
#nav li li
{
	padding-right: 0em;
	width: 13em;
}
#nav li ul a
{
	width: 13em;
	w\idth: 9em;
}
#nav li ul ul
{
	margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul
{
	left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul
{
	left: auto;
}
#nav li:hover, #nav li.sfhover
{
	color: #000;
	background-color: #fff;
}

Liam Byrne

Can't say for definite without seeing the page, but if the link is the

#nav li ul a
{
width: 13em;
w\idth: 9em;
}

Then the "changed colour" should be implemented using

#nav li ul a:hover
{
width: 13em;
w\idth: 9em;
color: red;
}

Ziycon

That did'nt work! Does anyone know of a bug with firefox and the background property in css???

louie

is there anywhere we can see the code live?

the properties for "a" are :

a:link, a:visited{color:#ffffff;background-color:#000000;}
a:hover{color:#000000;background-color:#ffffff;}

Ziycon

louie wrote:

is there anywhere we can see the code live?

the properties for "a" are :

a:link, a:visited{color:#ffffff;background-color:#000000;}
a:hover{color:#000000;background-color:#ffffff;}

The sites not live yet! Also the "a" properties aren't being used for these links, these are the main navagation links!

louie

it doesn't matter, you still have to use them. very hard to help you if there is nothing for us to look at.

Liam Byrne

Also the "a" properties aren't being used for these links, these are the main navagation links!

ALL links are (or should be) "a" tags, so (in the absence of a class or ID, or a programmed solution) the ONLY way to style them is to use an "a" tag's style!

Firefox ignores (some) :hover rules when in "quirks" mode. Can't say for definite without seeing your code, but try adding a full doctype.

Ziycon

Thanks lads, i dont have anything to show yet as the sites all offline but i understand what you's are saying! Thans again!

forbairt

Ziycon wrote:

Thanks lads, i dont have anything to show yet as the sites all offline but i understand what you's are saying! Thans again!

You don't have to show the whole site ... just the actual problem .. should take 3 - 4 minutes to put up the code in question course it could be something to do with the rest of the code in your page ...