Photoshop Question posted in
The official user guide can be found here.

How to fix this whitespace issue between images in HTML? – Photoshop

Requirement

I want to create an image with multiple hyperlinks on it and email it to someone.

What I did

I used Photoshop’s slicing method and added URL to the slices. I saved the composition for web. For it to work on my recipient’s end, I uploaded each slice to an online photo hosting website and edited the HTML tag img src=”local photo location” to img src = “online photo location”. But the problem is I get multiple white-spaces between each slice which distorts the overall image.

Code

    <html>
    <head>
    <title>General Infosheet July 25</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (General Infosheet July 25.jpg) -->
    <table id="Table_01" width="800" height="1034" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <a href="http://facebook.com/">
                    <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_01_zpsgxd25oae.jpg" width="539" height="158" border="0" alt=""></a></td>
            <td rowspan="2">
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_02_zpsmqhre1ll.jpg" width="260" height="452" alt=""></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="158" alt=""></td>
        </tr>
        <tr>
            <td rowspan="4">
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_03_zpsnfkulzvt.jpg" width="539" height="876" alt=""></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="294" alt=""></td>
        </tr>
        <tr>
            <td>
                <a href="http://twitter.com/">
                    <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_04_zps239b1stn.jpg" width="260" height="144" border="0" alt=""></a></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="144" alt=""></td>
        </tr>
        <tr>
            <td>
                <a href="http://instagram.com/">
                    <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_05_zpsuwqhoawm.jpg" width="260" height="134" border="0" alt=""></a></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="134" alt=""></td>
        </tr>
        <tr>
            <td>
                <a href="http://photobucket.com/">
                    <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_06_zpsiwxkb9ty.jpg" width="260" height="304" border="0" alt=""></a></td>
            <td>
                <img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="304" alt=""></td>
        </tr>
    </table>
    <!-- End Save for Web Slices -->
    </body>
    </html>

Question

I want to remove white-space between the images. Please provide code edits that will help to remove these white-space.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Answer

    I was able to solve this problem by inspecting the body section of the email in Hotmail, and then pasting entire HTML code in the inspector. That way, the code is not interpreted by Outlook, but rather by the web browser engine. So, this might be a resolute solution for anyone trying to email complex HTML code.


  2. 0

    Make sure that the padding for each table cell is 0px, and then set the border-spacing property to 0, and the border-collapse property to collapse. Tables by default have spacing, resulting in whitespace.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search