CSS in web part affecting whole webpage


I’m in the process of using Sharepoint 2007 to update an intranet site. There are elements of the site that are generated automatically, such as top and bottom navigation, and this needs to stay as is across the whole site/page as it’s part of the Company branding.

I’ve created a CSS navigation file and included it within a web part. This functions well, however, the styles within the web part are being picked up by the branded navigation in the remainder of the page.

How can I separate the two.

I’m very new to Sharepoint and have some experience with CSS. Please see file attached which holds the CSS coding. Any help on how the information placed in the web part does not effect the remainder of the page would be greatly appreciated.


Hi, instead of waiting for the document to be approved, look at the HTML of both the branded navigation and the other navigation. They most likely share a common ID/class which is being used to style them. Make sure both don’t share the same ID/class (if both are IDs then that’s invalid anyway lol)

Seperate the classes/ID(s)

Thanks. I’ve taken a look and the only thing that is similar across all style sheets across the intranet site is a:link, a:visited, a:hover and a:active. I’m guessing these are elements that cannot be renamed… please correct me if I’m wrong.

I think I’ve got there. Thanks for the prompt.