Page 1 of 1

Compressing cells...kinda

Posted: Thu Dec 07, 2006 3:34 pm
by shiznatix
Ok I have this site:

http://mathewjewelers.com/new/index.php

I left the border on 1 for demonstration. as you can see, under the main pictures there is a picture that says 'tradition of excellence since...'. Now I want to have that picture flush with the 4 main pictures there so basically, I just want to move it up to the pictures. For the life of me I can not get this to happen. Any help?

Edit: when I say I can not get this working, i mean in IE. it works in FF.

Posted: Thu Dec 07, 2006 11:10 pm
by califdon
Looks to me like either the image itself has a border at the top or your use of 'height=100%' is adding a default upper margin. I'd try using a height in pixels.

Posted: Fri Dec 08, 2006 12:50 am
by shoebappa
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Couple of things, I removed the height=100%, in general I don't think tables and heights get along.  I used to avoid the whole colspan rowspan game as much as possible, and when in doubt I'd nest a table.  I know this complicates the code but it removes more headaches than it causes a lot of times.  Also when you don't specify cellpadding and cellspacing I think it may default to something, so I added 0 for each.

[syntax="html"]<table width="795" align="center" border="1" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td height="71" colspan="2" valign="top"><img src="images/top_logo.gif" width="157" height="71" /><img name="MJ_text" src="images/MJ_text.gif" height="71" border="0" alt=""></td>
  </tr>
  <tr>
    <td height="26" colspan="2" valign="top" class="menuBgd"><img src="images/bottom_logo.gif" width="157" height="22" /><a href="index.php"><img src="images/home.gif" name="Image1" width="46" height="22" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','images/home2.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="about.htm"><img src="images/about.gif" name="Image2" width="148" height="22" border="0" id="Image2" onMouseOver="MM_swapImage('Image2','','images/about2.gif',1)" onMouseOut="MM_swapImgRestore()"></a><a href="contact.php"><img src="images/contact.gif" name="Image4" width="62" height="22" border="0" id="Image4" onMouseOver="MM_swapImage('Image4','','images/contact2.gif',1)" onMouseOut="MM_swapImgRestore()"></a><img src="images/search.gif" width="51" height="22">
    <form action="search.cfm" method="post" style="display:inline"><input name="search" type="text" size="22"> 
    <input type="Image" src="images/go.gif" width="26" height="16"></form></td>
  </tr>
  <tr>
    <td height="16" colspan="2" valign="top"><img src="images/below_menu.gif" width="795" height="16" /></td>
  </tr>
  <tr>
  	<td>
  	
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
			    <td width="196" height="1%" valign="top">
			        <img name="bldg_home" src="images/bldg_home.jpg" width="196" height="261" border="0" alt=""><br />
			    </td>
			    <td width="156" valign="top">
			        <img src="images/home_r5_c4.gif" alt="" name="index_r5_c4" width="156" height="28" border="0" id="index_r5_c4" /><br />      <a href="jewelrydept.htm"><img src="images/jewelrydept_home1.gif" alt="" name="jewelrydept_home1" width="156" height="47" border="0" id="jewelrydept_home1" onmouseover="MM_swapImage('jewelrydept_home1','','images/jewelrydept_home2.gif',1)" onmouseout="MM_swapImgRestore()" /></a><br />      <a href="custom.htm"><img src="images/custom_home1.gif" alt="" name="custom_home1" width="156" height="38" border="0" onMouseOver="MM_swapImage('custom_home1','','images/custom_home2.gif',1)" onMouseOut="MM_swapImgRestore()"></a><br />
			      <a href="bridal.htm"><img src="images/bridal_home1.gif" alt="" name="bridal_home1" width="156" height="38" border="0" id="bridal_home1" onmouseover="MM_swapImage('bridal_home1','','images/bridal_home2.gif',1)" onmouseout="MM_swapImgRestore()" /></a><br />
			      <a href="timepieces.htm"><img src="images/timepieces_home1.gif" alt="" name="timepieces_home1" width="156" height="38" border="0" id="timepieces_home1" onmouseover="MM_swapImage('timepieces_home1','','images/timepieces_home2.gif',1)" onmouseout="MM_swapImgRestore()" /></a><br />
			      <a href="giftware.htm"><img src="images/giftware_home1.gif" alt="" name="giftware_home1" width="156" height="34" border="0" id="giftware_home1" onmouseover="MM_swapImage('giftware_home1','','images/giftware_home2.gif',1)" onmouseout="MM_swapImgRestore()" /><br />
			      <img src="images/home_r11_c4.gif" alt="" name="index_r11_c4" width="156" height="38" border="0" id="index_r11_c4" /><br /></a>
			    </td>
			    <td width="156" valign="top">
			        <img src="images/ring_home.gif" alt="" name="ring_home" width="156" height="261" border="0" id="ring_home" /><br />
			    </td>
			    <td width="161" valign="top">
			        <img src="images/pendant_home.gif" alt="" name="pendant_home" width="156" height="261" border="0" id="pendant_home" /><br />
			    </td>
			  </tr>
			  <tr>
    			<td height="100%" colspan="4" align="left" valign="top"><img src="images/home_r12_c1.gif" width="669" height="27" /><br /></td>
    		</tr>
		</table>
    
    </td>
    <td width="126" rowspan="2" valign="top">
        <!-- BEGIN ANDREWS CODE -->

      
    <table border="0">
        <tr>
            <td>
                <div style="font-size: 13px;">Mathew Jewelers Opening 2nd Location, Click Here to Find Out The Latest Details. 
                <br />
                <a href="Galleries.php?Section=A">read more</a></div>
                <hr />                </td>
        </tr>
        <tr>
            <td>
                <div style="font-size: 13px;">Click Here to View Our Special Holiday Hours for Your Shoppig Convenience!
                <br />
                <a href="Galleries.php?Section=B">read more</a></div>
                <hr />                </td>
        </tr>
        <tr>
            <td>
                <div style="font-size: 13px;">View the Latest & Hottest Designers added to Mathew Jewelers. 
                <br />
                <a href="Designers.php">read more</a></div>
                <hr />                </td>
        </tr>
        <tr>
            <td>
                <div style="font-size: 13px;">Mathew Jewelers Custom Design Gallery, click to view our latest designs
                <br />
                <a href="Galleries.php?Section=D">read more</a></div>
                                </td>
        </tr>
    </table>

    <!-- END ANDREWS CODE -->    
	</tr>
  <tr>
    <td align="center" valign="bottom" bgcolor="#FFFFFF"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><br>
      <br>
      <a href="index.php"><font color="#000000">Home</font></a> | <a href="terms.php"><font color="#000000">Terms 
      of Service</font></a> | <a href="help.php"><font color="#000000">Help</font></a> 
      | <a href="return.php"><font color="#000000">Return Policy</font></a><br>
      <font color="#000000">copyright &copy; 2003 Mathew Jewelers</font><br>
      <font color="#666666">A <a href="http://www.mediapostinc.com" target="_blank"><font color="#666666">Media 
    Post</font></a> Production</font></font></td>
  </tr>
</table>

feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Fri Dec 08, 2006 12:53 am
by shoebappa
Oh yeah, and I added a <br /> after each of those main images because IE has a tendancy to add some weird padding to an image when nothing follows it. This isn't the same gap you had, I think most of the other changes were necessary as well, its more of a 4 pixel gap to the right and bottom, for whatever reason the <br /> following the <img> fixes it in IE...

Posted: Fri Dec 08, 2006 8:22 am
by shiznatix
shoebappa, thank you so much! That works perfectly.Thanks for taking the time to do all of that for me, I really appreciate it.

Posted: Fri Dec 08, 2006 8:51 am
by shoebappa
You're welcome, anytime.