IE issue with embedded Divs and links

[rmagnes]

I'm trying to build a php based photo gallery and IE seems to be getting confused with my div order and links. This is pretty difficult to explain, but basically when a user roles over a thumbnail image in Firefox, it links to the larger image. However, when a user trys this in IE, the image does not link to the larger image; only the border space created by the parent div is clickable. I know this is difficult to visualize, so take a look for yourself:
http://wakaorphanage.org/photos.php
Try that link in Firefox first to see how the script is supposed to work and then take a look at it in IE. See how you can't click on the image in the middle of each thumbnail box in IE? That's not intentional.

Here is the PHP script that runs the thumbnail boxs:


// display thumbnails in unordered list format
echo "
<div id='imgright'><div id='sthumb-box2'><h";
echo $header+1;
echo "";
echo $header+1;
echo "><ul>";
for ($i = 0; $i <= $result; $i++){
if(is_file($path.'/'.$photo[$i])) {
$alt = $image[$i][2];
echo "
<li><div id='stretchbox'><a href='?a=$i'><div id='squareit'><img src='$path/$photo[$i]' alt='$alt' border= 0 /></div></a></div></li></span>
";
}
}
echo "
</ul></div></div>";


1.Div imgright is used to align all of the thumbnails next to the main image display

2.Div sthumb-box2 is used to create that niffty little grey border that lights up when a user rolls over the thumbnail.

3.Div stretchbox is an IE hack, which I designed to evenly space out all of the thumbnails.

4.Div squareit was designed to cut the thumbnail images down to a perfect square without distorting them. I did this so that I did not have to cut each thumbnail down individually in photoshop. Theoretically, it was supposed to make my life easier!

Ok and here is the corresponding style sheet info:



#stretchbox {
min-width: 110.5px;
min-height: 110.5px;
padding-right: 10.5px;
padding-bottom: 10.5px;
}


#sthumb-box2 ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#sthumb-box2 li {
margin-right:0px;
float:left;
}

#sthumb-box2 a {
outline: none;
display:block;
height:100px;
width:100px;
padding-top:9px;
padding-left:9px;
border:#CCCCCC 1px solid;
float:left;
text-decoration: none;
overflow: hidden;
}

#sthumb-box2 a:hover {
border:#999999 1px solid;
overflow: hidden;
}

#squareit {
width:90px;
overflow: hidden;
margin-right:5px;
display: block;
}


Give me your thoughts, I am willing to give anything a shot.

[boogyman]

that is reloading the page every single time an image is clicked, so it has nothing to do with your reference code, however at the same time you should be breaking out of PHP anytime you are parsing HTML. also you have some extraneous code that doesnt seem to serve any viable purpose. eg. the header (h3) tag and the <span> both seemingly useless as they do not refer to anything, and they are actually hindering the use of proper semantic code.


// display thumbnails in unordered list format
echo ?>
<div id="imgright">
<div id="sthumb-box2">
<ul>
<?php for ($i = 0; $i <= $result; $i++){
if(is_file($path.'/'.$photo[$i])) {
$alt = $image[$i][2];
echo ?><li><a href="?a=<?php echo $i; ?>"><img src="<?php echo $path/$photo[$i]; ?>" alt="<?php echo $alt ?>"></a></li>
<?php }
}
echo ?>
</ul>
</div>
</div>

[rmagnes]

I'm not totally sure I understand what you think I need to do here. How do I go about achieving the effect I am looking for without 'parsing html' in the code?

here is the rest of the script:

<?php

// PHP Gallery Navigation Script: Configuration set in index.php
echo "
<div id=''>";
//starting variable
$y = 0;
// open file and set into array of thumbnails
// append _tn to end of file name to access thumbnails
// thumbnails must be have:
// identical file names to full size images
// no periods
// same file type as full size images
$fp = fopen($piclist, 'r');
while ($buffer= fgets($fp,4096)) {
$image[$y] = explode("|", $buffer);
$photo[$y] = str_replace(".", "_tn.", $image[$y][0]);
$y++;
}
// calculate total number of images
$result = count($photo);
// numeric value of final image where initial image = 0
$suma = ($result-1);
// calculate image values based on currently viewed image
if (isset($_GET['a'])) {
if (is_numeric($_GET['a'])) {
$newa=$_GET['a'];
} else {
$newa=1;
}
$prev = ($newa-1);
$next = ($newa+1);
switch ($newa) {
case 0:
$prev = $suma;
$next = 1;
break;
case $suma:
$prev = ($suma);
$next = 0;
break;
}
// display navigation links for image gallery
// if "a" is set in the $_GET array:
echo "
";
} else {
// if "a" is NOT set:
echo "
";
}
echo "";

// display current full sized image if get value is set
if (isset($_GET['a'])) {
if (is_numeric($_GET['a'])) {
$a = $_GET['a'];
} else {
$a = 1;
}
$display = $image[$a][0];
$description = $image[$a][1];
$alt = $image[$a][2];
echo "
<div id='full_image'>";
if ($caption_text_over == TRUE) { echo "<p>$description</p>"; }
echo "<p><img src='$path/$display' alt='";if($alt_text==TRUE){echo $alt;}echo"' /><br><img src='reflect_v2.php?img=$path/$display&jpeg=70&fade_start=40&fade_end=1'></p>";
if ($caption_text_under == TRUE) { echo "<p>$description</p>"; }
echo "</div>";
} else {
// display first image if no get value is set
$display = $image[0][0];
$description = $image[0][1];
$alt = $image[0][2];

echo "
<div id='full_image'>";
if ($caption_text_over == TRUE) { echo "<p>$description</p>"; }
echo "<p><img src='$path/$display' alt='";if($alt_text==TRUE){echo$alt;}echo"' /></p>";
if ($caption_text_under == TRUE) { echo "<p>$description</p>"; }
echo "</div>";
}
// display thumbnails in unordered list format
echo "
<div id='imgright'><div id='sthumb-box2'><h";
echo $header+1;
echo "";
echo $header+1;
echo "><ul>";
for ($i = 0; $i <= $result; $i++){
if(is_file($path.'/'.$photo[$i])) {
$alt = $image[$i][2];
echo "
<li><div id='stretchbox'><a href='?a=$i'><div id='squareit'><img src='$path/$photo[$i]' alt='$alt' border= 0 /></div></a></div></li></span>
";
}
}
echo "
</ul></div></div>";

[boogyman]

what I meant by that is just to break out of php when you parse like i did in my post.



echo ?><li><a href="?a=<?php echo $i; ?>"><img ,...

[rmagnes]

Ok, I modified the script in the way you suggested, take a look and see the results: http://wakaorphanage.org/photos.php
Can you think of anything that would make it behave in this way?

[boogyman]

you are getting a warning.


Warning: Division by zero in /home/u2/wakaorphanage.org/html/includes/gallery.php on line 93


check in the gallery.php to see where it is returning the irational number.

[rmagnes]

Is there any sure fire method for tracking down an irrational number? I have been looking all afternoon and I really can't figure out where it is going wrong.