issue30, fixed wickled lines when images have different lines

git-svn-id: file:///var/lib/svn/phpfspot/trunk@230 fa6a889d-dae6-447d-9e79-4ba9a3039384

diff --git a/stylesheet.css b/stylesheet.css
index 610e7aadabaae4e4d571398721ee989bb51700bc..df2f9d7bdd96efa177d01c5809e077f8b003a54d 100644 (file)
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -123,19 +123,36 @@ a.thumblink:hover {
 \r
 #matrix,#single {\r
    padding:                10px;\r
+   display:                table;\r
+   margin-left:            10px;\r
+   margin-right:           10px;\r
+   table-layout:           fixed;\r
+   border:                 hidden;\r
+   border-spacing:         10px;\r
+   border-collapse:        separate;\r
 }\r
 \r
-td.thumb {\r
-   padding:                5px;\r
-   text-align:             center;\r
+table.matrix {\r
+   padding:                10px;\r
+   display:                table;\r
+   margin-left:            10px;\r
+   margin-right:           10px;\r
+   table-layout:           fixed;\r
+   border-style:           hidden;\r
+   border-spacing:         10px;\r
+   border-collapse:        separate;\r
 }\r
 \r
-#inner {\r
-   padding:                10px;\r
+td.thumb {\r
+   text-align:             center;\r
+   display:                table-cell;\r
+   vertical-align:         top;\r
    -moz-border-radius:     3px;\r
    border-radius:          3px;\r
    border:                 dashed 1px #888888;\r
+   margin:                 5px;\r
    background-color:       #eeeeee;\r
+   padding:                10px;\r
 }\r
 \r
 #photo_details {\r

diff --git a/templates/photo_index.tpl b/templates/photo_index.tpl
index c00ab962482fb3d807aca7e032d2c91bc068c028..5d11c145cdd8d6f5a834299831428f01ce772ef4 100644 (file)
--- a/templates/photo_index.tpl
+++ b/templates/photo_index.tpl
@@ -44,15 +44,14 @@
  </tr>
  <tr>
   <td colspan="3">
+   <br />
    <div id="adinfo"></div>
-   <div id="matrix">
-   <table>
+   <table class="matrix" id="matrix">
    {section name="row" loop=$rows step=1}
     <tr>
     {section name="col" loop=$columns step=1}
-     <td class="thumb">
       {if $images[row][col] }
-      <div id="inner" onmouseover="setBackGrdColor(this, 'mouseover');" onmouseout="setBackGrdColor(this, 'mouseout');">
+      <td class="thumb" onmouseover="setBackGrdColor(this, 'mouseover');" onmouseout="setBackGrdColor(this, 'mouseout');">
        <a href="javascript:showImage({$images[row][col]});" id="{$images[row][col]}" name="image{$img_id[row][col]}" class="thumblink" onclick="click(this);" title="{$img_title[row][col]}">
         <img class="thumb" id="{$images[row][col]}" src="phpfspot_img.php?idx={$images[row][col]}&amp;width={$width}" alt="thumb_{$images[row][col]}" width="{$img_width[row][col]}" height="{$img_height[row][col]}" />
         <br />
@@ -60,14 +59,12 @@
        </a>
       </div>
       {else}
-       &nbsp;
+       <td>&nbsp;</td>
       {/if}
-     </td>
     {/section}
     </tr>
    {/section} 
    </table>
-   </div>
   </td>
  </tr>
  <tr>