Dreamweaver E-Mail Tables

Music To The Eyes

Senior Member
Hi guys,

I'm hoping you can help me out with a problem I'm having creating an html email in Dreamweaver.

Basically, I have a table with images and text. I just want the text to vertically align at the top of each cell, but when I go into Live View or preview in any browser it seems to push all the text and images down by about 20 pixels or so. There is no padding, spacing, or borders on the table, and I've set all the text to top align.

This is doing my head in - please help!

Thanks :D
 
Cellpadding, cellspacing all set to zero? Using any CSS? (you shouldn't be). Using valign="top"? Don't use Dreamweaver too, use notepad and do it by hand -- much better results.
 
Yep, all set to 0. I'm using CSS to format text - is this a bad thing? I'm using valign=top, yes.

I'm fairly new to designing anything for web, so Dreamweaver is really my bext option. I've done a few html emails before, but not really had this problem.
 
Make the margin-top:0; for whatever tag the text at the top is wrapped in i.e <p style="margin-top:0;">your text here</p> or <h1 style="margin-top:0;">your text here</h1>
 
That's awesome, thanks. Only trouble is I seem to be losing some of my CSS formatting on my text. Is there a particular order I should nest them in?
 
I often declare font styles on the table tag the paras etc sit in, to play 100% safe with all email clients you really need to do each paragraph tag individually.

Are all your styles inline or have you got them in the head of the doc?? you should only use inline styles for email..
 
Ooo, I only undertood half of that, sorry. I have CSS being defined at the top of the document, and then the p tags around text in the actual html. Hope that makes sense...!

I've noticed that empty cells (ones I'm just using for padding) seem to be the wrong size too. They won't get any smaller than a particular size, even if I set the width and height to 0. Is Dreamweaver adding some padding as default? And if so, is there a way to strip it?
 
You don't need to use any CSS, so it's best not to. For you text you just use the <font> tag with size="" and color="" attributes. This means that the email client won't be adding any of its own CSS rules (such as paddings on paragraphs etc).
 
For empty cells simply place a transparent 1px gif in there with width="" and height="" attributes to force the containing cell to the desired size.
 
What I mean is your html will look something like this:

<table>
<tr>
<td><p>Some stuff in here</p>
</td>
</tr>
</table>

I tend to declare the fonts in the table tag so that it follows through for any text placed in that table so I would add the styles in the table tag at the top like so:

<table styles="font-family:helvetica, arial; font-size:14px;">

Nested tables will definately need the styles re-iterating they won't follow through.

Also worth noting if your using anything other than black text on a white background be sure to declare the text colour in every p/h/font tag as otherwise you risk getting black text on black etc. (this will likely only affect a few email clients but at least that way even if all the font styles aren't repeated it can still be seen).

I use p tags rather than font tags purely as the font tag is depreciated and whilst we have to build emails like its the 90's I like to keep some hope that we'll move on one day.
 
I see your argument but to guarantee cross platform consistency then drop any elements that have user-agent CSS tied to them. You use resets because browsers render basic elements differently so imagine what Outlook's rendering engine will do to it!

Drop all CSS, use font tags, grin and bear it. Trust me.
 
I'd recommend dropping all CSS as well, and just use the <font> tag instead. You can also use TD's with blank gif's for spacing instead of padding. I've had some many issues with Emails not working in Lotus Notes and other email clients due to using inline CSS. It's horrible and old fashioned, but as Harry says you just have to deal with it. :)
 
I've never come across any problems that way :\ just been back and looked through some of my checks to and seems to work fine in lotus notes... oh well I'll bear it in mind if I come across problems in the future!
 
tbwcf said:
I've never come across any problems that way :\ just been back and looked through some of my checks to and seems to work fine in lotus notes... oh well I'll bear it in mind if I come across problems in the future!

That's weird Andy. We've got this Newsletter preview filter thingie where I work, that tells you what shows and what doesn't show in the various email clients (just cause sometimes the clients want things like background-colors or whatever, and don't care if it won't work in Lotus Notes as it works in Outlook 2007). It says margin, background, background-color, padding, and text-transform doesn't show in Lotus Notes.

Maybe that's just not working correctly since you seem to have no trouble with Lotus Notes? Anyways it's probably better to do what Harry says if you want to make absolutely sure it works across all Email clients.
 
I only really use the CSS for font styles etc not layout/padding etc... background colours seem to work ok in lotus notes I avoid background images totally thanks to outlook 2007.

I liked one of Harry's tweets a while back on html emails 'more tables than a bingo hall, more images than on Gary Glitters PC' (something like that anyway)

Anyway enough blabbering in the interest of keeping on subject..

Let us know if you need any more help Helen!
 
tbwcf said:
I liked one of Harry's tweets a while back on html emails 'more tables than a bingo hall, more images than on Gary Glitters PC' (something like that anyway)

Oh yeah, I remember that hehe.
 
Back
Top