Overwriting the css property of an external java script file not working correctly

Question

I'm trying to overwrite the styling of an element in an external java-script file.

If I paste this code into a local file :

<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6343621.js"></script>
<noscript><a href="http://polldaddy.com/poll/6343621/">New Poll</a></noscript>

<style>
.pds-links {
    display: inline !important;
}
</style>

and run within Google chrome I receive this error on inspection on the class '.pds-links' :

The css property is correct as when I run this code in a fiddle all of the elements display inline : http://jsfiddle.net/YsEmj/

How can I successfully overwrite the 'display' property of the .pds-links style? Is the reason this is occurring that the javascript file is being loaded before the .css property can be applied to it, if this is the case do I need to use jQuery to update the style ?

Answer 1

I got this to work by overriding all of the values generated by the style. The script generates this style :

.pds-links {padding: 10px 0px 0px 0px;display: block;text-align: center;}

Using this style causes the all of the items to appear inline :

.pds-links {padding: 10px 0px 0px 0px;display: inline !important; text-align: center;}

I'm not sure why the style does not get utilized when I just override the display property : .pds-links { display: inline !important; } I may a separate question to address this.

Answer 2

The poll script is adding a style tag to the end of the head. If your stylesheet comes before it, and their style also specifies !important it will override your style.

Here's the gunk the script is adding:

<style type="text/css" id="poll_style6343621">#PDI_container6343621 .pds-box{font-family: Helvetica, Arial, sans-serif;background: #fff;border: 1px solid #ccc;width: 300px;font-size: 12px;text-align: left;color: #4e4e4e;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;} #PDI_container6343621 .pds-box A{outline: none;} #PDI_container6343621 .pds-clear{display: block;clear: both;} #PDI_container6343621 .pds-box-outer{padding: 12px;} #PDI_container6343621 .pds-question-top{font-size:14px;line-height: 120%;color: #333;font-weight: bold;padding: 5px 0px 15px 0px;position:relative;} #PDI_container6343621 .pds-answer{padding: 10px 0px 10px 0px;border-top: 1px solid #e8e8e8;border-bottom: 1px solid #e8e8e8;} #PDI_container6343621 .pds-answer label{color: #333;font-size: 13px;line-height: 150%;position: relative;} #PDI_container6343621 .pds-answer-group{display: block;padding: 8px 0px 8px 0px;} #PDI_container6343621 .pds-answer-group BR{display: none;} #PDI_container6343621 .pds-answer-input{display: block;float:left;width: 25px;} #PDI_container6343621 .pds-input-label{display: block;float:left;width: 245px;cursor: pointer;} #PDI_container6343621 .pds-answer-other{padding: 0px 0px 0px 10px;} #PDI_container6343621 .pds-textfield{background: #FFF;border: 1px solid #d1d1d1;font-size: 12px;padding: 2px;width: 150px;} #PDI_container6343621 .pds-answer-other BR{display: none;} #PDI_container6343621 .pds-other-label{display: block;float:left;cursor: pointer;} #PDI_container6343621 .pds-feedback-group{display: block;padding: 8px 0px 8px 0px;} #PDI_container6343621 .pds-feedback-label{display: block;padding: 0px 0px 5px 0px;} #PDI_container6343621 .pds-feedback-result {float:right;} #PDI_container6343621 .pds-answer-text {float:left} #PDI_container6343621 .pds-feedback-per{font-weight: bold;} #PDI_container6343621 .pds-feedback-votes{font-weight: normal;} #PDI_container6343621 .pds-answer-feedback {background-color: #f1f1f1;border: 1px solid #d1d1d1;position: relative;} #PDI_container6343621 .pds-answer-feedback-bar {font-size: 2px;background: #3478e3;height: 18px;} #PDI_container6343621 .pds-vote {padding: 10px 0px;} #PDI_container6343621 .pds-votebutton-outer {} #PDI_container6343621 .pds-vote BR{display: none;} #PDI_container6343621 .pds-vote-button {color: #464646;padding: 3px 25px;white-space: nowrap;background:#F2F2F2 url(http://s3.wordpress.com/wp-admin/images/white-grad.png) repeat-x scroll left top;-webkit-border-radius: 11px;-moz-border-radius:11px;border-radius: 11px;border: 1px solid #999;cursor: pointer;font-size: 12px;font-family: "Lucida Grande",Verdana,Arial;text-decoration: none;line-height: 25px;font-weight: bold;white-space: nowrap;} #PDI_container6343621 .pds-vote-button:hover{border: 1px solid #333;} #PDI_container6343621 .pds-vote-button-load {color: #464646;padding: 3px 25px;white-space: nowrap;-webkit-border-radius: 11px;-moz-border-radius:11px;border-radius: 11px;border: 1px solid #999;cursor: pointer;font-size: 12px;font-family: "Lucida Grande",Verdana,Arial;text-decoration: none;line-height: 25px;font-weight: bold;white-space: nowrap;background:#EEE url(http://i.polldaddy.com/polls/vote-loader-eeeeee.gif) no-repeat scroll 50% 50%;} #PDI_container6343621 .pds-vote-button-load SPAN{visibility: hidden;} #PDI_container6343621 .pds-links {padding: 10px 0px 0px 0px;display: block;text-align: center;} #PDI_container6343621 .pds-links-back {padding: 10px 0px 0px 0px;display: block;text-align: center;} #PDI_container6343621 .pds-links A {font-family: Helvetica, Arial, sans-serif;font-size:12px;color: #4e4e4e;text-decoration: none;padding: 0px 4px 0px 4px;line-height: 24px;display: inline-block;font-weight: bold;} #PDI_container6343621 .pds-links-back A {font-family: Helvetica, Arial, sans-serif;font-size:12px;color: #4e4e4e;text-decoration: none;padding: 0px 4px 0px 4px;line-height: 24px;display: inline-block;font-weight: bold;} #PDI_container6343621 .pds-links A:hover {text-decoration: underline;} #PDI_container6343621 .pds-links-back A:hover {text-decoration: underline;} #PDI_container6343621 .pds-comments SPAN{font-weight: normal;} #PDI_container6343621 .pds-total-votes{padding: 10px 0px 0px 0px;position: relative;} #PDI_container6343621 .pds-total-votes SPAN{font-weight: bold;} #PDI_container6343621 div {margin:0;padding:0;}</style>