I have used a template for my website. that template contains 2 stylesheets. one is for text and the other is for layout. now i have a master page and a contactUs form uses that masterpage. the master page uses both the above mentioned stylesheets. I have used an accordion in a control. The problem is that the accordion is perfect in the design view of the control control that i have used it in. but as soon as i put it in the contactUs form which uses the above masterpage with the stylesheets, the styles mentioned for a link in the above 2 stylesheets are shown instead of the styles mentioned for accordion header link. what must be the problem? how can I separate all the styles so that the browser doesn't get confused?
+1
A:
Without seeing the contents of the stylesheet it's not possible to say exactly what the conflict between them is. Generally speaking, what's happening is that the two stylesheets have different rules for <a> tags (<a> is the HTML tag for a link).
You should look at the stylesheets, and find the rules that apply to a tags. They'll look like a { color: red } or some such. It's possible that the selector will be more complicated, so that instead of a it could be li a or a.someClass or any of a number of more elaborate things. Then, you can do something like change your template so that the links on one of the parts of the template have a CSS class, and update the relevant CSS selectors to only apply to that class, like a.accordionHeader.
aem
2009-07-15 15:38:15
+1
A:
Just use Firebug to see what style is overriding the other style and why (more specific, declared further down below, etc).
jeroen
2009-07-15 16:52:16
A:
1- First of all take a look at the order of your stylesheets.
2- The last one will override the first ones.
3- Change the order of the stylesheets, just guessing, I can say that you should usa the style for the contact us FIRST, so the general styles will overwrite it.
4- If that's not the case, and the results are not as desired, then you should be more specific about the code of the css with selectors more specific than the ones you are using. (Just like aem told you in his answer).
5- Like aem, with so few information, we can't tell what could happen and what could be done.
If you could be more clear in this topic we could help you in better way.
Bye.