Images not showing up in fire fox works well in IE

June 30th, 2008, 7:04 am

Okay this is a first I written a simple code in php to create a simple table and display images. The problem is in Fire Fox it not displaying all the images when the page loads. even if I go to a different page or refresh the page not all the images show. It appears one of them does not show but the rest display just fine.

Now if I open the page in IE everything displays just fine. So I'm not sure if i got a bug in my Fire Fox browser or my code is fowled up. I'm almost sure my code is fine for its working fine in IE and I have used this code many of times in other sites. So can someone do a test with my code on their fire fox or something similar to mine to see what they get, or point out an error in my code that might be the problem?

Code: [ Download ] [ Select ]

<?php
    function imageResize($width, $height, $target){
    
        // take the larger size of the width and height and applies the formula
        // accordingly. This is so the script will work dynamically with any size
        // image.
            if($width > $height){
                $percentage = ($target/$width);
            }else{
                $percentage = ($target/$height);
            }
            
        // Get the new value and applies the percentage, then rounds the value
            $width = round($width*$percentage);
            $height = round($height*$percentage);
            
        // Return the new sizes in html image tag format. This is so can just
        // plug this function inside an image tag and just get the height adn width.
        
        return "width=\"$width\" height=\"$height\"";
        }// End Functions
?>

    <div id="mainContent">
    <table width="90%" cellpadding="4" cellspacing="0">
        <tr>
            <td width="150">Image</td>
            <td width="150">Title</td>
            <td width="5">Modify</td>
            <td width="5">Delete</td>
        </tr>
<?php
    $sql = mysql_query("SELECT * FROM gallery ORDER BY img_id DESC") or die (mysql_error());
    while($row = mysql_fetch_array($sql)){
    $image = getimagesize($_SERVER['DOCUMENT_ROOT']."/gallery/art_large/$row[img_filename]");
?>
    <tr>
        <td><img src="../gallery/art_large/<?=$row['img_filename'];?>" <?php echo imageResize($image[0],$image[1],100); ?> /></td>
        <td><?=$row['img_title'];?></td>
        <td>Modify</td>
        <td>Delete</td>
    </tr>
<?php
    } // End While
?>     
    </table>
    </div>
<?php

1. <?php
2.     function imageResize($width, $height, $target){
3.     
4.         // take the larger size of the width and height and applies the formula
5.         // accordingly. This is so the script will work dynamically with any size
6.         // image.
7.             if($width > $height){
8.                 $percentage = ($target/$width);
9.             }else{
10.                 $percentage = ($target/$height);
11.             }
12.             
13.         // Get the new value and applies the percentage, then rounds the value
14.             $width = round($width*$percentage);
15.             $height = round($height*$percentage);
16.             
17.         // Return the new sizes in html image tag format. This is so can just
18.         // plug this function inside an image tag and just get the height adn width.
19.         
20.         return "width=\"$width\" height=\"$height\"";
21.         }// End Functions
22. ?>
24.     <div id="mainContent">
25.     <table width="90%" cellpadding="4" cellspacing="0">
26.         <tr>
27.             <td width="150">Image</td>
28.             <td width="150">Title</td>
29.             <td width="5">Modify</td>
30.             <td width="5">Delete</td>
31.         </tr>
32. <?php
33.     $sql = mysql_query("SELECT * FROM gallery ORDER BY img_id DESC") or die (mysql_error());
34.     while($row = mysql_fetch_array($sql)){
35.     $image = getimagesize($_SERVER['DOCUMENT_ROOT']."/gallery/art_large/$row[img_filename]");
36. ?>
37.     <tr>
38.         <td><img src="../gallery/art_large/<?=$row['img_filename'];?>" <?php echo imageResize($image[0],$image[1],100); ?> /></td>
39.         <td><?=$row['img_title'];?></td>
40.         <td>Modify</td>
41.         <td>Delete</td>
42.     </tr>
43. <?php
44.     } // End While
45. ?>     
46.     </table>
47.     </div>
48. <?php

The first chunk of code is just a function to resize an image then the following code should be self explaintory anyways thanks for any help anyone can provide to why Fire Fox is being naughty and not displaying all my images.

June 30th, 2008, 8:06 am

works fine for me, do you have a sample page so we can see how it is showing originally?

June 30th, 2008, 10:03 am

No I don't have a live example yet, I'm working on this locally, for now, but I seem to get it work when I go into fire fox tools and clear cache then everything works fine except when I click the refresh button on that page then if I have more then the first image doesn't display.

The problem is this is part of an adminstration section on a live site im going to upload when I get it working so I'm not sure be wise to allow people to play around with the live version when its uploaded. I think its something with FF browser something might be screwed up on my version of it on this laptop im using. once i get a live version up i can test it on another computer and see what happens.

But I will try to set soemthing up on the live site for you all to help me test give me a few min and I will upload something

June 30th, 2008, 11:42 am

Here is a link to some code I uploaded unfortunately its not much help cause it doesn't seem to have the same problem Im having with the other code.

http://forsakensoul.com/Test/test.php

here is the code I used for this its not exactly the same the values are hard coded where as the code I posted orignially was using a database. None the less this code works fine so I need to dig around more to find out why when I refresh one image doesnt show up anymore its shows its there in source code but is visably gone.

Code: [ Download ] [ Select ]

<?php
    function imageResize($width, $height, $target){
    
        // take the larger size of the width and height and applies the formula
        // accordingly. This is so the script will work dynamically with any size
        // image.
            if($width > $height){
                $percentage = ($target/$width);
            }else{
                $percentage = ($target/$height);
            }
            
        // Get the new value and applies the percentage, then rounds the value
            $width = round($width*$percentage);
            $height = round($height*$percentage);
            
        // Return the new sizes in html image tag format. This is so can just
        // plug this function inside an image tag and just get the height adn width.
        
        return "width=\"$width\" height=\"$height\"";
        }// End Functions
?>

    <div id="mainContent">
    <table width="90%" cellpadding="4" cellspacing="0">
        <tr bgcolor="#999999">
            <td width="150">Image</td>
        </tr>
<?php
    $image = getimagesize("file_1265201.jpg");
?>
    <tr>
        <td style="border-bottom:solid 1px;"><img src="file_1265201.jpg" <?php echo imageResize($image[0],$image[1],100); ?> /></td>
    </tr>
<?php
    $image = getimagesize("Lilth.jpg");
?>
        <tr>
        <td style="border-bottom:solid 1px;"><img src="Lilth.jpg" <?php echo imageResize($image[0],$image[1],100); ?> /></td>
        </tr>
<?php
        $image = getimagesize("Missing_post.jpg");
?>     
        <tr>
        <td style="border-bottom:solid 1px;"><img src="Missing_post.jpg" <?php echo imageResize($image[0],$image[1],100); ?> /></td>
        </tr>
    </table>
    </div>

1. <?php
2.     function imageResize($width, $height, $target){
3.     
4.         // take the larger size of the width and height and applies the formula
5.         // accordingly. This is so the script will work dynamically with any size
6.         // image.
7.             if($width > $height){
8.                 $percentage = ($target/$width);
9.             }else{
10.                 $percentage = ($target/$height);
11.             }
12.             
13.         // Get the new value and applies the percentage, then rounds the value
14.             $width = round($width*$percentage);
15.             $height = round($height*$percentage);
16.             
17.         // Return the new sizes in html image tag format. This is so can just
18.         // plug this function inside an image tag and just get the height adn width.
19.         
20.         return "width=\"$width\" height=\"$height\"";
21.         }// End Functions
22. ?>
24.     <div id="mainContent">
25.     <table width="90%" cellpadding="4" cellspacing="0">
26.         <tr bgcolor="#999999">
27.             <td width="150">Image</td>
28.         </tr>
29. <?php
30.     $image = getimagesize("file_1265201.jpg");
31. ?>
32.     <tr>
33.         <td style="border-bottom:solid 1px;"><img src="file_1265201.jpg" <?php echo imageResize($image[0],$image[1],100); ?> /></td>
34.     </tr>
35. <?php
36.     $image = getimagesize("Lilth.jpg");
37. ?>
38.         <tr>
39.         <td style="border-bottom:solid 1px;"><img src="Lilth.jpg" <?php echo imageResize($image[0],$image[1],100); ?> /></td>
40.         </tr>
41. <?php
42.         $image = getimagesize("Missing_post.jpg");
43. ?>     
44.         <tr>
45.         <td style="border-bottom:solid 1px;"><img src="Missing_post.jpg" <?php echo imageResize($image[0],$image[1],100); ?> /></td>
46.         </tr>
47.     </table>
48.     </div>

June 30th, 2008, 1:07 pm

Check DTD defined on loaded page .... usually when page behavior (well html layout being more precise) differs between the browsers it usually may caused by DTD standard defined (or not defined) by the page ... eventually it affect the way browser is rendering elements within the page, alternately defined DTD may not supported by browser U experience problems with and thus rendering is proceeded in quirks mode.
Take a look here:
http://en.wikipedia.org/wiki/Quirks_mode

Personally I recommend always to use <!DOCTYPE ...> TAG because in case page rendering or scripts have problems you can spot whether this exception is a results of feature supported/unsupported by defined DTD standard.

July 1st, 2008, 10:48 am

Okay I resolved its not my code thats bad. Something messed up in my fire fox browser that is causing images not to display. I tested my code on 2 other computers using Fire Fox and works fine.

So Anyone know what caused my fire fox to act this way? Should I just reinstall fire fox or is there another way to to fix it?

[Bogey]

July 1st, 2008, 8:00 pm

Is there an option that you might have accidentally disabled that disables image loading?

Under "Content" There is an option saying "Load images automatically"... is it checked?

July 2nd, 2008, 5:36 am

yes that option is checked with it off it shows 0 images. It works when I don't refresh the page, but when I refresh the page it makes the first image being displayed disappear. If i look at the source code it shows the correct path and value. Just something very strange with my FF browser.

Not a real big deal now, since I can see everything fine on a different computer, just a bit of an annoyance. Its also in my admin section of my site so its not like its going to be a high traffic page and I'm the only one that really sees it. I'm not going to lose to much sleep over it right now.