asked on

Dynamic iframe and css in page stops the rest of webpage displaying correctly

Hi,

I've got a problem with an <iframe> and css. Basically, the code seems to run fine and display correctly in Firefox. However, when I run the same page in IE 6 & 7, it does not display. I've tried customising the css - but still the iframe does not display correctly.

If you have a look at this page, you will see the problem.

http://test.impalasoft.com/test.aspx

In Firefox, you will notice that some text ("You should view this text here"), displays after the image. However, in IE, the text does not appear correctly. Why is this??

I'm trying to write the iframe using document.write so that it is created dynamically. I'm also writing the css style using the same method.

document.write("<style type=\"text/css\">");
document.write("div#frame, div#image { float: left; margin: 0px 0px 0px 150px;}");
document.write("</style>");

document.write("<div id=\"frame\">");
document.write("<iframe src=\"https://test.impalasoft.com/serve.aspx?wid=" + wID + "&cid=" + cID + "&host="+ window.location.host + "&platform=" + window.navigator.platform + "&href=" + window.location.href + "&appName=" + window.navigator.appName + "\"");
document.write("height=\"100\" width=\"768\" frameborder=\"0\" scrolling=\"no\"");
document.write("Alternative text for browsers that do not understand IFrames.");
document.write("</iframe>");
document.write("</div>");

thanks
Oz

VincentPuglia

I only took a quick glance at code.js, but it seemed it was missing a closing </iframe>. So, being the impetuous squirt that I am, I inserted one directly before the </div>

<div id="frame">

<script language="javascript" type="text/javascript" src="https://adstats.getadvert.com/scpts/code.js"></script>
<script language="javascript" type="text/javascript">
wID = "{EB979CBB-2930-4DDB-AD5F-066F90FC7FCE}";

ServeAd();
</script>
</iframe>
</div>

and viola! it works in both ie7 & firefox.
Why it worked for FF originally, I have no idea and no time to figure it out...I've got to meet my woman.

VincentPuglia

also, I would change the id of the div ('frame') .... If IE & FF don't get confused looking at it, people will. Never give a variable a string that can be construed as a keyword.

If the code you posted was used to construct the page at the link, assign everything to a string & alert the string -- because you are not writing out the </iframe>

ossentoo

ASKER

Hi VincentPugli,

Let me take a look and get back to you.

The actual function ServeAd() in code.js looks like this:

unction ServeAd()
{
document.write("<style type=\"text/css\">");
// document.write("div#frame, div#image {float: right: 0; width: 0%; left: 0%; margin: 0; padding: 0; } ");
document.write("div#frame, div#image { float: left; margin: 0px 0px 0px 150px;}");
// document.write("div#frame iframe { width: 100%; height: 100%; margin: 0 0 0 0; } ");
// document.write("div#image img { width: 768px; height: 100px; padding: 0; margin: 10px; border: none; }");
document.write("</style>");

document.write("<div id=\"frame\">");
document.write("<iframe src=\"https://test.impalasoft.com/serve.aspx?wid=" + wID + "&cid=" + cID + "&host="+ window.location.host + "&platform=" + window.navigator.platform + "&href=" + window.location.href + "&appName=" + window.navigator.appName + "\"");
document.write("height=\"100\" width=\"768\" frameborder=\"0\" scrolling=\"no\"");
document.write("Alternative text for browsers that do not understand IFrames.");
document.write("</iframe>");
document.write("</div>");
}

As you can see in the 3rd last line - there is a close tag for the iframe </iframe> - so I'm surprised, it's almost as if it is not being written out?

thanks

ASKER CERTIFIED SOLUTION

LeeKowalkowski

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

VincentPuglia

Lee is correct. The 'true' problem is a lack of ">" for the opening iframe tag:
document.write("'Alternative text for browsers that do not understand IFrames.'>");

Vinny

LeeKowalkowski

I think that text is supposed to be between the IFRAME's tags, so:

document.write("height=\"100\" width=\"768\" frameborder=\"0\" scrolling=\"no\">");

--
Lee

VincentPuglia

possibly...I haven't had enough mugs of espresso yet to fully awaken :)

ossentoo

ASKER

Thanks a lot.