View Full Version : Weird behavior of iframe in webpage

02-14-2012, 09:18 PM
Hi thank you for taking the time to hear out my problem I've been having with a website I've been working on.

The person I've been building a new site for wants his iradeo player embedded in his site. The player uses a script to load an iframe into the HTML. I simply copied and pasted the <script> link into my webpage and it works fine in all browsers except for IE. The weird part is when I view his current site the script runs fine in IE. Here is his current site: www.vigalanti.com

You can see the iradeo music player loads fine. But when I've inserted the <script> link into my own HTML IE fails to load the content into the iframe. It only loads a white box where the content should be. I have no clue why it is doing this and haven't been able to find any solutions to this particular problem. The site I am working on is not online yet but I'll provide as much as possible.

Here is how I have used the script in my HTML:

<div id="right">
<div id="player">
<p class="textplayer">
<script src="http://www.iradeo.com/Vigalanti/player/34379.js">

And here is the CSS I'm using for the elements:

body {
background: #323232;
font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif;
font-size: 75%;
line-height: 1.7em;
margin: 0;
div#right {
background: #000 url(images/mainheader_03.jpg) no-repeat;
width: 500px;
height: 684px;
margin: 0px;
padding-left: 12px;
float: right;
#player {
background: #000;
width: 420px;
height: 60px;
margin-left: 8px;
padding: 0px;
.textplayer {
font-family: Impact, sans-serif;
width: 180px;
height: 56px;
margin: 0px;
padding-left: 30px;
padding-top: 20px;
color: #e81717;
font-size: 1.9em;
#player iframe {
margin-right: 20px;
margin-top: 3px;

As I said the weird thing is the player executes fine in IE on his running site but in the same browser running my local page of this HTML it only renders a white box with no content. The only difference between the two I can see is when I run my page the script added some inline styles to the iframe:

<iframe name="iradeo-player" width="175" height="50" id="iradeo-player" src="http://www.iradeo.com/Vigalanti/player/34379" frameBorder="0" style="border-bottom: 0px; border-left: 0px; width: 175px; height: 50px; border-top: 0px; border-right: 0px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;">

While the current site's script does not add this extra style info:

<iframe width="175" height="50" id="iradeo-player" style="" submitName="iradeo-player" src="http://www.iradeo.com/Vigalanti/player/34379" frameBorder="0">

I am guessing that the extra CSS styles are messing up compatibility but that's only an uneducated guess and even if it is I don't know how I would fix a scripting problem if that's the case. Also, on his site there dosen't appear to be any CSS attached to the iframe element at all, or the elements above it. I tried not using any CSS on the iframe or containing elements but it still failed to load. I am pretty much stumpted by another IE problem I don't know how to fix. Any suggestions or help anyone?

02-14-2012, 09:40 PM
I posted this in notepad

<script src="http://www.iradeo.com/Vigalanti/player/34379.js"></script>

and it rendered fine in IE7, IE8, IE9, IE9Compat (even though it is completely invalid code as is)...
It did take a second to load though- Did you see the box and panic?

02-15-2012, 05:34 PM
No I waited. I was able to get the code to render in the same way too messing around with it. The problem isn't that the code dosen't work period, it's that it dosen't work the way I've used it in my HTML markup for some reason. IDK why. I guess It'll be hard for you guys to figure that out until you can look at the whole page online.

I'm about to post the page in it's entirety and you can see exactly how I've used the script in the page re-design in a day or so.