HTML Email CSS Guide

Published on May 28, 2010January 26, 2015 by matt

This guide is a must use for sending HTML email newsletters: http://www.campaignmonitor.com/css/

Vertically align image to the middle

Published on February 12, 2010January 21, 2015 by matt

I was trying to align some text to an image vertically. I used the align attribute like this:

<img height=”28″ src=”/images/connect-phone.gif” width=”26″ align=”middle”> 234-234-2342

But this didn’t work in Firefox or Safari. So I sought out the CCS alternative. I came across this article explaining how to do it: http://www.webmasterworld.com/forum83/6588.htm . Here is the code supplied to answer the same question I had:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Strict//EN”
“http://www.w3.org/TR/html4/strict.dtd”><html>
<head>
<title></title>
<style type=’text/css’>
body, html {
height:100%; /*fill the viewport*/
}
#container{
height:100%; /*fill the body*/
text-align: center; /*H-centering in early IE versions*/
}
#pinac {
width: 826px;
height: 155px;
position:relative; /*allows for top property to move the element*/
top:50%; /*moves it 50% of #container’s height down the page*/
margin-top:-77px; /*pulls it back up by half it’s height*/
margin-left: auto;margin-right: auto; /*H-centering in complaint browsers*/
background:#369;
color:#fff;
}
</style>
</head>
<body>
<div id=”container”>
<div id=”pinac”>This is your element.</div>
</div>
</body>
</html>

You’ve got to be kidding! Forget that. Instead I found I could just set align=”absmiddle” in the image. This attribute solved my problem, like this:

<img height=”28″ src=”/images/connect-phone.gif” width=”26″ align=”absmiddle”> 234-234-2342

I know CSS has it’s place but I’m still not much of a fan.

IE6 Float Bug

Published on April 15, 2008January 21, 2015 by matt

Lots of people like CSS and it certainly has it’s place. But when the most popular browser has a bug that prevents a simple div element from displaying properly we all get frustrated. All I wanted to do was have a box “float” to the right side of the page. It works great in IE7 and Firefox. IE6 displayed the box in the content area instead of to the right. See this page for more details. But the simple answer is add “display: inline” to the style. As I understand this, we are using a bug in IE6 to correct another bug in IE6. Okay, I grant you, this is confusing.

To fix the IE6 “float” bug to this:

<div class=”box”>
   <div class=”sidebar” style=”float: right; display: inline“>content
   </div>
   content
</div>

Source: http://www.positioniseverything.net/explorer/floatIndent.html

CSS Page Break with IE 7

Published on March 13, 2007January 21, 2015 by matt

To force a page break when printing the style=”page-break-before: always;” can be added. But this doesn’t always work with IE 7. For some reason IE 7 would ignore this. Probably because of the new print preview and “size to fit”. The simple fix to get IE 7 to recognize the page break just add something to the div section. This worked for me.