DHR
10-24-2006, 03:22 PM
Website URL:http://cars.dhrstudios.com/images.php?album_id=3
My issue is in my web gallery, where the gallery is php driven, and shows any number of images..
There is a main container that holds all the images, and then each image has it's own object.. everything seems to be fine in firefox, but in IE, the images overflow the container.. However, in IE, once the window is resized, the page works, until you hover your mouse overtop one of the images, then it reverts back to the overflow state..
I've tried all the little hacks I could find, like setting the main container height to 1%, but it didn't help any..
Here is some of my code...
STYLE SHEET
#image-holder {
display:inline;
position:absolute;
top:167px;
margin-right:195px;
}
#Content>#image-holder {margin-top:-14px;}
#image {
text-align:center;
margin-bottom:10px;
margin-right:10px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
width:110px;
height:110px;
float:left;
}
WEBSITE PHP
if (@mysql_num_rows($result) > 0) {
$nrows = mysql_num_rows($result);
echo '<div id=Info>';
echo '<form>';
echo "<h1>".$albumname."</h1>";
echo '<h5>Sort By</h5>';
echo '</form>';
echo '</div>';
echo '<div id=image-holder>';
for ($i=0; $i < $nrows; $i++) {
$row = mysql_fetch_array($result);
echo '<div id=image>';
echo '<a href="fullimage.php?image_id='.$row['image_id'].'"><img src="/images/thumbs/'.$albumname.'/'.$row['filename'].'" /></a>';
echo '</div>';
}
echo '</div>';
My issue is in my web gallery, where the gallery is php driven, and shows any number of images..
There is a main container that holds all the images, and then each image has it's own object.. everything seems to be fine in firefox, but in IE, the images overflow the container.. However, in IE, once the window is resized, the page works, until you hover your mouse overtop one of the images, then it reverts back to the overflow state..
I've tried all the little hacks I could find, like setting the main container height to 1%, but it didn't help any..
Here is some of my code...
STYLE SHEET
#image-holder {
display:inline;
position:absolute;
top:167px;
margin-right:195px;
}
#Content>#image-holder {margin-top:-14px;}
#image {
text-align:center;
margin-bottom:10px;
margin-right:10px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
width:110px;
height:110px;
float:left;
}
WEBSITE PHP
if (@mysql_num_rows($result) > 0) {
$nrows = mysql_num_rows($result);
echo '<div id=Info>';
echo '<form>';
echo "<h1>".$albumname."</h1>";
echo '<h5>Sort By</h5>';
echo '</form>';
echo '</div>';
echo '<div id=image-holder>';
for ($i=0; $i < $nrows; $i++) {
$row = mysql_fetch_array($result);
echo '<div id=image>';
echo '<a href="fullimage.php?image_id='.$row['image_id'].'"><img src="/images/thumbs/'.$albumname.'/'.$row['filename'].'" /></a>';
echo '</div>';
}
echo '</div>';