IE misplacing content in iframe

Get Started
1

Hi there everyone,

I’ve got a problem with the shortbus of browsers.

Due to templating and database restrictions, I need to use an iframe to show banners. The banners are a fixed size, so it’s a pretty simple implementation.

First, my iframe code:

<iframe name="Advertising" src="/includes/banner_show_external.php" width="475" height="70" frameborder="0" scrolling="no"></iframe>

Now, my html content being generated in the iframe src file:

<html>
        <head>
        </head>
        <body bgcolor='#f7f7f7'><a href='[/click.php' target='_blank'><img src='[URL="http://www.sitepoint.com/forums/view-source:http://www.husaberg.org/images/advertisements/taffy.gif"]http://www.husaberg.org/images/banner.gif](http://www.sitepoint.com/forums/view-source:http://www.husaberg.org/clickthrough.php?bid=23)' alt='UHE Advertisement' title='UHE Advertisement' border='0'></body>
        </html>

*Note that initially I had no code other than the link, but since IE also placed a white bg on the src frame, I had to include the basic html.

Now for the views:

In Firefox:

In Opera:

And in IE 8:

The banners are sliding down and to the right in the frame on IE only. On the others, the banner is showing properly. The banners are all 468x60 so I made the frame larger(you can see the final size in the code above), but IE just keeps pushing the banner outside the frame. I can’t afford to make it any larger.

Does anyone have any ideas on getting the single image to start in the upper left of the iframe for IE? I would love to be able to shrink the iframe size back down to where it belongs.

thanks,
json

2

Are all three images supposed to be the same? They look the same to me…

3

Of note in the third image is the fact that the text at the bottom of the banner is being cut off. Some banners have quite important information at the bottom(like phone numbers) that are unreadable in IE.

thanks,
json

4

just a guess…but it could be the default margin and/or padding of the html page within the iframe pushing your image. try zeroing the values to see if it makes any difference.

5

But as posted above, this is the code of the embedded page:


<html>
<head>
</head>
<body bgcolor='#f7f7f7'><a href='[/click.php' target='_blank'><img src='[URL="http://www.sitepoint.com/forums/view-source:http://www.husaberg.org/images/advertisements/taffy.gif"]http://www.husaberg.org/images/banner.gif](http://www.sitepoint.com/forums/view-source:http://www.husaberg.org/clickthrough.php?bid=23)' alt='UHE Advertisement' title='UHE Advertisement' border='0'></body>
</html>

Which is to say, there is no padding or spacing going on in the embedded page.

Do I need to add some style to it to tell IE to ignore style rules that aren’t there?

thanks,
json

6

yes. all browsers have default values for several properties…including margins. since the embedded page has no styling, what I’m assuming is that the default margin values are pushing your image down.

to see if that’s the problem, try zeroing the margin value inline…

<body bgcolor=‘#f7f7f7’ style=“margin:0px;”>

7

That did it. I can’t thank you enough as it was driving me batty :slight_smile:

thanks,
json