PDA

View Full Version : iframe issue in IE


AaronCampbell
12-01-2005, 02:45 PM
Ok, I've come across an iframe issue that I can't seem to work out. It's another "this works in everything but IE" type of problem. If you go to http://giftlistusa.com and look at the box on the right side titled "Looking for a Gift?" you can see the problem. In all non-IE browsers, you see 6 ads. 2 columns...3 rows, with a nice gutter down the middle. The problem is...in IE, the top 2 ads (amazon and fossil) do not have a gutter between them. The Amazon ad is an iframe, and I'm 90% sure that this is what is causing the issue. Any ideas would be great.

leptogenesis
12-02-2005, 04:09 PM
I think the best thing you can do is use CSS to play around with the margins. In the iframe tag, I think style="margin-right:1px;margin-left:8px;" ought to do it.

Hope this helps

AaronCampbell
12-02-2005, 05:07 PM
Well, if you look in the CSS, you will see a section that is already dedicated to the ifram:#affiliates iframe {
margin:0;
padding:0;
border:0;
}Anyway, changing that margin to anything more than margin:0 3px 0 0; will cause the Fossil ad to drop down below in all the other browsers. In IE...to make it look right, it really needs to be more like margin:0 5px 0 0;

I found a TEMPORARY fix. I can add _margin:0 5px 0 0; to my stylesheet...only IE sees that. The problem is, is causes my css to be invalid (http://jigsaw.w3.org/css-validator/validator?uri=http://giftlistusa.com/)

The only other option I can think of is conditional comments (http://virtuelvis.com/archives/2004/02/css-ie-only), but that means I have to put CSS into the (x)html, rather than my stylesheet. That's pretty ugly. Hopefully someone here has a better solution.

_Aerospace_Eng_
12-02-2005, 06:53 PM
* html #affliates iframe {
margin:0 5px 0 0;
}

And if you use conditional comments you can still put the styles in an external stylesheet, just like one for IE only or something. I'll look into this problem a bit more later but I am in a hurry at the moment.