Outlook Stationary HTML Code
I got a good one for you guys.
Our client wants to use a stationary in Outlook that has an image at the top and centered. Shouldn't be too hard right? Wrong! The stationary uses an IMG tag which does not allow me to center percentage wise, only in pixels (hspace=). But if someone is using a different resolution than me then the image would be off-centered. I can get the image centered in XML but then Microsoft Word cannot read XML so then the image does not show up at all in Outlook. Here is the code produced by Outlook when creating the stationary. Thanks in advance
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Tisch Stationery</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.5346.5" name=GENERATOR></HEAD>
<BODY style="FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Arial"
background=""><FONT face=Arial color=#000000 size=2>
<DIV><IMG alt="" hspace="" src="N:\image002.jpg" align=top
border=0></DIV></FONT></BO
Our client wants to use a stationary in Outlook that has an image at the top and centered. Shouldn't be too hard right? Wrong! The stationary uses an IMG tag which does not allow me to center percentage wise, only in pixels (hspace=). But if someone is using a different resolution than me then the image would be off-centered. I can get the image centered in XML but then Microsoft Word cannot read XML so then the image does not show up at all in Outlook. Here is the code produced by Outlook when creating the stationary. Thanks in advance
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Tisch Stationery</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.5346.5" name=GENERATOR></HEAD>
<BODY style="FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Arial"
background=""><FONT face=Arial color=#000000 size=2>
<DIV><IMG alt="" hspace="" src="N:\image002.jpg" align=top
border=0></DIV></FONT></BO
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
conlin,
Change the DIV so it's absolutely positioned, then set the BODY to begin after the DIV. Something like this:
<body topmargin="130" leftmargin="25">
<div id=Logo style="position:absolute; top:0px; left:0px">
<img src="N:\image002.jpg">
</div>
The actual margin settings need to be adjusted to fit the image you're using. What this does is fix the DIV in the top-left corner. The body then begins 130 pixels down and 25 pixels in from the left margin.
Change the DIV so it's absolutely positioned, then set the BODY to begin after the DIV. Something like this:
<body topmargin="130" leftmargin="25">
<div id=Logo style="position:absolute; top:0px; left:0px">
<img src="N:\image002.jpg">
</div>
The actual margin settings need to be adjusted to fit the image you're using. What this does is fix the DIV in the top-left corner. The body then begins 130 pixels down and 25 pixels in from the left margin.
ASKER
Could you email me at bbrewer@conlinconsulting.c
ASKER
This is the code that I am using now. The signature still comes first.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Tisch Stationery</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.5346.5" name=GENERATOR>
</HEAD>
<BODY topmargin="130" leftmargin="25" style="FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Arial" background="">
<FONT face=Arial color=#000000 size=2>
<DIV id=Logo style="position:absolute; top:0px; left:0px">
<TABLE align="center">
<TR>
<TD><IMG alt="" hspace="" src="N:\image002.jpg" align=top border=0></TD>
</TR>
</TABLE>
</DIV>
</FONT>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Tisch Stationery</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.5346.5" name=GENERATOR>
</HEAD>
<BODY topmargin="130" leftmargin="25" style="FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Arial" background="">
<FONT face=Arial color=#000000 size=2>
<DIV id=Logo style="position:absolute; top:0px; left:0px">
<TABLE align="center">
<TR>
<TD><IMG alt="" hspace="" src="N:\image002.jpg" align=top border=0></TD>
</TR>
</TABLE>
</DIV>
</FONT>
</BODY>
</HTML>
ASKER
Here is a screenshot. http://i1.tinypic.com/208iv6o.gif
The problem is that you're using Word as your email editor. If you switch to Outlook as the mail editor, then the stationery works perfectly. It's another of the reasons that I don't recommend using Word as your email editor. I understand the benefits, but it causes a lot of problems too.
ASKER
actually if I switch it to outlook it puts the stationary on top but it is alligned to the left now. I need it at the top and centered.
ASKER
I am trying to avoid centering it by pixels as well. I need to center by % because not everyone uses the same resolution.
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Tisch Stationery</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.5346.5" name=GENERATOR>
</HEAD>
<BODY topmargin="150" leftmargin="25" style="FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Arial" background="">
<FONT face=Arial color=#000000 size=2>
<DIV id=Logo style="position:absolute; top:0px; left:0px; height:140; width:inherit">
<TABLE align="center" width="100%">
<TR>
<TD align="center"><IMG src="N:\image002.jpg" align=top border=0></TD>
</TR>
</TABLE>
</DIV>
</FONT>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Tisch Stationery</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.5346.5" name=GENERATOR>
</HEAD>
<BODY topmargin="150" leftmargin="25" style="FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: Arial" background="">
<FONT face=Arial color=#000000 size=2>
<DIV id=Logo style="position:absolute; top:0px; left:0px; height:140; width:inherit">
<TABLE align="center" width="100%">
<TR>
<TD align="center"><IMG src="N:\image002.jpg" align=top border=0></TD>
</TR>
</TABLE>
</DIV>
</FONT>
</BODY>
</HTML>
ASKER