CSS in Javascript

[imagined]

I have a page that has a Javascript top page navigation bar.

The page uses CSS to set the hyperlink's properties in the body, but they also affect the links in the Javascript navigation bars.


<!--
HOMEPAGE:
// This line links the page to a CSS file
<LINK REL=stylesheet HREF="CSS/global.css" TYPE="text/css">

//These lines are the Javascript links styles
<style>
all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: bold 12px Arial; color: white; cursor: hand; z-index:100}
#MainTable A:hover {color: yellow;}
</style>

-->

The CSS file global.css superimposes its properties to both the body of the page and the Javascript navigation bar. I don't want the CSS file to affect the Javascript navigation bar. How can I avoid this?

Thanks in advance,

Leo
:red:

[λ]

surround everything in the page with this


<div id="body">
page goes here
</div>

then, in your CSS file, put #body before all the styles you don't want to use on the navbar. For instance:

a:hover {} would become
#body a:hover {}

[imagined]

THANKS!

:beer: