The From Line
Sending, Managing & Monetizing Email
2 minutes reading time
(348 words)
Dreamweaver issue with Cascading Style Sheets (CSS)
This document addresses an issue that we have seen with HTML code that has been generated through Adobe DreamWeaver CS4 and CS5. Please see the below example of code, paying special attention to the portions highlighted in red.
Example from DreamWeaver prior to removing the tags:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Testing</title>
<style type="text/css">
<!--
.Font_Verdana {
font-family: Verdana, Geneva, sans-serif;
}
.Font_Verdana {
color: #FF0000;
}
.Font_Verdana .Font_Verdana {
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
}
-->
</style>
</head>
<body class="Font_Verdana">
<span class="Font_Verdana">This is a test to show some CSS</span><br />
<br />
</body>
</html>
The beginning tag <!-- and the ending tag --> (showed in red) are actually comments. A comment is used to exclude a section of code within the HTML so that the browser (or in this case the email client) won't use it to display the page to the user. This could result in your message not rendering the way that it's supposed to. Newer versions of Dreamweaver (CS4 and CS5) automatically add the comment tags to the HTML. If you were to copy the above HTML code and paste it into the eLoop5 editor, it would appear just as it did in the DreamWeaver preview. However, if you send yourself a test message, the CSS will be ignored, thus breaking your message. The remedy for this is simple. Before pasting the HTML into the eLoop5 editor, simply remove the beginning tag <!-- and the ending tag -->. Please see the below example that shows the comment tags removed. Once removed, your code will be displayed properly when you send a test message.
Example from DreamWeaver after to removing the tags:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Testing</title>
<style type="text/css">
.Font_Verdana {
font-family: Verdana, Geneva, sans-serif;
}
.Font_Verdana {
color: #FF0000;
}
.Font_Verdana .Font_Verdana {
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
}
</style>
</head>
<body class="Font_Verdana">
<span class="Font_Verdana">This is a test to show some CSS</span><br />
<br />
</body>
</html>
More information and comments can be found on the W3Schools website http://www.w3schools.com/tags/tag_comment.asp
Stay Informed
When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.
