CODEWITHSUNDEEP
jqueryhtmlcss
mahdi yamani
mahdi yamani

Reputation: 933

css- conflict in css styles with another css file

I'm working on a website ,the problem is this . I've some div s and tables in my page .

I've written some classes and styles for them and make them looks like the way I want .

then I add a jquery plugin and it had a css file . I include it and a lots of my styles get ruined and changed .

I used !important at class names , try to edit them and it soleve some of them but most of them are still bad .

Is there any way I make the styles separate ? a way to make the jquery css files only work for it self and doesn't effect the whole page ?

Upvotes: 0

Views: 1844

Answers (2)

Tomer Almog
Tomer Almog

Reputation: 3868

you can:

  1. Change your class names
  2. Make sure you include your css after the plugin css (so you override the plugin)
  3. Create a class name for your page and use nested class names (.page-name div.className)
  4. Inspect the elements with something like firebug or any other developer tool and see how the plugin css is overriding your css (with !important, longer nesting or just because it was declared later).

Upvotes: 2

errand
errand

Reputation: 980

no beer and no code makes homer go crazy! there are two options, why the foreign css is fuckin' up your design.

1st - you use the same class and id names.

  • this could be easily countered by changing your class names to something unique. i usually add a prefix to my classes and id's to achieve that...

2nd - the included plugin styles the elements itself and makes no use of class names or ids

  • this can be countered in changing the css loading order. first the plugin, second your own stylesheet.

according to http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ : The last rule defined overrides any previous, conflicting rules.

  • if it's still messing up with some of your elements, then you probably haven't designed those elements in your css and therefore take the other style.

nevertheless, the best approach would be, to take the plugin stylesheet and strip it of everything, that conflicts with your stylsheet, so that you have no more conflicting rules!

Upvotes: 2

Related Questions