Jump to content

HTML Email CSS Priority Issue

- - - - -
Started by da beast, May 31 2011 12:23 PM

  • Please log in to reply
1 reply to this topic

#1
da beast
Posted 31 May 2011 - 12:23 PM

da beast

    Newbie

  • Members
  • PipPip
  • 25 posts
My understanding is that inline style has the highest priority, but I am running into some issues making an HTML Happy Birthday email! We use outlook online and it is not only scrubbing my CSS but it's adding CSS to the email that is interferring and is actually taking priority over my inline styling! What is this "<!--"

Original


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<title>Happy Birthday</title>


<style type="text/css">

        /* Client-specific Styles */

    #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */

    body{width:100% !important;} /* Force Hotmail to display emails at full width */

    body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */


    /* Reset Styles */

    body{margin:0; padding:0;}

    img{border:none; font-size:14px; font-weight:bold; height:auto; line-height:100%; outline:none; text-decoration:none; text-transform:capitalize;}

    #backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}


    h1, h2, h3, h4, h5, h6, ol, ul, li, img, span,


    strong {


	    margin: 0;


	    padding: 0;


	    }


    img {border: none; }


    a {border: none; }


    a:link, a:visited {color: #f4f1d3; text-decoration: underline; }


    a:hover, a:active {color: #90afd4; text-decoration: none; }


</style>


<meta name="robots" content="noindex,nofollow"></meta>


<meta property="og:title" content="Happy Birthday"></meta>


</head>


<body bgcolor="#00000" text="#f4f1d3">


<table width="600" border="0" align="center" cellpadding="10" cellspacing="0">


  <tr>


    <td bgcolor="#f4f1d3"><table width="580" border="0" cellpadding="0" cellspacing="0" bgcolor="#82A9B8">


      <tr>


        <td width="75"> </td>


        <td width="217" valign="top"><table width="217" border="0" cellspacing="0" cellpadding="0">


          <tr>


            <td height="25"> </td>


          </tr>


          <tr>


            <td>


              	<h1 style="font-size:48px; color:#f4f1d3; font-family:Georgia, 'Times New Roman', Times, serif; font-weight:bold; font-style:italic; padding:0; padding-bottom:5px">

                    Happy Birthday {#First Name#}</h1>


              	<h2 style="font-size:24px; color:#f4f1d3; font-family:Georgia, 'Times New Roman', Times, serif; font-weight:normal; padding:0; padding-bottom:50px">Friday, July 3rd 2010</h2>


             


              <p style="font-size:14px; color:#f4f1d3; font-family: Arial, Helvetica, sans-serif, Times, serif; line-height:20px"><strong>You’re invited</strong> 

                  Happy birthday Happy birthday Happy birthday Happy birthday Happy birthday Happy 

                  birthday Happy birthday Happy birthday Happy birthday Happy birthday Happy 

                  birthday Happy birthday </p>


              


              <p style="font-size:11px; color:#d4bf95; font-family: Arial, Helvetica, sans-serif, Times, serif; line-height:18px">

                  Something more here</p></td>


          </tr>


          <tr>


            <td height="75" valign="bottom"><p></p>


              </td>


          </tr>


        </table></td>


        <td width="288" valign="top"><p></p></td>


      </tr>


    </table></td>


  </tr>


</table>


</body>


</html>

This is the code after it has been scrubbed by outlook online:

<html>

<head>

<style> 

<!--

body

	{margin:0px;

	font-size:10pt;

	font-family:Verdana,Helvetica,sans-serif;

	background-color:#ffffff}

table

	{font-size:10pt;

	font-family:Verdana,Helvetica,sans-serif;

	background-color:#ffffff}

-->

</style>

</head>

<body>

<style> 

<!--

#outlook a

	{padding:0}

body

	{width:100%!important}

body

	{}

body

	{margin:0;

	padding:0}

img

	{border:none;

	font-size:14px;

	font-weight:bold;

	height:auto;

	line-height:100%;

	outline:none;

	text-decoration:none;

	text-transform:capitalize}

#backgroundTable

	{height:100%!important;

	margin:0;

	padding:0;

	width:100%!important}

h1, h2, h3, h4, h5, h6, ol, ul, li, img, span, strong

	{margin:0;

	padding:0}

img

	{border:none}

a

	{border:none}

a:link, a:visited

	{color:#f4f1d3;

	text-decoration:underline}

a:hover, a:active

	{color:#90afd4;

	text-decoration:none}

-->

</style>

<table border="0" cellspacing="0" cellpadding="10" width="600" align="center">

<tbody>

<tr>

<td bgcolor="#f4f1d3">

<table border="0" cellspacing="0" cellpadding="0" width="580" bgcolor="#82a9b8">

<tbody>

<tr>

<td width="75"> </td>

<td valign="top" width="217">

<table border="0" cellspacing="0" cellpadding="0" width="217">

<tbody>

<tr>

<td height="25"> </td>

</tr>

<tr>

<td>

<h1 style="padding-bottom:5px; font-style:italic; padding-left:0px; padding-right:0px; font-family:Georgia,'Times New Roman',Times,serif; color:#f4f1d3; font-size:48px; font-weight:bold; padding-top:0px">

Happy Birthday {#First Name#}</h1>

<h2 style="padding-bottom:50px; padding-left:0px; padding-right:0px; font-family:Georgia,'Times New Roman',Times,serif; color:#f4f1d3; font-size:24px; font-weight:normal; padding-top:0px">

Friday, July 3rd 2010</h2>

<p style="line-height:20px; font-family:Arial,Helvetica,sans-serif,Times,serif; color:#f4f1d3; font-size:14px">

<strong>You’re invited</strong> Happy birthday Happy birthday Happy birthday Happy birthday Happy birthday Happy birthday Happy birthday Happy birthday Happy birthday Happy birthday Happy birthday Happy birthday

</p>

<p style="line-height:18px; font-family:Arial,Helvetica,sans-serif,Times,serif; color:#d4bf95; font-size:11px">

Something more here</p>

</td>

</tr>

<tr>

<td height="75" valign="bottom">

<p></p>

</td>

</tr>

</tbody>

</table>

</td>

<td valign="top" width="288"></td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<br>

<br>

</body>

</html>

This part inparticular I think is causing the issues.
<!--

body

	{margin:0px;

	font-size:10pt;

	font-family:Verdana,Helvetica,sans-serif;

	background-color:#ffffff}

table

	{font-size:10pt;

	font-family:Verdana,Helvetica,sans-serif;

	background-color:#ffffff}

-->

#2
developer_dex
Posted 24 June 2011 - 08:04 AM

developer_dex

    Newbie

  • Members
  • Pip
  • 2 posts
<!-- is what is known as comment tag. But it actually comes in a pair. Which are <!-- and //-->
Whatever html tags that is in between the comment tags will be ignored by the browser, as if it doesn't exist.

In your case, i would say that the css formatting has been commented. Therefore ignored by browser.
But AFAIK, comment tags doesn't work for css. Which means the browser will process it anyway.

Maybe because you are using a different browser? Hope that helps.
Back to HTML Programming


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users



  1. CODECALL Programming Forum
  2. → Web Development Forum
  3. → HTML Programming
IPB skins by Skinbox