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 4 of 4

Thread: Email and CSS

  1. #1
    Regular Coder
    Join Date
    May 2006
    Posts
    152
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Email and CSS

    Hi there,

    Can someone please tell me why Gmail wont read my HTML email correctly?

    Here is the HTML.. thanks!

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css" media="screen">@import "http://www.midwestfleet.com/include/email.css";</style>
    </head>
    <body>
    
    <div id="pageContainer">
        <div id="headerContainer">
                <h1>Midwest Fleet Services</h1>
    		<div id="logo">
                 
            </div>
      	</div>
        <div id="bodyContainer">
            {BODY}
        </div>
    </div>
    </body>
    </html>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    There are many tutorials about creating HTML e-mails. The first rule of thumb is: forget everything youíve learned about semantics and CSS layouts. Tables are the way to go.

    Iíve read a pretty good article but I canít remember where I found it. But basically it said that Gmail strips out all divs and external CSS. Youíll be better of using good olí tables and out CSS as inline styles into every element you need to style (even if it means that you have to repeat it a million times to style each table cell).

  • #3
    New Coder
    Join Date
    May 2008
    Location
    Sydney, Australia
    Posts
    45
    Thanks
    0
    Thanked 8 Times in 8 Posts
    Yep, inline CSS is the way to go for emails. It has to be set for every element, as in, don't expect properties to inherit. Awesome guide here: http://www.anandgraves.com/html-email-guide

  • #4
    Regular Coder
    Join Date
    May 2006
    Posts
    152
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Alright thanks for your help guys, the table is working better I believe. But it doesn't like my CSS.. any idea whats wrong?

    Thanks again for the help!

    Code:
    <table width="650">
    	<tr style="font-family: Arial; width: inherit;	height: 70px; color: #FFFFFF; margin-right: auto; background: #fff url(http://midwestfleet.com/images/top11.jpg) repeat-x top;">
        	<td width="550"><h1>Midwest Fleet Services</h1></td>
            <td>LOGO IMAGE</td>
        </tr>
        <tr>
        	<td style="width: inherit; font-family: Arial; font-size: 13px; color: #454545;" colspan="2">
            	{BODY}
            </td>
    </table>


  •  

    Posting Permissions

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