Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post

    Space between tables

    Hello,

    I am working on trying to get this grid to have no spaces between the images however I just cannot seem to get rid of the space at the bottom of each image.

    This is the page in question: http://www.anzie.com/test5.php

    here is the code:

    Code:
    <?php
      require('includes/application_top.php');
    
      require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_PRODUCTS_NEW);
    
      $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_PRODUCTS_NEW));
      
    	$osCsid=tep_session_id();
    	$filename=$_SERVER['PHP_SELF'];
    	$len=strrpos($filename,".")-strrpos($filename,"/")-1;
    	$filename=substr($filename,strrpos($filename,"/")+1,$len);
    	//echo $filename;
    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html <?php echo HTML_PARAMS; ?>>
    <head>
    
    <script type="text/javascript" src="/js/mootools.svn.js"></script>
    <script type="text/javascript" src="/js/demo.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="stylestip.css" />
    
    <script type="text/javascript">
    		window.addEvent('domready', function(){
    			/* Tips 1 */
    			var Tips1 = new Tips($$('.Tips1'));
    			
    		}); 
    	</script>
        
    <meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
    <title><?php echo TITLE; ?></title>
    <base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
    <link rel="stylesheet" type="text/css" href="stylesheettest.css">
    </head>
    <body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
    <!-- header //-->
    <?php require(DIR_WS_INCLUDES . 'header_collectionstest.php'); ?>
    <!-- header_eof //-->
    
    <!-- body //-->
    <?php
    
      $products_new_array = array();
    
        $products_new_query_raw = "select p.products_id, pd.products_name, p.products_quantity, p.products_image, p.products_price, p.products_date_added, p.products_last_modified, p.products_date_available, p.products_status from products p, products_description pd, products_to_categories p2c where p.products_id = pd.products_id and pd.language_id = '1' and p.products_id = p2c.products_id  and p2c.categories_id in(30,31,32,33,34,35,36,37,38,44,43) order by pd.products_name";
    	//echo $products_new_query_raw;
      //echo $products_new_query_raw;
      $products_new_split = new splitPageResults($products_new_query_raw, 25);
    
      if (($products_new_split->number_of_rows > 0) && ((PREV_NEXT_BAR_LOCATION == '1') || (PREV_NEXT_BAR_LOCATION == '3'))) {
    ?>
    
          <tr>
            <td><table border="0" width="797" cellspacing="0" cellpadding="2">
              <tr>
                <td class="smallText">&nbsp;</td>
                <td align="right" class="smallText">&nbsp;</td>
              </tr>
            </table></td>
          </tr>
    <?php
      }
    ?>
    <tr>
      <td>
    		<?
    		if ($products_new_split->number_of_rows > 0)
    		{
    		?>
    <table border="0" width="797" cellspacing="0" cellpadding="0">
    	  		<tr>
    				<td width="30">&nbsp;</td>
    	    		<td align="left" class="smallText"><?php echo $products_new_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info', 'x', 'y'))); ?><a href="viewall.php?osCsid=<?php echo $osCsid?>" ><strong> View All</strong></a>		
    			</tr>
    	</table>
    		<table width="797" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td><table border=0 cellpadding="0" cellspacing="0" align="left">
                  <tr>
                    <?
    			if($products_new_split->current_page_number == 1)
    			{
    		?>
                    
                    <?
    			}
    			else
    			{
    				if($filename=='product_default')
    					{
    		?>
                    
                    <?
    					}
    					else
    					{
    					?>
                    
                    <?
    					}
    			}
    		?>
                    <?
    		}
    		?>
                    <?php
    $i=0;
      if ($products_new_split->number_of_rows > 0) {
        $products_new_query = tep_db_query($products_new_split->sql_query);
        while ($products_new = tep_db_fetch_array($products_new_query)) {
          if ($new_price = tep_get_products_special_price($products_new['products_id'])) {
            $products_price = '<s>' . $currencies->display_price($products_new['products_price'], tep_get_tax_rate($products_new['products_tax_class_id'])) . '</s> <span class="productSpecialPrice">' . $currencies->display_price($new_price, tep_get_tax_rate($products_new['products_tax_class_id'])) . '</span>';
          } else {
            $products_price = $currencies->display_price($products_new['products_price'], tep_get_tax_rate($products_new['products_tax_class_id']));
          }
    ?>
                    <?php if ($i==5)
    				{ ?>
                  </tr>
                  <tr>
                    
                    <?php
    				$i=1; }
    				else
    				{ $i++; }
    				
    			?>
                    <td  valign="top"><table border="0" cellpadding="0" cellspacing="0" width="159px">
                      <tr>
                        <td align="center"><?php echo '<table border="0" bordercolor="#E8E8E8" cellspacing="0" cellpadding="0" ><tr><td  height="210" align="center" width="159"><a class="Tips1" title="Product Info ::'.$products_new['products_name'].' <br /><br /> $'.$products_new['products_price'].'"  href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $products_new['products_id']) . ' " >' . tep_image(DIR_WS_IMAGES . $products_new['products_image'], $products_new['products_name'], 159, 210 ) .  ' </a></td></tr></table>'; ?></td>
                      </tr>
                    </table></td>
                    <?php }
    ?>
                    <?
    			
    			if($products_new_split->number_of_pages==$products_new_split->current_page_number)
    			{
    		?>
                    <?
    			}
    			else
    			{
    					if($filename=='product_default')
    					{
    		?>
                    
                    <?
    					}
    					else
    					{
    					?>
                    <?
    					}
    			}
    		?>
                  </tr>
                </table>
                  </td>
              </tr>
    		  <?
      } else {
    ?>
              
    
              <?php
      }
    ?>
            </table>
    		<table border="0" width="797" cellspacing="0" cellpadding="0">
              <tr>
                
                <td align="left" class="smallText"><?php echo $products_new_split->display_links(MAX_DISPLAY_PAGE_LINKS, tep_get_all_get_params(array('page', 'info', 'x', 'y'))); ?><a href="viewall.php?osCsid=<?php echo $osCsid?>" ><strong> View All</strong></a>         
              </tr>
            </table></td>
    </tr>
    <?php
      if (($products_new_split->number_of_rows > 0) && ((PREV_NEXT_BAR_LOCATION == '2') || (PREV_NEXT_BAR_LOCATION == '3'))) {
    ?>
      
    <?php
      }
    ?>
        </table></td>
    <!-- body_text_eof //-->
        <td width="<?php //echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php //echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
    <!-- right_navigation //-->
    <?php //require(DIR_WS_INCLUDES . 'column_right.php'); ?>
    <!-- right_navigation_eof //-->
    
        </table></td>
      </tr>
      
    </table>
    </TBODY></TABLE>
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-2976036-1");
    pageTracker._trackPageview();
    } catch(err) {}</script>
    </body>
    </html>
    Ive been trying all day and simply cannot find a way to get rid of it!

    *note this page will not load in IE yet due to a problem I am having with mootools

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    No gap in Chrome, but I can see one in Firefox.

    Try adding

    Code:
    img {display:block}
    to your css.

  • Users who have thanked SB65 for this post:

    sackstein (05-05-2009)

  • #3
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    Seems to have just added spaced between the images now.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Actually, looks OK from here. You have an huge amount of whitespace in your HTML formatting; this isn't supposed to show up in the document, but don't count on it. If you're still having the problem, try eliminating all the tabs, spaces, some of the carriage returns etc. Almost always helps.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    OK, well, adding

    Code:
    img {display:block}
    to the css definitely removes a gap underneath the image for me in Firefox 3. You also have in your html a lot of occurrences of:

    Code:
    <td align="center" style="display:block;">
    Take the display:block off these elements and give it another try. This works for me in FF3 - maybe you're getting a different effect in another browser?

  • Users who have thanked SB65 for this post:

    sackstein (05-05-2009)

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    You might need to add
    Code:
    td img {
    float:left;
    }
    into your CSS to remove all those mysterious gaps!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    sackstein (05-05-2009)

  • #7
    Regular Coder
    Join Date
    Jan 2009
    Posts
    160
    Thanks
    40
    Thanked 1 Time in 1 Post
    Thank you!

    Using float left seemed to do the trick in combination with changing the height and width of the td to be smaller.

    I don't know how some of you were seeing it as being ok in firefox 3 though? I was using firefox 3 and saw the spaces so hopefully it still looks good for you. Ill cross my fingers..


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •