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

    Join Date
    Oct 2012
    Posts
    10
    Rep Power
    0

    How Do I Remove Empty Space H1 to H2


    Hello.

    I'm creating a HTML email template. Because of this, I have to forgo the usual external CSS and use limited inline CSS in order to be compatible with as many email readers as possible.

    I've created a TABLE for my "Title Section" with the border=0, cellspacing=0, and style="margin-bottom:0" so that any following table will butt up to it.

    Within this table are two ROWS using TR tags.
    With each row is just one CELL using TD tags.

    The first row-cell holds my email title using H1 tags.
    The second row-cell holds my sub-title using H2 tags.

    Here is the code:

    Code:
    <table  border="0" cellspacing="0" style="margin-bottom:0">
      <!-- The Title section -->
      	<tr>
      		<td width="700" align="left" style="padding-left:30px"><h1>This Is My Main Newsletter Title Using H1</h1></td>
      	</tr>
      	<tr>
      		<td width="700"><em> <h2 style="color:#076225; padding-left:30px">This Is My Sub-Title Using H2</h2></em><td>
      	</tr>
     </table>
    My problem is that there is just too much space between my TITLE and SUB-TITLE. I have been trying everything to get rid of it but have not be successful.

    I'd post a graph of it here, but I can't figure out how to do that. Hope my description above is enough.


    TIA
  2. #2
  3. Lord of the Dance
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2003
    Posts
    3,707
    Rep Power
    1959
    Does it have to be table? Maybe div will better to use?
    Don't know how all e-mail readers is working

    Code:
    <div>
      	<div>
      		<h1 style="padding-left:30px">This Is My Main Newsletter Title Using H1</h1>
      	</div>
      	<div>
      		<h2 style="color:#076225; padding-left:30px"><em>This Is My Sub-Title Using H2</em></h2>
      	</div>
    </div>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    10
    Rep Power
    0
    Originally Posted by MrFujin
    Does it have to be table? Maybe div will better to use?
    Don't know how all e-mail readers is working
    Thanks for reply.

    Unfortunately, HTML email is not like making a webpage. Email readers are still years behind the 8-ball.

    Tables need to be used in place of <DIV>. I'd love to use CSS and external sheets just as I do with webpages. This problem would be gone like that.

    But I have to use TABLES and nested TABLES, and more HTML than CSS (limited inline CSS works for most email readers).

    This is why I'm having issues. I'm not that strong with TABLES.

    Thanks.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    10
    Rep Power
    0

    Solution Figured Out


    Placing style="padding:0; margin:0" within the header tags themselves and not in the TD tags did the trick.

  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2011
    Posts
    31
    Rep Power
    0
    Originally Posted by rixtertrader
    Placing style="padding:0; margin:0" within the header tags themselves and not in the TD tags did the trick.

    That's because it was inherited.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    18
    Rep Power
    0
    <h1 style="padding:0px;"></h1>

    I think it'll works.

IMN logo majestic logo threadwatch logo seochat tools logo