PDA

View Full Version : Internet Explorer 7 and 8 add padding inside iframe



shmoyko
Apr 7th, 2010, 03:08 PM
Hello all,

Don't know how to demonstrate this problem other than through either interpretative dance or pictures:

Internet Explorer:
http://autorotation.org/temp/bad.png

Other browsers:
http://autorotation.org/temp/good.jpg

Basically, IE adds some crazy padding to the iframe, where the main content resides (don't ask why I used an iframe - long story).

Is there a way to fix this in CSS?

The URL in question is http://autorotation.org/html/index.php?page=alias-2

Many thanks!

S

zen-angel
Apr 7th, 2010, 03:38 PM
the problem is not with the iframe, but with the css of your page loaded in the iframe - have a look at it in IE7, you get the same strange behaviour:
http://www.landscapehd.com/store2/index.php

my first suggestion would be, remove the position:absolute from div#container (styles.css, line 44)

IE notoriously handles it in a bad way. I presume that you added it to reduce the 12px gap - this can be achieved in a different way, if removing position:absolute works as I suspect :)

HTH
Luca
http://www.zen-angel.com

shmoyko
Apr 7th, 2010, 05:18 PM
Thanks Luca.

I'm afraid removing position and top didn't solve the problem at all.
Any other ideas?

Just out of interest: how would you get rid of the 12px gap without using position?

Many thanks,

Shmoyko

zen-angel
Apr 7th, 2010, 05:25 PM
try adding


width:1120px;
margin:0 auto;
float:left;


to #container. that should work.

you can get rid of


margin-left:auto;
margin-right:auto;


I've incorporated this in the css above - also, margin:auto does not work if there is no fixed witdh specified.

shmoyko
Apr 7th, 2010, 05:39 PM
Thanks! Brilliant. It work.

Cheers!