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!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Menu style is not selecting correctly

Status
Not open for further replies.

Ecniv

Programmer
Nov 18, 2002
93
EU
I have a top menu in css, and I am using an external stylesheet.

It seems that if the class is set first... (topmenu.gallery) and I use that as the menu background it works. But if I change the html to use the other class (shouold give me a different colour background) it uses the default colour background and not the one I selected.

Its obviously something small, but what... help please?

Vince


----- from style sheet external -----
#topmenu {
color: #7A7A7A;
background: #EDE675;
width: 100%;
text-align: center;
padding: 0.2em 0 0.2em 0;
font-variant: small-caps;
font-weight: bold;
font-size: 80%;
font-family: arial,sans-serif;
}
#topmenu a { color:#000; text-decoration: none; }
#topmenu a:hover { color: #0EB2B0; background:#000; }

#topmenu.gallery { background: #69F9F7; }
#topmenu.aboutme { background: #fff; }
---------- snip ------

In the html code I have :
--------
<div id='topmenu' class='gallery'>
<a class='portal' href='./home.htm'>&nbsp;Home&nbsp;</a>&nbsp;|&nbsp;
Gallery&nbsp;|&nbsp;
<a class='aboutme' href='./aboutme.htm'>&nbsp;About Me&nbsp;</a>&nbsp;|&nbsp;
</div>
--------
 
Code:
#topmenu.aboutme    { background: #fff; }
The syntax you are supplying here says that an element that has id set to &quot;topmenu&quot; and class to &quot;aboutme&quot; should have a white background. This element cannot be found in your html. If you want a different background in the <a> element the correct way to put it would be:
Code:
#topmenu .aboutme    { background: #fff; }
meaning: element having a class called &quot;aboutme&quot; which is a descendant of another element which has an id of &quot;topmenu&quot; should have a white background. This element would be found in your html and styled accordingly.
 
ahhh hmmm

Nope.. not cheers..

Just checked it out.
Seems to be sound but when run in ie don't work. Does work if I drop off the #topmenu before the classes.

Just so you know.
 
Glad to hear it's working. Funny enough, the example I posted works fine for me in IE6, Mozilla 1.5 and Opera7.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top