Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Weird behavior of iframe in webpage

    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">
    "THE BRIDGE"
    </p>
    <script src="http://www.iradeo.com/Vigalanti/player/34379.js">
    </script>
    </div>
    </div>

    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;
    width:100%;
    height:100%;
    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;
    float:left;
    }
    #player iframe {
    float:right;
    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?

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,930
    Thanks
    46
    Thanked 203 Times in 202 Posts
    I posted this in notepad
    Code:
    <html>
    <body>
    <script src="http://www.iradeo.com/Vigalanti/player/34379.js"></script>
    </body>
    </html>
    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?

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •