Firefox wont calculate the height?!?!

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: macek, egami, gesf

hamwisk
New php-forum User
New php-forum User
Posts: 11
Joined: Fri Mar 02, 2012 4:59 am

Firefox wont calculate the height?!?!

Postby hamwisk » Thu Aug 02, 2012 10:41 am

Hello, I am making an image gallery and it is working in all the major browsers except Firefox.

The slideshow works fine, but the thumbnails aren't displaying in Firefox.

Code: Select all

$thumbDirectory = opendir("/***/***/***/gallery/images/thumb");
while($thumbName = readdir($thumbDirectory)) {
   $thumbArray[] = $thumbName;}
closedir($thumbDirectory);
sort($thumbArray);
$thumbCount = count($thumbArray) + 2;
$index = 0;
while ($index <= $thumbCount){
   if (substr("$thumbArray[$index]", 0, 1) != "."){
      echo "
 <tr>
   <td style='width: 50%; height: auto; padding: 2%;'><div style='
 width: 100%; height: 100%;
 background-image: url(images/thumb/". $thumbArray[$index]. ");
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;'>
   <a href='?selectImg=". $thumbArray[$index]. "' class='full'></a></div></td>";
      $index++;
      echo "
   <td style='width: 50%; height: auto; padding: 2%;'><div style='
 width: 100%; height: 100%;
 background-image: url(images/thumb/". $thumbArray[$index]. ");
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;'>
   <a href='?selectImg=". $thumbArray[$index]. "' class='full'></a></div></td>
 </tr>";
   }
   $index++;
}


When I inspect the html output:

Code: Select all

   <div id='thumLay' style='width: 100%; height: 100%; overflow: hidden;'>
   <table style='width: 100%; height: 200%;'>
 <tr>
   <td style='width: 50%; height: auto; padding: 2%;'><div style='
 width: 100%; height: 100%;
 background-image: url(images/thumb/thumb_00.png);
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;'>
   <a href='?selectImg=thumb_00.png' class='full'></a></div></td>
   <td style='width: 50%; height: auto; padding: 2%;'><div style='
 width: 100%; height: 100%;
 background-image: url(images/thumb/thumb_01.png);
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center center;'>
   <a href='?selectImg=thumb_01.png' class='full'></a></div></td>
 </tr>


When I inspect the elements the other browsers compute a height value for the <td>, <div> and <a> tags but Firefox does not.

Please could someone tell me why Firefox doesn't behave like the other browsers?

Return to “CSS”

Who is online

Users browsing this forum: No registered users and 1 guest