CODEWITHSUNDEEP
htmlcssemailoutlookwindows-live
Valter Silva
Valter Silva

Reputation: 16656

HTML: Cannot align image and text

I have to build a signature, I made some test and it seems pretty okay in the browser. But not in Windows Live Mail and Outlook 2010, it seems they interpretated HTML different from each other.

Here are some examples of my problem:

GMail: enter image description here

Outlook 2010: enter image description here

Windows Live Mail: enter image description here

As you can see, I wasn't able to align the image (in Outlook and Windows Live Mail) with the text in the right to show as it should like in GMail image.

This is my code :

<hr>
<p style="color: gray;">
    <tr>
        <td>
            <a href="#"> <img src="file:///C:/images/logo.jpg" align="left" border="0"> </a>
        </td>

        <td>
            <b>Valter Henrique</b> <br>
            skype: valter_brain_set</br>
            email: <a href="#" style="text-decoration: none;color: #0056A2; ;">[email protected]</a></br>
            fones: <b>11. 2094 6999<b> | 15. 9122 1822 
        </td>
    </tr>
</p>
<p style="padding-left:15px;">
    <font size=2 style="color: gray;">
        <a href="#" style="text-decoration: none;color: gray;">
            rua cel. irineu de castro, 188 - SP 
        </a> 
        <b>11. 2094 6999 </b> 
        <a href="#" style="text-decoration: none;color: gray">
            brainset.com.br
        </a>
    </font>
</p>

It seems that each email reader interpret the HTML pretty different from each other. There's some way to fix this ?

Upvotes: 0

Views: 2779

Answers (2)

Valter Silva
Valter Silva

Reputation: 16656

In the end this is my signature as I wish (thank you guys for the support):

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
<HTML>
    <HEAD></HEAD>
<BODY dir=ltr>
    <DIV dir=ltr>
        <DIV style="FONT-FAMILY: 'Arial'; COLOR: #000000; FONT-SIZE: 10pt">
            <DIV>&nbsp;</DIV>
            <DIV style="FONT-FAMILY: 'Arial'; COLOR: #000000; FONT-SIZE: 10pt">
                <STYLE type=text/css>
                    img{
                        border: 0;
                    }
                </STYLE>

                <DIV style="FLOAT: left">
                    <HR>

                    <TABLE style="COLOR: #000000">
                        <TBODY>
                            <TR>
                                <TD>
                                    <A href="http://www.brainset.com.br">
                                        <IMG style="BACKGROUND-IMAGE: none; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; FLOAT: left; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px" title=logo border=0 alt=logo align=left src="file:///C:/BRAINSET/Email/assinatura/bs_innovo/valter_henrique/images/logo.jpg" width=156 height=76> 
                                    </A>
                                </TD>

                                <TD>
                                    <FONT size=2>
                                        <B>Valter Henrique</B> <BR>
                                        <FONT color=#666666>skype: valter_brain_set<BR>email: </FONT>
                                    </FONT>
                                    <A  style="COLOR: #0056a2; TEXT-DECORATION: none" href="mailto:[email protected]">
                                        <FONT color=#666666 size=2>[email protected]</FONT>
                                    </A>
                                    <BR>
                                    <FONT color=#666666>
                                        <FONT size=2>fones: 11. 2094-6999 | 15. 9122-1822</FONT> 
                                    </FONT>
                                </TD>
                            </TR>
                        </TBODY>
                    </TABLE>
                    <BR>
                    <STRONG>&nbsp;&nbsp;&nbsp;&nbsp; </STRONG>
                    <A style="COLOR: gray; TEXT-DECORATION: none" href="http://g.co/maps/upbwq">rua cel. irineu de castro, 188 - SP </A>
                    <B><FONT color=#0056A2>11. 2094 6999 </FONT><FONT color=#666666>|</FONT>&nbsp;</B>
                    <A style=" TEXT-DECORATION: none" href="http://www.brainset.com.br">
                        <FONT color=#0056A2>brainset.com.br</FONT> 
                    </A>
                </DIV>
            </DIV>
        </DIV>
    </DIV>
</BODY>
</HTML>

Upvotes: 1

Nicholas M Ort
Nicholas M Ort

Reputation: 11

To make the text align to top, try valign=top in the td:

 <td valign="top">

To make the text look the same, play around with the line-height and font properties in the CSS.

Upvotes: 0

Related Questions