richcleverley
MIS
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
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
Thanks in advance for any help.
Richard
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