Tag Archive | "CSS Table"

Best Practices,Design,Mail,Programming,Web Development

HTML Email Compatibility Across Mail Clients

May 17, 2010 2 comments

Lots of compatibility issues occur when HTML developers deal with HTML-formatted emails generated using server side languages like PHP, PERL, JAVA, etc. in their projects.

From time to time you’ll find the odd gobbledygooked message in your Web-based email app, but generally speaking HTML-formatted messages render flawlessly on the Web.  On the other hand, desktop mail clients such as Outlook on Windows, Mail.app on OS X, and the rainbow flavors of desktop Linux (Ubuntu, Centos, and so on) routinely have rendering issues with HTML-based email.

Despite the incredible advances in modern software, why does this continue to happen?

The answer is quite simple: certain mail clients ignore certain HTML tags.  Now there’s no universal rule as to which ignores what, but the more you code the more you’ll learn, so for now let’s take a look at one case with Outlook.

For many users, email ‘stationery’ conjures up late 90s memories of Incredimail and a general, unsavory n00bishness.  But for marketing purposes a well-designed mail template, consisting of a stylish background image, thoughtful font selection, layout and copy equates to sales.  Perhaps thousands of people – from prospective clients to the media – will view mail…

Continue Reading
Design,Tutorials,Web 2.0,Web Development

A Tableless Table – Exploring the power of CSS3

October 27, 2008 3 comments

The recent browser versions like Firefox 3, Google Chrome, Internet Explorer 8, Opera 9.5 and Safari 3 are now coming with a great and brand new support: CSS3. Some of the new properties are introduced and here I am going to describe the table value for the display property.

To align data in a tabular structure we can use a common table using the HTML tags <table>, <tr>, <td> nonetheless we all know that by using that we are violating the latest web standards, right?But hold on for a second. I’m just going to introduce you a hot new way to code it using nothing else than div tags with the great CSS3 and the data will appear just like a table. Believe, that’s true!

Here is an example:


<!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=iso-8859-1" />
<title>Some Page</title>
<style type="text/css">
.table {
display: table;
width:100%;
}
.row {
display: table-row;
width:100%;
}
.cell {
display: table-cell;
border: 1px solid blue;
padding: 1em;
width: 33%;
}
.element1 {
background:#0099FF;
…

Continue Reading