Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post

    Outlook 2007 Newsletter problem :'(

    I'm beginning to panic as I need this done ASAP.

    I've been working on an apparently basic newsletter but the graphic design has posed some difficulties because it's not created with tables in mind.

    Across the mail clients I've tested (gmail, yahoo, outlook express) everything appears fine. However, in Outlook 2007 there is a problem with the line height of the <h> tags (at least I think this is the culprit) adding unwanted space at the top an bottom of tables. If I adjust the line-height then it doesn't render properly in gmail, yahoo outlook express. It's all very catch-22.

    The acceptable looks more or less like the following:





    Outlook 2007 displays extra space around the <h> tags (called main:, one, two, three... etc.) and I can't figure out how to solve this.



    I've highlighted what I think is the problem area in the below and called it /* possible problem area */

    Code:
    *{
    	margin: 0;
    	padding: 0;	
    }
    
    td,th{
    	vertical-align: top;	
    }
    
    table{
    padding:0;
    margin:0;
    }
    
    body{
    	padding:0;
    	margin:0;
    	background:#999;
    	font-family:Arial, Helvetica, sans-serif;
    }
    
    .imgReset{
    	outline:none;
    	border:none;
    	margin:0;
    	padding:0;
    	display:block;
    }
    
    /* Possible Problem Area */
    
    td h1.h1header{
    	font-size:31px; 
    	font-weight:900; 
    	line-height:10px; 
    	color:#F00;
    	margin-top:6px;
    	margin-bottom:15px;
    	
    }
    
    h2.h2header{
    	font-size:15px; 
    	font-weight:600; 
    	color:#fff; 
    	text-align:center;
    	margin-bottom:17px
    }
    
    h3.h3header{
    	font-size:14px; 
    	font-weight:600; 
    	line-height:12px; 
    	margin-bottom:12px
    }
    
    /* End of Possible Problem Area */
    
    p{
    	font-size:12px; 
    	font-weight:400; 
    	line-height:18px;
    }
    
    p span{
    	color:#d80017;
    }
    
    #wrapper{
    	background:#ffffff; 
    	padding:0; 
    	margin:0;
    }
    
    #middle{
    	width:540px; 
    	padding:0; 
    	margin:0;
    	background:#CC6;
    }
    
    .padding{
    	padding:0 15px 0 10px;
    }
    
    #image{
    	outline:none;
    	border:none;
    	margin:20px 0 0 35px;
    	padding:0;
    	display:block;
    }
    
    #nudge{margin-top:5px;
    	outline:none;
    	border:none;
    	margin:0;
    	padding:0;
    	display:block;}

    Slightly stripped down html (slightly bloated as well becaus I've been whacking in heights, cell padding etc everywhere I could think). The problem area begins with the groping of <h> tags beginning with "Main".

    Code:
    <body>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
        	<tr>
        		<td align="center">
        			<table id="wrapper" width="540" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td valign="top">
                            	<table width="540" border="0" cellpadding="0" cellspacing="0">
                        			<tr>
        								<td align="left" valign="top" width="305" height="309" border="0" cellpadding="0" cellspacing="0" style="background-color: #90C" >
                                        <img class="imgReset" src="" width="305" height="309" alt=""  style="background-color: #90C""/>
                                        </td>
        								<td align="left" valign="top" width="235" border="0" cellpadding="0" cellspacing="0" style="background-color: #C39" >
       									  <img class="imgReset" src="" width="76" height="26" alt="" style="background-color: #9C0" />    									
                                      <table width="235" height="283" border="0" cellpadding="0" cellspacing="0">
        										<tr>
        											<td colspan="2" height="181" border="0" cellpadding="0" cellspacing="0">
                                                        <h1 class="h1header">Main:</h1>
                                                        <h3 class="h3header">one</h3>
                                                        <h3 class="h3header">two</h3>
                                                        <h3 class="h3header">three</h3>
                                                        <h3 class="h3header">four</h3>
                                                        <h3 class="h3header">five</h3>
                                                        <h3 class="h3header">six</h3>
        											</td>
                                                </tr>
                                                <tr>
                                                    <td height="102" border="0" cellpadding="0" cellspacing="0">      
                                                        <h3 class="h3header">seven</h3>
                                                        <h3 class="h3header">eight</h3>
                                                        <h3 class="h3header">nine</h3>
    													<h3 class="h3header">ten</h3>
                                                    </td>
                                                    <td style="background-color: #00FF99">
                                                    	<img id="image" src="" width="100" height="82" alt="" style="background-color: #00FF99" />
                                                    </td>
                                                 </tr>
                                            </table>
        								</td>
        							</tr>
        							<tr>
                                        <td valign="top" colspan="2">
                                            <table width="540" border="0" cellpadding="0" cellspacing="0">
                                            	<tr>
                                                    <td id="middle" align="center" valign="middle">
                                                    <br />
                                                        <h2 class="h2header" align="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                                                        <br />
                                                        Donec molestie turpis id quam placerat varius. Vivamus mattis bibendum
                                                       </h2>
                                                    </td>
                                                </tr>  
                                        	</table>
        								</td>
        							</tr>
        							<tr>
       									 <td valign="top" colspan="2">
        								 	<table class="padding" width="540" border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td width="300">
                                                        <table id="padding" width="290" height="320" border="0" cellpadding="0" cellspacing="0">
                                                            <tr>
                                                                <td class="padding" width="290" height="165" align="left" valign="top" colspan="2" border="0" cellpadding="0" cellspacing="0">
                                                                	<br />
                                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie turpis id quam placerat varius. Vivamus mattis bibendum enim eu blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla et mauris id diam rutrum tristique. Proin est ner</p>
                                                                    <br />
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td align="left" valign="bottom"  border="0" cellpadding="0" cellspacing="0" width="101" style="background-color: #00FF99" >
                                                                <img id="nudge" src="" width="100" height="155" alt="" style="background-color: #00FF99" />
                                                                </td>
                                                                <td class="padding" width="189" align="left" valign="top" border="0" cellpadding="0" cellspacing="0">
                                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie turpis id quam placerat varius. Vivamus mattis bibendum enim eu blandit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,</p>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                  </td>
                                                    <td>
                                                        <table class="padding" width="220" height="320" border="0" cellpadding="0" cellspacing="0">
                                                            <tr>
                                                                <td align="left" width="220" height="147" valign="top" colspan="2" border="0" cellpadding="0" cellspacing="0">
                                                                <br />
                                                                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie!
                                                                    <br />
                                                                    <br />
                                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie!Lorem ipsum dolor</p>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td width="102" height="173" align="left" valign="top" border="0" cellpadding="0" cellspacing="0">
                                                                   <br />
                                                                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</p>
                                                                </td>
                                                                <td width="118" height="173" align="bottom" valign="bottom"  border="0" cellpadding="0" cellspacing="0" style="background-color: #00FF99" >
                                                                    <img class="imgReset"  width="117" height="173" alt="" style="background-color: #00FF99" />
                                                                </td>
                                                            </tr>
                                                 	</table>
                                            	</td>
                                        	</tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        </table>
    </body>
    Last edited by garabildi; 09-18-2011 at 02:27 PM.

  • #2
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post
    Think I got this sorted by giving fixed dimensions to each table and replacing <h> tag line-heights with margins. Seems to work OK in gmail, yahoo, outlook 2007/ express.


  •  

    Posting Permissions

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