Horizontal lines in Windows Live Hotmail on Firefox

Hello,

I am new to HTML emails, just getting used to tables / inline styles / Outlook 2007 issues etc.

One problem that I have noticed is that when I send an email to a Windows Live Hotmail account and view it using Firefox it appears with white horiztonal lines across it. 

Has anyone else had this problem?  Have you found a solution?

Code below:

<html>
<head>

<title>Theatre conversations</title>
</head>

<body bgcolor="#ffffff">
    <table width="600" cellpadding="0" cellspacing="0" style="margin: 0px auto;vertical-align:top; font-family:Verdana, Arial, Helvetica, sans-serif;">
   
        <tr style="background-color: #006fba; color:#ffffff;padding:0;margin:0;">
       
            <td style="vertical-align:top;border-left:solid 1px #000000;border-top:solid 1px #000000;padding:0 0 0 10px;margin:0;" align="left">
                <span style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 3em;font-weight: normal; color: #000000; background-color:#006fba;padding:0;margin:5px 0 0 10px;">THEATRE </span>            </td>
            <td style="vertical-align:top;border-right:solid 1px #000000;border-top:solid 1px #000000;padding:0;margin:0;"><img src="images/bbk_logo.gif" width="175" height="61" alt="Birkbeck, University of London logo" align="right" style="margin:0;" /></td>
        </tr>
       
        <tr style="background-color: #006fba; color:#ffffff; padding:0;margin:0;">
          <td colspan="2" style="vertical-align:top;border-left:solid 1px #000000;border-right:solid 1px #000000;padding:0 0 5px 10px;margin:0;" align="left"><span style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 3em; font-weight: normal;color: #ffffff; background-color:#006fba;padding:0;margin:0 0 5px 10px;">CONVERSATIONS</span></td>
      </tr>
      <tr>
        <td colspan="2" style="background-color: #ffffff; color:#3f3f3f; vertical-align:top;border-left:1px solid #000000;border-right:1px solid #000000;">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
         <tr>
            <td colspan="2" style="margin:0; padding: 0; background-color: #006fba;">
                <img src="images/theatre_conversations1.jpg" width="598" height="226" alt="Theatre conversations" style="padding:0; margin: 0;" />            </td>
          </tr>
          <tr>
            <td colspan="2" style="background-color: #006fba; padding:20px; ">
            <span style="color:#000000;padding:0;margin:0;font-size:1.3em;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:normal;">
            CONVERSATIONS BETWEEN            </span>
            <span style="color:#ffffff;padding:0;margin:0;font-size:1.3em;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:normal;">
            WRITERS, DIRECTORS, CRITICS, ACADEMICS AND AUDIENCE MEMBERS            </span>            </td>
          </tr>
          <tr style="background-color: #006fba; color:#ffffff;padding:0;">
            <td valign="top" style="background-color: #006fba; color:#ffffff;padding:0;">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td style="background-color: #006fba; color:#ffffff;padding:0 20px 20px 20px;font-size:.8em;font-family:Verdana, Arial, Helvetica, sans-serif;">
                <strong>Thursday 11 October</strong><br />
Details </td>
              </tr>
              <tr>
                <td style="background-color: #006fba; color:#ffffff;padding:0 20px 20px 20px;font-size:.8em;font-family:Verdana, Arial, Helvetica, sans-serif;">
               <strong>Thursday 25 October</strong><br />
Details            </td>
              </tr>
              <tr>
                <td style="background-color: #006fba; color:#ffffff;padding:0 20px 20px 20px;font-size:.8em;font-family:Verdana, Arial, Helvetica, sans-serif;">
                <strong>Thursday 8 November</strong><br />
Details              </td>
              </tr>
              <tr>
                <td style="background-color: #006fba; color:#ffffff;padding:0 20px 20px 20px;font-size:.8em;font-family:Verdana, Arial, Helvetica, sans-serif;">
                <strong>Thursday 22 November</strong><br />
Details            </td>
              </tr>
            </table></td>
            <td valign="top">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td style="background-color: #006fba; color:#ffffff;padding:0 20px 40px 20px;font-size:.8em;font-family:Verdana, Arial, Helvetica, sans-serif;">
                <em>Conversations</em> are free and open to the public but places must be reserved.                </td>
              </tr>
              <tr>
                <td style="background-color: #006fba; color:#ffffff;padding:0 20px 40px 20px;font-size:.8em;font-family:Verdana, Arial, Helvetica, sans-serif;">
               Address, London WC1B  7.40pm–9pm                </td>
              </tr>
            </table></td>
          </tr>
        </table>        </td>
      </tr>

</table>
</body>
</html>

Mathew Mathew, 9 years ago

Can you give us a screenshot Naomi? That would help with recognising the issue.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Naomi, 9 years ago

Hi Mathew,

Here's the screenshot:

http://www.bbk.ac.uk/imagez/unwanted_lines.jpg

Stig Stig, 9 years ago

There's several issues in Bugzilla (Mozillas bug tracking system) that might match your problem:
http://bugzilla.mozilla.org/show_bug.cgi?id=383199
http://bugzilla.mozilla.org/show_bug.cgi?id=361768
http://bugzilla.mozilla.org/show_bug.cgi?id=376124

So most likely, it's a CSS bug in Firefox. But I'm not sure what part of your code could be causing it.

From what I understand, though, you only have this problem in Windows Live Hotmail - not when you view the original HTML-file?

That also might mean that the problem is caused by
a) changes made to the code by Windows Live Hotmail
or b) code in the interface around the email affecting how it's displayed.

It might be helpful if you post the code that Windows Live Hotmail produces - at least the part with the email - and which version of Firefox you're using. If you don't have the latest version installed, you might also wanna try viewing it on that.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Naomi, 9 years ago

Hi,

Thanks for your reply stig,  the problem IS just in Windows Live Hotmail in Firefox.  I do have the latest version of Firefox. 

I'm not sure how to get the code to show you, when I am in Hotmail and view source the code for the email isn't there, just the code copied below.  Excuse my ignorance, if you know how to view it let me know.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   
    <meta name="msn-moz-custom" content="enabled" />
    <script type="text/javascript" src="http://gfx6.mail.live.com/mail/12.0.1190.0927/MSNPlatform/browsercompat.js"></script>
   
    <style type="text/css">
        .cEditMessagePaneHeaders DIV.Values {padding-left:0px;margin-left:7.5em;}
    </style>

   
<script language="javascript" type="text/javascript">

if(window.screen.width<990||window.screen.height<700)
{
    document.cookie = "lr=1;path=/";
    window.location = "/mail/TodayLight.aspx?n=990479032";
} else {
    document.cookie = "lr=0;path=/";
}

</script>

<script language="javascript">
try{if(window.top.document!=document){window.top.location=document.location.href;}}catch(ex){window.top.location=document.location.href;}
var hashParameters =
{
    themeid    : "0",
    layout    : "TodayDefault",
    msgid    : "",
    to        : "",
    subject    : "",
    body    : "",
    cc        : "",
    contactid : "",
    todayPageOptOut: false,
    readingPaneLayoutEnum: "1"
}
</script>       

<script language="javascript">
var cookies = document.cookie.split(";");
for(var i=0;i<cookies.length;i++){
    var pair=cookies[i].split("=");
    if (pair[0].indexOf("MSPAuth")>0){
        re = /^[\s ]*$/;
        if (re.test(pair[1])) top.location.reload(true);
    }
}
</script>

    <title>Windows Live Hotmail</title>
    <link rel="icon" href="http://gfx2.hotmail.com/mail/w2/pr02/ltr/favicon.ico" />
    <link rel="shortcut icon" href="http://gfx2.hotmail.com/mail/w2/pr02/ltr/favicon.ico" />       
</head>
<frameset id="app_frameset" rows="0%,100%,0%,0%,0%" frameborder="no" framespacing="0" >
    <frame id="bootstrap_frame" name="bootstrap" src="Bootstrap_12.0.1190.0927.aspx" noresize>

    <frame id="loading_frame" name="loading" src="loading_12.0.1190.0927.aspx?culture=en-GB" noresize>
    <frame id="app_frame" name="main" src="ApplicationMain_12.0.1190.0927.aspx?culture=en-GB&hash=4069062031" noresize>
    <frame id="options_frame" name="options" src="" noresize>
    <frame id="history_frame" name="history" src="hist0_12.0.1190.0927.htm" noresize>
</frameset>
</html>

Stig Stig, 9 years ago

Hi Naomi,
to get the source for the email, open it in Windows Live Hotmail, and right click it. Then, click "This Frame" and "View Frame Source".

Hope that made sense.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
Naomi, 9 years ago

Hi, thanks, that's very helpful as I had completely forgotten how to do it, but when I do that I get  a vast amount of code (so much that it wouldn't let me post it all) but none of it is my email!

Stig Stig, 9 years ago

I gave it a try, and basically got this markup out:

<div id="MessageBodyAll" style="display: block;">
    
    <div class="MessageBody">

        <br>
        <div id="MessageBodyText" class="ExternalClass">
        

<meta http-equiv="Content-Type" content="text/html; charset=unicode">
<meta name="Generator" content="Microsoft SafeHTML"><title>Theatre conversations</title>



    <table style="vertical-align: top; font-family: Verdana,Arial,Helvetica,sans-serif;" cellpadding="0" cellspacing="0" width="600">
    
        <tbody><tr style="padding: 0pt; background-color: rgb(0, 111, 186); color: rgb(255, 255, 255);">
        
            <td style="border-top: 1px solid rgb(0, 0, 0); border-left: 1px solid rgb(0, 0, 0); padding: 0pt 0pt 0pt 10px; vertical-align: top;" align="left">

                <span style="padding: 0pt; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 3em; font-weight: normal; color: rgb(0, 0, 0); background-color: rgb(0, 111, 186);">THEATRE </span>            </td>
            <td style="border-top: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0); padding: 0pt; vertical-align: top;"><img src="http://gfx2.hotmail.com/mail/w2/pr02/ltr/i_safe.gif" alt="Birkbeck, University of London logo" style="" onclick="onClickUnsafeLink(event);" align="right" height="61" width="175"></td>
        </tr>
        
        <tr style="padding: 0pt; background-color: rgb(0, 111, 186); color: rgb(255, 255, 255);">
          <td colspan="2" style="border-left: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0); padding: 0pt 0pt 5px 10px; vertical-align: top;" align="left"><span style="padding: 0pt; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 3em; font-weight: normal; color: rgb(255, 255, 255); background-color: rgb(0, 111, 186);">CONVERSATIONS</span></td>
      </tr>
      <tr>

        <td colspan="2" style="border-left: 1px solid rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0); background-color: rgb(255, 255, 255); color: rgb(63, 63, 63); vertical-align: top;">
        <table border="0" cellpadding="0" cellspacing="0" width="100%">
         <tbody><tr>
            <td colspan="2" style="padding: 0pt; background-color: rgb(0, 111, 186);">
                <img src="http://gfx2.hotmail.com/mail/w2/pr02/ltr/i_safe.gif" alt="Theatre conversations" style="padding: 0pt;" onclick="onClickUnsafeLink(event);" height="226" width="598">            </td>
          </tr>
          <tr>
            <td colspan="2" style="padding: 20px; background-color: rgb(0, 111, 186);">

            <span style="padding: 0pt; color: rgb(0, 0, 0); font-size: 1.3em; font-family: Verdana,Arial,Helvetica,sans-serif; font-weight: normal;">
            CONVERSATIONS BETWEEN            </span>
            <span style="padding: 0pt; color: rgb(255, 255, 255); font-size: 1.3em; font-family: Verdana,Arial,Helvetica,sans-serif; font-weight: normal;">
            WRITERS, DIRECTORS, CRITICS, ACADEMICS AND AUDIENCE MEMBERS            </span>            </td> 
          </tr>
          <tr style="padding: 0pt; background-color: rgb(0, 111, 186); color: rgb(255, 255, 255);">
            <td style="padding: 0pt; background-color: rgb(0, 111, 186); color: rgb(255, 255, 255);" valign="top">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">

              <tbody><tr>
                <td style="padding: 0pt 20px 20px; background-color: rgb(0, 111, 186); color: rgb(255, 255, 255); font-size: 0.8em; font-family: Verdana,Arial,Helvetica,sans-serif;">
                <strong>Thursday 11 October</strong><br>
Details </td>
              </tr>
              <tr>
                <td style="padding: 0pt 20px 20px; background-color: rgb(0, 111, 186); color: rgb(255, 255, 255); font-size: 0.8em; font-family: Verdana,Arial,Helvetica,sans-serif;">
               <strong>Thursday 25 October</strong><br>

Details            </td>
              </tr>
              <tr>
                <td style="padding: 0pt 20px 20px; background-color: rgb(0, 111, 186); color: rgb(255, 255, 255); font-size: 0.8em; font-family: Verdana,Arial,Helvetica,sans-serif;">
                <strong>Thursday 8 November</strong><br>
Details              </td>
              </tr>
              <tr>

                <td style="padding: 0pt 20px 20px; background-color: rgb(0, 111, 186); color: rgb(255, 255, 255); font-size: 0.8em; font-family: Verdana,Arial,Helvetica,sans-serif;">
                <strong>Thursday 22 November</strong><br>
Details            </td>
              </tr>
            </tbody></table></td>
            <td valign="top">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tbody><tr>

                <td style="padding: 0pt 20px 40px; background-color: rgb(0, 111, 186); color: rgb(255, 255, 255); font-size: 0.8em; font-family: Verdana,Arial,Helvetica,sans-serif;">
                <em>Conversations</em> are free and open to the public but places must be reserved.                </td>
              </tr>
              <tr>
                <td style="padding: 0pt 20px 40px; background-color: rgb(0, 111, 186); color: rgb(255, 255, 255); font-size: 0.8em; font-family: Verdana,Arial,Helvetica,sans-serif;">
               Address, London WC1B  7.40pm?9pm                </td>
              </tr>

            </tbody></table></td>
          </tr>
        </tbody></table>        </td>
      </tr>
</tbody></table>
<p>This email was sent to test@hotmail.com. You can <em>instantly</em> unsubscribe from these emails by <a href="http://test.cmail2.com/u/000/l/" target="_blank" onclick="onClickUnsafeLink(event);">clicking here</a>.</p><img src="http://gfx2.hotmail.com/mail/w2/pr02/ltr/i_safe.gif" onclick="onClickUnsafeLink(event);" border="0" height="1" width="1">



        </div>
    </div>
    
</div>

"Microsoft SafeHTML", as they call it :)

I can't find any CSS in this, nor in the surrounding markup, or the linked stylesheet, that I suspect would cause this in Firefox, but I'm not too familiar with the bug.

I'm thinking it might be the compination of Firefox, frames and possibly some of the inline-styles Windows Live Hotmail produces. I haven't managed to narrow it down any further, though.


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
jdancisin, 9 years ago

I believe this is a rendering problem. I have seen this myself many times. When you scroll up and down through the page, the lines disappear and reappear continuously.

br br, 8 years ago
jdancisin :

I believe this is a rendering problem. I have seen this myself many times. When you scroll up and down through the page, the lines disappear and reappear continuously.

I would agree. I see this most every time I test in LiveMail. I would dismiss it as a rendering problem and nothing more. Can you really fix it? I would assume not.

sean


Bernstein-Rein Interactive
4600 Madison Ave. Suite 1500
Kansas City, MO 64113
Our work has a curious brain and a beating heart.
pimenta, 8 years ago

Hi there.

I struggled for a time on this issue and found a solution.

Just use this CSS code and test to see if it works:

table img {display:block;}


---------------------
Nelson Pimenta
---------------------
cyberderf, 8 years ago
pimenta :

Hi there.

I struggled for a time on this issue and found a solution.

Just use this CSS code and test to see if it works:

table img {display:block;}

Thanks. But it does not work .. Anyone found a real solution for this problem ?

Stuart.Wilkinson, 8 years ago

The only way I have found of working around this is by inserting the following font style tag with the image width and height around every image in the email.

e.g.
<font style="padding:0;margin:0;display:block; width:598px;height:226px;">
<img src="images/theatre_conversations1.jpg" width="598" height="226" alt="Theatre conversations" style="padding:0; margin: 0;" /></font>

This is a tiresome process as every image (including spacers) in the email needs to be treated this way but it works.

I have also seen the same issue occuring in a Yahoo! - Chrome combination and the above fixes that too.

Cheers,
Stu.

bluewebco bluewebco, 6 years ago

had the same problem.. providing there is no real text in the layout, surround it like this:

<div style="width:100%; line-height:0em; font-size:0em;" align="center">
CONTENT HERE
</div>

The significant part is the  line-height:0em; font-size:0em

HTH


Website Design & Management
http://www.bluewebco.com/

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098