Dynamic Drive : Iframe SSI script II and CSS problem

[visualight]

Script Name: Dynamic Drive : Iframe SSI script II
Script source: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

I have a problem with script Iframe SSI script II and obviously the style of the page to be loaded into the iframe

In fact, when I load my page in the iframe, the script does not resize the iframe in the contents of the page. And my Iframe_IDs is correct.

When I disable CSS style of the page to be loaded in the iframe, the iframe resizes well in contents.

Test the link DEMO with firefox because under Internet Explorer it "work"

Here is a demo : http://www.150.be/test/gallery_details.php?galid=1

The first iframe is the problem
The second iframe is good and resize correctly

Having seen again code css of my page, I found what would pose problem: float:left;.

When i disable float:left in #galleryDetail, the iframe resize good but the layout of my page is not conserved.

I attempt also to put height:100%; in #galleryDetailContainer but it not work correctly. (The iframe grow at every pictures slideshow)

Can you help me to resolve the problem ?

Here is my CSS code


div, h1, h2, p, form, label, input, textarea, img, span{
margin:0;
padding:0;
border:0;
}
/*----------------------------------------- GALERIES PAGE DETAILS*/
/*Icones photo et video*/
#galleryHomeTools img{
float:left;
padding:0 0 0 2px;
}
/*Date de publication et nombre de vues*/
#galleryHomeTools p{
float:right;
font:normal 10px/12px Arial, Helvetica, sans-serif;
color:#878767;
padding:0 10px 2px 0;
}
#galleryDetailContainer{
padding:50px 0 0 0;
}
#galleryDetailDiaporama{
margin: 0 auto;
text-align:center;
}
#galleryDetailDiaporama img{
width:800px;
height:600px;
}
/*Affichage bandeau du titre de la gallerie*/
#bannerGalleryDetailContainer{
background:url(medias/images/bandeautitre.png) 0 0 no-repeat;
width:932px;
height:30px;
padding:0 0 20px 0;
margin: 0 auto;
}
#bannerGalleryDetailContainer p.bannerGalleryDetailTitle1{
font:normal 17px/17px Arial, Helvetica, sans-serif;
color:#FFFFFF;
padding:6px 0 0 20px;
float:left;
}
#bannerGalleryDetailContainer p.bannerGalleryDetailTools{
font:normal 12px/17px Arial, Helvetica, sans-serif;
color:#FFFFFF;
padding:7px 20px 0 0;
float:right;
}
#bannerGalleryDetailContainer p.bannerGalleryDetailTools a{
color:#FFFFFF;
text-decoration:none;
}
#bannerGalleryDetailContainer p.bannerGalleryDetailTools a:hover{
color:#9CCC37;
text-decoration:none;
}
/*Affichage des images de la gallerie*/
#galleryDetail{
float: left;
padding:0 0 0 21px;
margin:0 0 20px 0;
width:170px;
height:175px;
}
/*Images des galeries Full*/
#galleryDetail img.galleryDetailPicture1{
float: left;
display:block;
padding:0 0 0 10px;
width:150px;
height:113px;
}
/*Titre et lien des galeries Full*/
#galleryDetail p.galleryDetailTitle1{
float: left;
font:bold 10px/17px Arial, Helvetica, sans-serif;
background:inherit;
width:150px;
text-align: center;
margin:0px auto;
padding:0 0 0 10px;
}
#galleryDetail p.galleryDetailTitle1 a {
color:#878767;
text-align: center;
text-decoration:none;
}
#galleryDetail p.galleryDetailTitle1 a:hover{
color:#616149;
text-decoration:none;
}
/*Bordure des galeries (sub-container)*/
#galleryDetailBorder{
width:170px;
height:175px;
background:#EEEEEE;
}
#galleryDetailBorder:hover{
background:#DFDFDF;
}


Here is the code of my page :


<div id="galleryDetailContainer">
<div id="bannerGalleryDetailContainer">
<p class="bannerGalleryDetailTitle1">La galerie photo ...</p>
<p class="bannerGalleryDetailTools"><a href="'.$_SERVER['PHP_SELF'].'?galid='.$_GET['galid'].'&action=mini" target="_self">Miniatures</a> | <a href="'.$_SERVER['PHP_SELF'].'?galid='.$_GET['galid'].'&action=diapo" target="_self">Diaporama</a></p>
</div>

<div id="galleryDetail">
<div id="galleryDetailBorder">
<div id="galleryHomeTools">
<a href="'.$photo.'" target="_blank"><img src="medias/images/view.png" alt="View picture" /></a>
<p>Taille: '.$row['photo_size'].'<br />
Type: '.$row['photo_type'].'</p>
</div>
<a href="'.$photo.'" target="_blank"><img class="galleryDetailPicture1" src="'.$photo.'" alt="'.$row['photo_filename'].'" /></a><br />
<p class="galleryDetailTitle1"><a href="'.$photo.'" target="_blank">'.$title.'</a></p>
</div>
</div>

</div>



Here is the start of the code SSI Script :



//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["galerie","galerie1"]


Thank you for your help ^^

Raph

[visualight]

Hello,

I found my problem and i solve it.
The problem is caused by the use of the properties: float:left; and float:right; what involves a problem for the automatic resizing of the iframe.

Imagine: you have a Web page which you coded with properties CSS (style sheet). In this page you wish to post images and you use the property float: left; or float:right; to put them one beside the other.

If you encounter a problem of automatic resizing with this page in your iframe (the iframe is not resized to the content of the page), use the property CSS: clear:left; or clear:right or clear:both; to carry out a jump of line allowing the automatic adjustment of the iframe.

It was simple :D