Stop inheritence?

HTML & CSS
1

Hi all,

I have developed a JavaScript Widget for a client, and I tested it on all my sites and it works and looks perfect.

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:


#widget_sm{
	width:180px;
	height:150px;
	border: 1px solid #000000;
}

#search_area_sm{
	width:176px;
	border:1px solid #909ea6;
	margin-left:1px;
}

#language_banner_sm{
	font-size:1.2em;
	color:#ffffff;
	background-color:#2d7fb5;
	cursor:pointer;
}

#search_cont_sm{
	width:176px;
	height:88px;
	background-color:#d4eef6;
}

#radio_area_sm{
	width:176px;
	height:25px;
	padding-top:2px;
	font-size:0.8em;
	color:#a0a0a0;
}

#search_sm{
	width:168px;
	margin-left:1px;
	margin-top:5px;
	color:#a0a0a0;
}

#search_button_sm{
	float:right;
	padding:3px;
	margin:5px 2px 0px 0px;
	color:#ffffff;
	border: 1px solid #ffffff;
    background: #df2131;
}

#search_button_sm:hover{
	background: #ea5864;
}

Many thanks!

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).

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.


#widget_sm{
	width:180px [COLOR="#FF0000"]!important[/COLOR];
	height:150px [COLOR="#FF0000"]!important[/COLOR];
	border: 1px solid #000000 [COLOR="#FF0000"]!important[/COLOR];
}

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. :slight_smile: )

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 :slight_smile:

Thanks again guys, you are ever helpful !! :smiley: