2

I have created a HTML email that displays fine in all the email clients I have tested it in, expect for Hotmail. Hotmail for some reason, is stripping my css border styles and not displaying them.

I have included part of the code that has the border on it:

<td bgcolor="white" width="121" style="background: #ffffff; height: 25px; border-bottom: 1px solid lightgray; border-bottom: 1px solid #dcdcdc;">TEST DATA</td>

I have put the styling on the TD, but it is not showing up. I have also tried the below code, but this does not work either:

    <td bgcolor="white" width="121" style="background: #ffffff; height: 25px; border-bottom: 1px solid; border-color: rgb(220, 220, 220);">TEST DATA</td>

Does anyone know how to get CSS borders to display in Hotmail as the are displaying fine in other email clients.

Any help would be gratefully recieved.

Triforce
  • 21
  • 2

4 Answers4

0

Put a DIV in the TD and style the DIV instead.

Here is a handy guide on Email CSS restrictions:

http://www.campaignmonitor.com/css/

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • Thanks for your reply. This is what I have done. I tried to put the div in the td like this:
    DATA
    , but it still did not work in Hotmail. This is the only email client that the border does not work in.     – Triforce Feb 07 '12 at 16:56
0

One thing you can try is to use none of the short-hand border styling, e.g. instead of:

border-bottom:1px solid;

Try

border-bottom-width:1px;
border-bottom-style: solid;
danwellman
  • 9,068
  • 8
  • 60
  • 88
  • I have now tried this: DATA, but it still is not working in Hotmail. Does anyone know of anything else that I can try? – Triforce Feb 07 '12 at 17:21
  • Instead of writing the color in hex (#dcdcdc), I tried writing it in words (lightgray). The borders now work in Hotmail, but have stopped working in Outlook 2010. – Triforce Feb 08 '12 at 09:40
  • 1
    >< someone needs to explain to Microsoft what 'consistent' means..! – danwellman Feb 08 '12 at 10:50
0

try: border="1"

Does that work in hotmail?

Hans de Vries
  • 98
  • 4
0

If none of the border solutions are working, have you tried making a "fake" border using the CSS background property? It's a cosmetic work around.

background: #fff url('fakeBorder.gif') no-repeat right;

Hope this helps.

Jim
  • 1,274
  • 1
  • 10
  • 15