October 31st, 2012, 01:44 PM
How Do I Remove Empty Space H1 to H2
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:
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.
<table border="0" cellspacing="0" style="margin-bottom:0">
<!-- The Title section -->
<td width="700" align="left" style="padding-left:30px"><h1>This Is My Main Newsletter Title Using H1</h1></td>
<td width="700"><em> <h2 style="color:#076225; padding-left:30px">This Is My Sub-Title Using H2</h2></em><td>
I'd post a graph of it here, but I can't figure out how to do that. Hope my description above is enough.
October 31st, 2012, 03:35 PM
Does it have to be table? Maybe div will better to use?
Don't know how all e-mail readers is working
<h1 style="padding-left:30px">This Is My Main Newsletter Title Using H1</h1>
<h2 style="color:#076225; padding-left:30px"><em>This Is My Sub-Title Using H2</em></h2>
October 31st, 2012, 03:43 PM
Thanks for reply.
Originally Posted by MrFujin
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.
October 31st, 2012, 04:02 PM
Solution Figured Out
Placing style="padding:0; margin:0" within the header tags themselves and not in the TD tags did the trick.
November 3rd, 2012, 05:45 AM
That's because it was inherited.
Originally Posted by rixtertrader
November 5th, 2012, 08:41 AM
I think it'll works.