You are not logged in (login or register)

Forum home  ›  Email design & coding

Horizontal lines in Windows Live Hotmail on Firefox

  1. Naomi

    New member

    9 Posts

    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>

    Posted 3 years ago

  2. Mathew

    Campaign Monitor

    Sydney, Australia

    1700 Posts

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

    Posted 3 years ago

    _______

    Our book is out! http://campaignmonitor.com/book

  3. Naomi

    New member

    9 Posts

    Hi Mathew,

    Here's the screenshot:

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

    Posted 3 years ago

  4. Stig

    Campaign Monitor

    304 Posts

    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.

    Posted 3 years ago

  5. Naomi

    New member

    9 Posts

    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>

    Posted 3 years ago

  6. Stig

    Campaign Monitor

    304 Posts

    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.

    Posted 3 years ago

  7. Naomi

    New member

    9 Posts

    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!

    Posted 3 years ago

  8. Stig

    Campaign Monitor

    304 Posts

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

    Code:
    <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.

    Posted 3 years ago

  9. jdancisin

    Member

    26 Posts

    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.

    Posted 3 years ago

  10. br

    New member

    Kansas City, MO

    1 Posts

    jdancisin wrote:

    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

    Last edited by br (3 years ago)

    Posted 3 years ago

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

  11. pimenta

    New member

    Lisbon - Portugal

    2 Posts

    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;}

    Posted 3 years ago

    ---------------------
    Nelson Pimenta
    ---------------------

  12. cyberderf

    New member

    1 Posts

    pimenta wrote:

    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 ?

    Last edited by cyberderf (2 years ago)

    Posted 2 years ago

  13. Stuart.Wilkinson

    New member

    1 Posts

    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.

    Posted 2 years ago

  14. bluewebco

    New member

    1 Posts

    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

    Posted 6 months ago

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