johnuk — 2012-02-13T08:43:56-05:00 — #1
My client dropped it into his blog, and the styles don’t show quite as they should.
Although I’m not sure which of his styles are conflicting yet, I know its some of his styles interfering because I removed his styles from the blog page momentarily and the widget displayed correctly.
Is there anyway I can override the other styles? I don’t know who might use the widget in the future so I need to make sure this wont happen on another website.
Here is my style sheet:
border: 1px solid #000000;
border:1px solid #909ea6;
margin:5px 2px 0px 0px;
border: 1px solid #ffffff;
davemaxwell — 2012-02-13T08:57:40-05:00 — #2
Sounds like you're getting tagged by specificity problems - even though you're specifying styles on an specific element using the id specifier, if there are other styles which have a higher specificity count (say two classes or a tag and a class), those will take precedence. I know it doesn't make sense, especially if you're a programmer, but that's the way it works.
I asked a similar question last year, and as you'll see in the thread, it took a while for me to accept it.....I still don't understand why, but I just go with it....
[Here is an amusing infographic which will hopefully explain how the specificity works (original blog post [URL="http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html"]here](http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg)).
ralphm — 2012-02-13T09:10:21-05:00 — #3
In this case, it's probabably best to pull out the CSS sledgehammer and just add !important to any declaration that's likely to meet with conflict. E.g.
width:180px <font color='"#FF0000"'>!important</font>;
height:150px <font color='"#FF0000"'>!important</font>;
border: 1px solid #000000 <font color='"#FF0000"'>!important</font>;
A bit nasty, in a way, but probably the easiest solution in this case. (I've never used !important, but then I don't make widgets. )
johnuk — 2012-02-13T09:46:18-05:00 — #4
@Dave, thanks very much for the usefull Info will read that now.
@Ralph, yes I had considered the !important tags, I will add them in they cant do any harm
Thanks again guys, you are ever helpful !!