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!

CSS Works - But Not Understanding How????

Status
Not open for further replies.

Mfho1

Programmer
Dec 21, 2009
32
US
Hi,

I'm reviewing some code. I didn't write it.

Here's the HTML portion.

<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Home</a> </li>
<li><a href="about.html" class="MenuBarItemSubmenu">About</a>
<ul>
<li><a href="oil.html">Our Oil</a> </li>
<li><a href="#">The Land</a></li>
<li><a href="company.html">Company</a></li>
</ul>
</li>
<li><a href="process.html">Process</a> </li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>


Now here's the definition of the CSS that controls this horizontal menu bar:

/* CSS Part 1 */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33421F;
color: #FFF;
}

/* CSS Part 2 */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #32411f;
color: #FFF;
}

Now here's where I'm TOTALLY confused. Maybe I'm not understanding the CSS.

When I change colors in the CSS Part 1, nothing happens. I could change the background-color to pink and the text color to yellow and nothing happens. I've saved the CSS and looked at it in the file.

Now, here's the really ironic part. If I do the same for the CSS Part 2, everything changes.

And I don't know how, because if you look in the HTML code, none of the <a> tags have "a.MenuBarItemHover", or "a.MenuBarItemSubmenuHover", or "a.MenuBarSubmenuVisible". I'm not getting it. Why would this work?

When I see ul.MenuBarHorizontal a.MenuBarItemHover, I take this to read: "Modify All anchor tags with a class of MenuBarItemHover that's contained inside an unordered list that has a class of MenuBarHorizontal."

So I guess my biggest issue is why doesn't CSS Part 1 work, and why is CSS Part 2 working when there's really nothing in my HTML code referencing it?

I've tried to contact the person who wrote this code, but thought I'd get someone else's take on it.

Thanks in advance.

mfho1


Thanks in advance for your help.
mfho1
 
If I were a gambling man, I'd put money on there being some extra Javascript or even JQuery code involved. Specifically to change the classes for the items so the CSS gets applied.

Other than that, as it stands the only thing that actually affects the html would be the first part of the CSS you posted, and it only affects it when the list items are being hovered over, or focused.

Without seeing the rest of the page its hard to be any more specific.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
So "part2" is being loaded last in the cascade then.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Thanks for the posts.

Yes, I'm still researching how this can happen, but I'll take a look at the JS.

Thanks again.

Thanks in advance for your help.
mfho1
 
naraish-kumar.info


go to 'my work' and go to 'css'

i think ive got snippets of code similar to yours - for an ul , where ive removed the bullet points or something and introduced a hover thing.


if u need more info - the contact details are on there, but im out of work and trying to land a job as a programmer of some sort and busy checking emails from web recruitment agencies and prospective mployers.

man i hate the question " so how much COMMERCIAL experience do you have ? " [lol]
 
You seem to be missing css rules for these two also:

<div id="navbar">
<ul id="MenuBar1
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top