CSS - Style Change Help

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

i have a link which has some parenthesis within the anchor tags, now what i was wondering was whether i could change the style (colour to be exact) of the parenthesis without adding extra tags into the html.

Thanks for any assisstance

eg:
Order By (DESC)
to become
Order By ( DESC )

Hi guys...
Would u mind to see this site I'm working ...

http://diario.coldfusion-vpm.com
It is being done in Mambo (www.mamboserver.com)

And i would like to know why it sees OK in Firefox but it sees bad in IE, specially left & middle colum, they see overlapped, very strange

CSS file:
http://diario.coldfusion-vpm.com/templates/maiputotal/css/template_css.css

thanks a lot in advance

Hey all,

I am having a little trouble with some stylesheet/javascript. I am trying to change the style on mouse over of another element.

I have a DL with one DT & and one DD.

I would like to be able to change the style of the DD on mouse over the entire DL. I'd like to change the class 'background' to 'backgroundOver'.

The code:

Code:

<dl>
  <dt>
    <p>Text</p>
  </dt>
  <dd class="background">
    <p>Text</p>
  </dd>					
</dl>

Any help with this would be much appreciated.

Cheers in advance.

I have an unordered list that I'm making into a navigation menu. It's all working except for the first item in the list. I don't think I've missed anything but let me post the code and get a 2nd opinion. Thanks in advance for the help:

Code:

@charset "utf-8";
/* CSS Document */

#wrapper
{
	width: 700px;
	position: absolute;
	top: 50px;
	left: 150px;
	margin: 0px 0px 0px 100px;
}

body
{
	background-image: url(images/bg1.png);
	background-repeat: repeat;
	margin:0 0 0 0;
}

#banner
{
	height: 125px;
	width: auto;
	background-image:url(images/banner.jpg);
	background-repeat:no-repeat;
}

#content
{
	
	width: 400px;
	position: static;
	background-color: #e8caa6;
	font-size: 18px;
	
	margin: 0px 318px 0px 0px;  /* 318px right 125px for centered */
	padding: 10px 5px 10px 5px;
	border-style:solid;
	border-color:#000;
	border-width:10px;
}

#movietable
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#footer
{
	padding: 0px 0px 0px 0px;
	margin: 0px 50px 10px 50px;
	text-align: center;
	font-size: 14px;
}

#footer a 
{
	text-decoration: none;
	color:#333;
	font-weight:500;
}

#footer a:link
{
	text-decoration:none;
}

#footer a:hover
{
	text-decoration:none; 
	background:#d9d3c6;
}

#footer a:visit
{
	text-decoration:none;
}

#nav ul
{
	list-style: none;
	width: 700px;
	position: relative;
}

#nav span 
{
	display:inline;
}

#nav
{
	height: 40px;
	background-color: #8D5C22;
}

#nav li 
{
	float: left;
	margin: 0 0.15em;
} 

#nav li a
{
	height: 40px;
	line-height: 40px;
	float: left;
	width: 167px;
	display: block;
	/*border: 0.1em solid #dcdce9;*/

	text-align: center;
}

a.home:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.home:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.home:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }

a.restaurants:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.restaurants:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.restaurants:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }

a.servicearea:link{ color: #FFF; text-decoration: none; font-size: 2.0em; font-weight: bold; }
a.servicearea:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.servicearea:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }

a.contact:link{ color: #FFF; text-decoration:none; font-size: 2.0em; font-weight: bold; }
a.contact:hover{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:active{ color: #FF0; font-size: 2.0em; font-weight: bold; text-decoration: none; }
a.contact:visited{ color: #FFF; font-size: 2.0em; font-weight: bold; text-decoration: none; }

Html
Code:

<body>
<div id="wrapper">
    <div id="banner">
        <!-- blah -->
    </div>
    
    <div id="nav">
        <ul id="navblock">
          <li id="nav1"><a href="index.html" class="home"><span>Home</span></a></li>
          <li id="nav2"><a href="rest.html" class="restaurants"><span>Restaurants</span></a></li>
          <li id="nav3"><a href="area.html" class="servicearea"><span>Coverage</span></a></li>
          <li id="nav4"><a href="contact.html" class="contact"><span>Contact</span></a></li>
        </ul>
  </div><!-- End Nav -->

You can check the site live here .