SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    trying to get sliced image to join up without any gaps in a html table

    Here's my code. I'm trying to convert a sliced image from Photoshop into a html table. The slices are in the right place and the table cells have been given zero padding and spacing so I thought that would make the image look seamless however there is still spaces between the slices.

    Could someone lokk at this and see if there is something I'm missing to get it working. Thanks for your help.

    --------------------------------------------------------------------

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Generic Template - Single Column</title>
    <style type ="text/css">
    body {
    background-color: #eeeeee;
    }

    a img {
    border: none;
    }

    table.bg1 {
    background-color: #eeeeee;
    }

    table.bg2 {
    background-color: #ffffff;
    }

    td.permission {
    background-color: #eeeeee;
    padding: 10px 20px 10px 20px;
    }

    td.permission p {
    font-family: Arial;
    font-size: 11px;
    font-weight: normal;
    color: #333333;
    margin: 0;
    padding: 0;
    }

    td.permission p a {
    font-family: Arial;
    font-size: 11px;
    font-weight: normal;
    color: #333333;
    }

    td.body {
    padding: 0;
    background-color: #ffffff;
    }



    td.sidebar h3 {
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    color: #333333;
    margin: 0;
    padding: 0;
    }

    td.sidebar ul {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #333333;
    margin: 6px 0 14px 24px;
    padding: 0;
    }

    td.sidebar ul li a {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #680606;
    }

    td.sidebar h4 {
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    color: #680606;
    margin: 6px 0 0 0;
    padding: 0;
    }

    td.sidebar h4 a {
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    color: #680606;
    text-decoration: none;
    }

    td.sidebar p {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    color: #333333;
    margin: 0 0 10px 0;
    padding: 0;
    }

    td.sidebar p a {
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    color: #680606;
    text-decoration: none;
    }

    td.buttons {
    padding: 20px 0 0 0;
    }

    td.mainbar h2 {
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    color: #680606;
    margin: 0;
    padding: 0;
    }

    td.mainbar h2 a {
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    color: #680606;
    text-decoration: none;
    margin: 0;
    padding: 0;
    }

    td.mainbar img.hr {
    margin: 0;
    padding: 0 0 10px 0;
    }

    td.mainbar p {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #333333;
    margin: 0 0 14px 0;
    padding: 0;
    }

    td.mainbar p a {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #680606;
    }

    td.mainbar p.more a {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #680606;
    text-decoration: none;
    }

    td.mainbar ul {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #333333;
    margin: 0 0 14px 24px;
    padding: 0;
    }

    td.mainbar ul li a {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #680606;
    }

    td.footer {
    padding: 0 20px 0 20px;
    background-image: url('footer-bg.gif');
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #333333;
    height: 61px;
    vertical-align: middle;
    }

    td.footer p {
    font-family: Arial;
    font-size: 11px;
    font-weight: normal;
    color: #ffffff;
    line-height: 16px;
    margin: 0;
    padding: 0;
    }
    </style>
    </head>
    <body>

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td align="center">

    <table width="550" border="0" cellspacing="0" cellpadding="0" class="bg2">
    <tr>
    <td class="permission" align="left" colspan = "2">
    <p>You're receiving this newsletter because you bought widgets from us.</p>
    <p>Not interested anymore? <a href="#">Unsubscribe</a>. Having trouble viewing this email? <a href="#">View it in your browser</a>.</p>
    </td>
    </tr>
    <tr>

    <td colspan = "2" cellpadding = "0" cellspacing="0" height="94"> <img src="slices/images/fathersday_01.jpg" alt="Header" width="550" height="94" />
    </td>
    </tr>


    <tr>

    <td colspan = "2" cellpadding = "0" cellspacing="0" height="291"> <img src="slices/images/fathersday_02.jpg" alt="Header" width="550" height="291" />
    </td>
    </tr>

    <tr>

    <td cellpadding = "0" cellspacing="0" height="275"> <img src="slices/images/fathersday_03.jpg" alt="Header" width="275" height="220" />
    </td>
    <td cellpadding = "0" cellspacing="0" height="275"> <img src="slices/images/fathersday_04.jpg" alt="Header" width="275" height="220" />
    </td>
    </tr>

    <tr>

    <td cellpadding = "0" cellspacing="0" height="275"> <img src="slices/images/fathersday_05.jpg" alt="Header" width="275" height="220" />
    </td>
    <td cellpadding = "0" cellspacing="0" height="275"> <img src="slices/images/fathersday_06.jpg" alt="Header" width="275" height="220" />
    </td>
    </tr>

    <tr>
    <td colspan = "2" cellpadding = "0" cellspacing="0"><img src="slices/images/fathersday_07.jpg" /> </td>
    </tr>




    <tr>
    <td valign="middle" align="left" class="footer" height="61" colspan = "2">
    <p>abcWidgets and the abcWidgets Logo are registered trademarks of abcWidgets Corp.<br />
    <p>ABCWidgets Corp - 123 Some Street, City, ST 99999. ph +1 4 1477 89 745</p>
    </td>
    </tr>
    </table>

    </td>
    </tr>
    </table>

    </body>
    </html>

    -----------------------------------------------------------------

  2. #2
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried this:

    img { vertical-align: bottom; }

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for that - it worked for the top 2 images but there's still a vertical space between the second image and the 2 that follow below.

    any help would be great. thanks

  4. #4
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just out of curiosity, have you tried:

    td, img { vertical-align: bottom; }

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no, i'll give that a try

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no joy with that!!

  7. #7
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You set a height on your td's of height="275"

    and the images inside are height="220"

    So either you change the height of the td's to match the images, or you change the height of the images to match the td's...

    Your Current Code:
    Code HTML4Strict:
    <td cellpadding="0" cellspacing="0" height="275"> <img src="http://helios.gsfc.nasa.gov/image_euv_press.jpg" alt="Header" width="275" height="220" /></td>


Bookmarks

Posting Permissions

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