font color not changing in dropdown menu 1

richcleverley · Jan 24, 2007

Hi,

I am trying to get the font colour to change on a css dropdown menu but it's just not working. The background colour changes just fine but not the font.

Can someone have a look and see if they can see what I am doing wrong.

I'll post the code and explain where I think it's going wrong.

HTML code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html>
<head>
<
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="images/styles.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="images/dropdown_ie.css" />
<![endif]-->
<script language="JavaScript" type="text/JavaScript">
<!--
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

</head>

<body onload="MM_preloadImages('images/mainmenu_b1_over.gif','images/mainmenu_b2_over.gif','images/mainmenu_b3_over.gif','images/mainmenu_b4_over.gif','images/mainmenu_b5_over.gif')">
<div class="header">
<img src="images/Allez_top.jpg" alt="image text" />
<ul id="nav">
	<li class="welcome">
	<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Welcome','','images/mainmenu_b1_over.gif',1)"><img src="images/mainmenu_b1.gif" alt="Welcome" name="Welcome"  border="0" id="Welcome" /></a>
	</li>

	<li class="rental">
	<a href="Full_List.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Full_List','','images/mainmenu_b2_over.gif',1)"><img src="images/mainmenu_b2.gif" alt="Full List" name="Full_List" border="0"  id="Full_List" /></a>
		<ul class="rental1">
			<li  class="hov1" style="width:130px;"><a href="Full_list.htm">Full List</a></li>
			<li class="hov1"><a href="Villas_pools.htm">Villas with Pools</a></li>
			<li class="hov1"><a href="Village_houses.htm">Village Houses</a></li>
			<li class="hov1" style="width:130px;"><a href="Shared_pools.htm">Villas Sharing Pools</a></li>
			<li class="hov1" style="width:130px;"><a href="Beach_props.htm">Villas Near Beaches</a></li>
			<li class="hov1" style="width:130px;" ><a href="Golf_props.htm">Golfing Properties</a></li>
			<li class="hov1"><a href="Search.htm">Search Page</a></li>
		</ul>
	</li>
	
	<li class="property">
	<a href="PropCare.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Property_Services','','images/mainmenu_b3_over.gif',1)"><img src="images/mainmenu_b3.gif" alt="Property Care" name="Property_Services"  border="0" id="Property_Services" /></a>
		<ul class="property1">
			<li class="hov1"><a href="PropCare.htm">Our Services</a></li>
			<li class="hov1"><a href="Pricing.htm">Pricings</a></li>
		</ul>
	</li>
	
	<li class="relocation">
	<a href="Assist.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Relocation_Services','','images/mainmenu_b4_over.gif',1)"><img src="images/mainmenu_b4.gif" alt="Relocation Services" name="Relocation_Services"  border="0" id="Relocation_Services" /></a>
		<ul class="relocation1">
			<li class="hov1"><a href="Assist.htm">Our Services</a></li>
			<li class="hov1"><a href="Pricing.htm">Pricings</a></li>
		</ul>
	</li>
	<li class="links">
	<a href="Links.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Links','','images/mainmenu_b5_over.gif',1)"><img src="images/mainmenu_b5.gif" alt="Links" name="Links"  border="0" id="Links" /></a>
		<ul>
			<li class="hov1"><a href="GettingHere.htm">Getting Here</a></li>
		</ul>
	</li>
	
	

	<!-- etc. -->

</ul>


		


</div>



</body>
</html>
[/code}

CSS code
[code]
body {
background-image:url("Grad2.gif");
margin: 0 auto;
font-family:"Times New Roman", Times, serif;
font-weight:bold;
}
.header{
margin-left: auto;
margin-right: auto;
text-align:center;
width:765px;
}
#nav, #nav ul {
	padding: 0;
	margin: 0;
	
	list-style: none;
}

#nav a {
	display: block;
	text-decoration:none;
	font-size:14px;
	color:#3399FF;

	
}


#nav .welcome {
	float: left;
	width:110px;
	
}
#nav .rental {
	float: left;
	width:190px;
	
}

#nav .property{
	float: left;
	width:150px;
	
}
#nav .relocation{
	float: left;
	width:210px;
	
}
#nav .links{
	float: left;
	width:90px;
	
}
#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
}

#nav li:hover ul {
	margin-left:10px;
	background-color:#000066;
	font-size:14px;
	border:1px solid #fdcb34;
}
#nav li:hover ul, #nav li.sfhover ul {
text-align:left;
left:auto;
	margin-left:10px;
	
	
}
#nav  li:hover.hov1  {
background-color:#33CCFF;
color:#FFFF00,
}

OK, I know the code could probably be tidied up but I will come to that later.

I thought that if I put a colour for the font in teh #nav li:hover.hov1 declaration it would change the colour on rollover but it doesn't. The bckground works but not the font.

I know it isn't working in IE yet, and if anyone ha any clues on taht it would be helpful too.

The conditional IE style sheet contains this at the moment

IE CSS code

Code:

#nav li {
	float: left;
	width:100px;
	
}
#nav li:hover ul {
	margin-left:-100px;
	background-color:#000066;
	font-size:14px;
	border:1px solid #fdcb34;
}
#nav li:hover ul, #nav li.sfhover ul {
text-align:left;
left:auto;
	margin-left:-80px;
	background-color:#000066;
	font-size:14px;
	border:1px solid #fdcb34;
}
#nav li.property.sfhover ul.property1 {
	margin-left:-68px;
	
	
}

#nav li.rental.sfhover ul.rental1{
	margin-left:-86px;
	width:150px;
	
}
#nav li.relocation.sfhover ul.relocation1{
	margin-left:-96px;
	
}
#nav li.links.sfhover ul{
	margin-left:-30px;
	#nav  li:hover.hov1   {
background-color:#33CCFF;
color:#FFCC33;
}
	
}

Thanks in advance for any help.

Richard

dwarfthrower · Jan 24, 2007

Try [tt]#nav li.hov1:hover[/tt] instead of [tt]#nav li:hover.hov1[/tt]

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Enable Apps

richcleverley · Jan 24, 2007

Didn't make any difference at all.

I just don't understand why the background colour is changiung but not the font

richcleverley · Jan 24, 2007

Right, still don't understand why the font colour wasn't changing, but I've sorted it by doing normal link styles in the main css. This sorts it out.

Now i just need to get the IE styles to change, both the background and the font colour.

Richard

richcleverley · Jan 24, 2007

Almost there, except in IE6 it's putting the background on the main mrnu item as well as the dropdown items.

Here's my IE styles

Code:

#nav li {
	float: left;
	width:100px;
	
}
#nav li:hover ul {
	margin-left:-100px;
	background-color:#000066;
	font-size:14px;
	border:1px solid #fdcb34;
}
 #nav li.sfhover ul {
text-align:left;
left:auto;
	margin-left:-80px;
	background-color:#000066;
	font-size:14px;
	border:1px solid #fdcb34;
}
#nav li.property.sfhover ul.property1 {
	margin-left:-68px;
	
	
}


#nav li.rental.sfhover ul.rental1{

	margin-left:-86px;
	width:200px;
	
}
#nav .rental1.hov1.li.sfhover {
background-color:#0033FF;
}
#nav li.relocation.sfhover ul.relocation1{
	margin-left:-96px;
	
}

	#nav li.links.sfhover ul.links1{
	margin-left:-30px;
	width:50px;
	
}
	
#nav  li:sfhover.hov1  {
background-color:#0033FF;
color:#FFFF00,
}

with the #nav .rental1.hov1.li.sfhover declaration being the one that controls the background.

Richard

Vragabond · Jan 24, 2007

Maybe you're setting this whole thing up wrong. I suggest you read up on different selectors in CSS. Your line that is giving you trouble means (copied from SelectORacle):

SelectORacle said:
Selects any element with a class attribute that contains the word rental1, a class attribute that contains the word hov1, a class attribute that contains the word li, and a class attribute that contains the word sfhover that is a descendant of any element with an id attribute that equals nav.

Now, I cannot see any element in your html that would even remotely have that many classes applied to it, let alone I know you would probably not name a class li.

richcleverley · Jan 25, 2007

Thanks Vrag,

Yep, looks like I'm going around it in the wrong way. The SelectORacle link is great for explaining these things, thanks for that.

Ok, so now I'm going to have to get the thinking cap on and work this out.

Richard

richcleverley · Jan 25, 2007

still can't get it.

OK, so in firefox, the class that works is

Code:

#nav  li:hover.hov1  {
background-color:#0033FF;

}

so I thought that using the same but with #nav li:sfhover.hov1 would do it for IE (because of the javascript replacing the hover with sfhover, but it doesn't. The background color doesn't change.

Is there anyone that can point me in the right direction? I'm going cross eyed on what should (hopefully) be a simple thing to do. The nearest I have got is to get the background to change, but also having the image at the top of the list change it's background too which is no good (the image is a gif with transparency because the page has a gradiated background.

Thanks,

Richard

Vragabond · Jan 25, 2007

You're misunderstanding the whole thing. Go read some more about selectors and use the Oracle some more. The syntax you're using can be confusing, but it basically means:

A <li> element, when you hover on it that has a class named hov1 and is inside an element with an id of nav. Let's review.

#nav - means it is inside the element with an id of nav (because of the space between #nav and li, it means that #nav is an ancestor of li.
li - means <li> element
:hover - is a pseudo class that means when action of hovering over the element with mouse
.hov1 - is the name of the class.

Now, I would write that differently, because it makes more sense to me.

#nav li.hov1:hover { }

Pseudo classes can be added to any element, but IE supported (before IE7) :hover only on <a> elements. So, you're left with an unrecognized pseudo class. While you can name your classes anything you want, there is a limited number of valid pseudo classes to use.

What the script does, it adds a class called sfhover to li elements when mouse is hovered on (via javascript event call onmouseover). Since we learned that sfhover is not another pseudo class, your idea of substituting it with :hover is wrong. You would need to substitute (or add) it with the class. So, we end up having:

Code:

#nav li.sfhover {
  background-color: #0033FF;
}

Hope it helps.

richcleverley · Jan 25, 2007

Thanks for that great explanation. Yes I certainly do need to read some more!!

However, when I use the css you suggest (you were weren't you??) the top element in the menu also changes it's background colour which I defintely don't want.

The hover class is fine as it's for Firefox like I mentioned, I fully understand that sfhover is the way I need to refer it to in the IE stylesheet.

Richard

Vragabond · Jan 25, 2007

Have you a live version of this page? It seems like it would be an easy fix if only we had the complete data. Also, that line that I just gave you was an addition to the existing declaration, not a change of one that you already have. Also, depending on the code, you might need to add more dependencies.

richcleverley · Jan 25, 2007

Vrag,

I have put a copy of the header online for you to have a look at. Go to

http://www.ictechnology.net/allez

and you should get it.

The ie css file is imported in but you will see where in the code.

Loads of other css in the files for other bits - I know it needs tidying up!

Thanks,

Richard

Vragabond · Jan 25, 2007

Ok, there could be an easier way, but I am having a brain fart right now. Add this to the mix (and remove everything else that we tried before):

Code:

#nav li.sfhover li.sfhover {
	background-color: #0033FF;
}

richcleverley · Jan 25, 2007

Yep, that's the one,

Thanks a load Vrag, I wouldn't have thought about that in a million years!!

Richard

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

font color not changing in dropdown menu 1

richcleverley

MIS

dwarfthrower

Programmer

richcleverley

MIS

richcleverley

MIS

richcleverley

MIS

Vragabond

Programmer

richcleverley

MIS

richcleverley

MIS

Vragabond

Programmer

richcleverley

MIS

Vragabond

Programmer

richcleverley

MIS

Vragabond

Programmer

richcleverley

MIS

Similar threads

Part and Inventory Search

Sponsor