css not overriding external css?

Question

I have an iframe I am working with, when I place it on my wp site and try to apply the css it is not applying, the external css is still there. Please see this page: http://gandlp.com/radio/code-player-test/

If you inspect it and go the .cover class, I am trying to change the width and height to 65px. However it is not applying. I put this in my theme css:

.cover-overlay, .cover {
width: 65px !important;  
}

Help!

<link type="text/css" rel="Stylesheet" href="http://gandlp.com/radio?sccss=1&ver=4.3" />

<iframe name="frame" frameborder='no' scrolling='no' src='http://radio.securenetsystems.net/songdata/v5/index.cfm?stationCallSign=CIDC&width=573' allowtransparency='true' style='width:573px;height:250px;margin-top:10px;overflow-y:auto;overflow-x:hidden;border:1px solid #676767;'></iframe>

<script type="text/javascript"> 
var cssLink = document.createElement("link") 
cssLink.href = "http://gandlp.com/radio?sccss=1&ver=4.3"; 
cssLink .rel = "stylesheet"; 
cssLink .type = "text/css"; 
frames['frame'].document.body.appendChild(cssLink);
</script>

That's how iframes work: you're embedded an external web page within your own web page. Its CSS is necessarily taken from that external CSS, and will ignore any styling on your page. — kittykittybangbang, Aug 31 '15 at 01:00
So there is no way to override? or uplaod the style sheet to my site and or something? — John B., Aug 31 '15 at 01:01
There is a way with JS, there may be a solution here http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe — Shehary, Aug 31 '15 at 01:02
@Shehary hey I updated my original. I update my page to look like the above hoping it will load my css however still not working? — John B., Aug 31 '15 at 01:17
Your frame is from a different domain. You can't use Javascript in frames that aren't coming from your own domain. — Josh LaBau, Aug 31 '15 at 04:22

css not overriding external css?

0 Answers0