#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    1
    Rep Power
    0

    Images won't line up in complex table layout w/ merged cells


    Hello!

    I have a website with complex non-symmetrical layout started from "Save for Web" in Photoshop. I designed an image and defined Slices to have Photoshop cut it apart with a different image in each table cell, and the next step is to make this layout work with variable body content - growing and shrinking with no artifacts:

    http://www.hitman2d.com/sms/map.jpg

    Actual page here:

    http://www.hitman2d.com/sms/layout.html

    Usually doesn't take long, but here the layout turned out so complicated that I can barely even wrap my mind around all the rowspans, column spans, spacer cells, etc. I beat my head on it for a month and finally decided I can't go any further without help from some awesome designers :)

    Figured everything out except for the area at top-left where a TD with a zero height actually gets 1-4 pixel height. This causes an image split in two parts to have a visible break down the split. It's supposed to be seamless. In IE8 it gets 1 extra pixel, and Firefox gives it negative (!) 3-4 pixels which totally destroys the seamless look and bothers me endlessly:

    http://www.hitman2d.com/sms/problem1.jpg
    http://www.hitman2d.com/sms/problem2.jpg

    I am using bare-bones Visual Studio 2005 text editor just for syntax highlighting and tab-keeping, it's visual design capabilities are nil. Don't have Dreamweaver, etc.

    Code:
    <html>
    <head>
    <title>Home - Sullivan Motorcycle Services</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    h1
    {
        font-family: Seven of One;
        font-style: normal;
        font-weight: lighter;
        font-variant: small-caps;
        color: white;    
        margin-top: 0pt;
        margin-bottom:0pt;
        font-size: 25px;
    }
    
    h2
    {
        font-family: Seven of One;
        font-style: normal;
        font-weight: lighter;
        font-variant: small-caps;
        color: white;
        margin-top: 0pt;
        margin-bottom:0pt;
        font-size: 20px;
    }
    
    td
    {
        font-family: Lucida Sans;
        color: white;
        font-size: 11pt;
    }
    
    p
    {
        margin-top: 10pt;
    }
    </style>
    </head>
    <body background="images/background.gif">
    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"><tr><td>
        <table width="973" height="779" border="0" cellpadding="0" cellspacing="0" align="center">
    	    <tr>
    		    <td colspan="5">
    			    <img src="images/top.png" width="829" height="66"></td>
    		    <td colspan="2" rowspan="2">
    			    <img src="images/topright.png" width="143" height="195"></td>
    		    <td></td>
    	    </tr>
    	    <tr>
    		    <td colspan="2" rowspan="2" background="images/logo.png" style="background-position:top"></td>
    		    <td>
    			    <img src="images/menu-home.jpg" width="177" height="129"></td>
    		    <td>
    			    <img src="images/menu-services.jpg" width="148" height="129"></td>
    		    <td>
    			    <img src="images/menu-contact.jpg" width="161" height="129"></td>
    		    <td>
    		        <img src="images/spacer.gif" width="1" height="80">
    		    </td>
    	    </tr>
    	    <tr>
    		    <td colspan="4" rowspan="3" valign="top" background="images/main-repeat.jpg">
    		        <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    		            <tr><td valign="top" background="images/main.jpg" style="background-repeat:no-repeat">
    		                <div style="margin-left:29px;margin-right:24px;margin-top:17px;min-height:460px">
    		                <h1>WELCOME</h1>
    		                <p>Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test. Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.</p>
    		                <p>Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test. Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.</p>
    		                <p>Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test. Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.</p>
    		                <p>Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test. Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.</p>
    		                <p>Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test. Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.</p>
    		                <p>Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test. Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.</p>
    		                <p>Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test. Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.</p>
    		                <p>Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test. Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.</p>
    		                <p>Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test. Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.</p>
    		                <p>Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test. Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.Page text. Lorem ipsum dolor seth loreth. Harm haret est nu libaum. Loki hert maine hurt. Vacaam lazam test.</p>
    		                
    		                </div>
    			        </td></tr>
    			    </table>
    			    </td>
    		    <td rowspan="3" valign="bottom" background="images/right.png"></td>
    		    <td></td>
    	    </tr>
    	    <tr>
    		    <td valign="top">
    		        <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    		            <tr><td height="10"><img src="images/left.png" align="right" border="0" vspace="0" hspace="0"/></td></tr>
    		            <tr><td background="images/left-repeat.png" style="background-position: right top;background-repeat:repeat-y"></td></tr>
    		        </table>
                </td>            
    		    <td valign="top" background="images/sidebar-repeat.png">
    			    <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    			        <tr><td valign="top" background="images/sidebar.jpg" style="background-repeat:no-repeat">
    			            <div style="margin-left:24px;margin-top:160px">
    			            <h2>FORUM</h2>
    			            <h2>BLOG</h2>
        			        
    			            </div>
    			        </td></tr>
    			    </table>
    		    </td>
    		    <td><img src="images/spacer.gif" width="1" height="0" /></td>
    	    </tr>
    	    <tr>
    		    <td rowspan="2" valign="bottom" height="100%">
    		        <table border="0" cellspacing="0" cellpadding="0" height="100%">
    		            <tr><td background="images/left-repeat.png" style="background-position: right top;background-repeat:repeat-y" height="100%"></td></tr>
    		            <tr><td><img src="images/bottomleftcorner.png" width="142" height="170"></td></tr>
    			    </table>
    		    </td>
    		    <td rowspan="2" valign="bottom" height="100%">
    		        <table border="0" cellspacing="0" cellpadding="0" height="100%">
    		            <tr><td height="100%" background="images/sidebar-repeat.png"></td></tr>
    		            <tr><td><img src="images/bottomleft.png" width="201" height="170"></td></tr>
    			    </table>
    			    </td>
    		    <td>
    			    <img src="images/spacer.gif" width="1" height="63"></td>
    	    </tr>
    	    <tr>
    		    <td colspan="5" valign="bottom">
    			    <img src="images/bottom.png" width="609" height="107"></td>
    		    <td>
    			    <img src="images/spacer.gif" width="1" height="107"></td>
    	    </tr>
    	    <tr>
    		    <td>
    		        </td>
    		    <td>
    			    <img src="images/spacer.gif" width="201" height="1"></td>
    		    <td>
    			    <img src="images/spacer.gif" width="177" height="1"></td>
    		    <td>
    			    <img src="images/spacer.gif" width="148" height="1"></td>
    		    <td>
    			    <img src="images/spacer.gif" width="161" height="1"></td>
    		    <td>
    			    <img src="images/spacer.gif" width="80" height="1"></td>
    		    <td>
    			    <img src="images/spacer.gif" width="63" height="1"></td>
    		    <td></td>
    	    </tr>
        </table>
    </td></tr></table>
    </body>
    </html>
    :cheers:
    Last edited by cmyk; June 14th, 2013 at 12:14 PM. Reason: Removed "border=1" in second table used for debug

IMN logo majestic logo threadwatch logo seochat tools logo