An Iframe Discrepancy

Greetings, all:

 

I'm using an iframe to display some advertising content. The content displays fine, with one notable exception. In Firefox, the content is centered properly, while in Internet Explorer there is white space along the top and left side of the advert. Here's what the difference looks like:

 

Firefox:

 

IE:

 

While the iframe is defined using JavaScript, I believe this is a problem with the iframe attribute. Both 'marginheight' and 'marginwidth' are set to 0. What else can I do to resolve this discrepancy? Thanks in advance.

I would not suggest using an iframe for displaying adverts, plenty on people use browsers that are incompatible with iframes, and if people dont see the advert, your not getting anything out of it.The best thing o do, is use something like google's advertising programme, they just give you some source code to put on your page and you leave it. there are plenty of advertising companies like that.Of course, if you are putting adverts on for a reason other than making profit, you could just save the image to your sites storage, and insert it as an image.

I would not suggest using an iframe for displaying adverts, plenty on people use browsers that are incompatible with iframes, and if people dont see the advert, your not getting anything out of it.The best thing o do, is use something like google's advertising programme, they just give you some source code to put on your page and you leave it. there are plenty of advertising companies like that.
Of course, if you are putting adverts on for a reason other than making profit, you could just save the image to your sites storage, and insert it as an image.

The problem with using raw code, in this case, is that 30-second shares of advertising are going to be sold to clients who may or may not use a module like google's advertising. The adverts need to be rotated based on the links provided by a list (created in XML) which is parsed by Flash, passing each module in turns based on a timer to the javascript that creates the iframe. I tried using ThickBox and also tried creating a DIV with no success and turned to a script I found for dynamic creation of iframes. This solution works, but if a better one exists I'd love to try it out.
Edited November 1, 2008 by BlueInkAlchemist (see edit history)

While the iframe is defined using JavaScript, I believe this is a problem with the iframe attribute. Both 'marginheight' and 'marginwidth' are set to 0. What else can I do to resolve this discrepancy? Thanks in advance.

This looks to me like a padding problem. Try using CSS and specifying the following attributes:

iframe {   padding: 0;   margin: 0;}

Can you post the actual code you are using?Without seeing the code, we can only guess at what the issue and the solution might be.

While the iframe is defined using JavaScript, I believe this is a problem with the iframe attribute. Both 'marginheight' and 'marginwidth' are set to 0. What else can I do to resolve this discrepancy? Thanks in advance.

If html attributes are not working, ('marginheight' and 'marginwidth'), then try CSS:

pyost's suggestion might work. I usually nullify the margins and padding:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {  margin: 0;  padding: 0;  border: 0;  font-weight: inherit;  font-style: inherit;  font-family: inherit;  font-size: 100%;  vertical-align: baseline;  }

Edited November 2, 2008 by pasten (see edit history)

The actual code for the iframe generator is as follows:

function makeFrame(src) {   ifrm = document.createElement("IFRAME");   ifrm.setAttribute("src", src);   ifrm.setAttribute("scrolling", "no");   ifrm.setAttribute("align", "center");   ifrm.setAttribute("marginheight", "0px");   ifrm.setAttribute("marginwidth", "0px");   ifrm.style.width = "300px";   ifrm.style.height = "250px";   ifrm.style.position = "absolute";   ifrm.style.top = "30px";   ifrm.style.left = "505px";   ifrm.style.backgroundColor = "#333333";   document.body.appendChild(ifrm);}

I will try some of the style suggestions here to see if it resolves the issue; if it does I'll be sure to update. Thanks for your input!

If html attributes are not working, ('marginheight' and 'marginwidth'), then try CSS:

pyost's suggestion might work. I usually nullify the margins and padding:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {  margin: 0;  padding: 0;  border: 0;  font-weight: inherit;  font-style: inherit;  font-family: inherit;  font-size: 100%;  vertical-align: baseline;  }

This worked. I added it to the page being displayed by the iframe, and now the look is consistent between Firefox and IE. Thanks so much for your help!