Hi guys, can anyone tell me if there is a 'best practice' way of stopping CSS files from clashing?

 

I'm using a tool called shadowbox, which I'm sure lots of you will be familiar with, but the CSS file it comes with clashes with my own (because it has the same elements in it i.e. body etc). They're obviously not called the same thing but they definitely clash causing the rendered 'live' page to display incorrectly.

 

I'd like to do this the proper way (if there is such a thing) so any advice would be appreciated.

 

Many thanks,

 

Aled

two ways...

 

1. Rename the shadowbox classes and references in the other SB files

2. Rename your own classes!

That's what I was thinking, or change some of your specificity.

 

For example, if you have a div.image in your page, and shadwbox also generates a div.image, then you may want to make your div.image on your page so that say, only div.image that inside #content will follow your rules.

 

so

 

#content div.image { my: rules; }

#shadowbox div.image { other:rules }

two ways...

 

1. Rename the shadowbox classes and references in the other SB files

2. Rename your own classes!

 

Yeah No.1 was what I had in mind, I just thought there might have been a quicker way!

 

Cheers bd (and MolotovRuss)

What I usually do when I code PHP or do CSS, is think up of a prefix for your own stuff. eg. you could put mine_ before all your CSS objects.