locked
Viewing HTML email alters page formatting RRS feed

  • Question

  • User1027206698 posted

    I have a page with a grid on it that lists emails in my inbox.

    When I select an email it gets displayed in a label but when this happens some of the formatting on the page gets altered, i.e links are permenantly underlined - as shown in the attached images.

    This happens in both IE and Chrome.

    Before the email is viewed...

    When email is viewed...

    Wednesday, May 15, 2019 1:14 PM

All replies

  • User409696431 posted

    Use browser tools to examine the links and see what the CSS formatting is, and where it comes from, both before and after clicking on the email.  What changed?

    Wednesday, May 15, 2019 1:50 PM
  • User753101303 posted

    Hi,

    And in particular could it be a difference between https://developer.mozilla.org/en-US/docs/Web/CSS/:visited and not yet visited links ?

    Wednesday, May 15, 2019 5:04 PM
  • User839733648 posted

    Hi conners,

    When I select an email it gets displayed in a label but when this happens some of the formatting on the page gets altered, i.e links are permenantly underlined - as shown in the attached images.

    In my opinion, perhaps the underlined style is set by text-decoration: underline.

    I suggest that you could use F12 developer tools to check the style before you select the email and after.

    Maybe there are some js codes which include setting the text-decoration when you select the email.

    You may try to find it and modify that.

    Best Regards,

    Jenifer

    Thursday, May 16, 2019 6:08 AM
  • User1027206698 posted

    Done the f12 thingy and the only difference I can see is the following is added to the (existing) html class at the very top of the page...

    xmlns:v="urn:schemas-microsoft-com:vml"
    xmlns:o="urn:schemas-microsoft-com:office:office"
    xmlns:w="urn:schemas-microsoft-com:office:word"
    xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
    xmlns="http://www.w3.org/TR/REC-html40"

    Could that be causing the issue?

    Also, on a 2nd look/search the email (html) contains some script that does set the test-decoration:underline property.  Is there anything I can do to handle this?

    How do I prevent any styles within these emails, i.e. fonts, colours, from over-writing styles that already exist?

    Here's an example of the css in the email.  What I don't get is that it's all commented out - after the opening style tag and before the closing style tag - but still has an affect.

    <style><!--  /* Font Definitions */  
    @font-face   
    {
    font-family:"Cambria Math";   
    panose-1:2 4 5 3 5 4 6 3 2 4;
    }  
    @font-face   
    {
    font-family:Calibri;   
    panose-1:2 15 5 2 2 2 4 3 2 4;
    }  
    /* Style Definitions */  
    p.MsoNormal, li.MsoNormal, div.MsoNormal   
    {
    margin:0cm;   
    margin-bottom:.0001pt;   
    font-size:11.0pt;   
    font-family:"Calibri",sans-serif;   
    mso-fareast-language:EN-US;
    }  
    a:link, span.MsoHyperlink   
    {
    mso-style-priority:99;   
    color:#0563C1;   
    text-decoration:underline;
    }  
    a:visited, span.MsoHyperlinkFollowed   
    {
    mso-style-priority:99;   
    color:#954F72;   
    text-decoration:underline;
    }  
    span.EmailStyle17   
    {
    mso-style-type:personal-compose;   
    font-family:"Calibri",sans-serif;   
    color:windowtext;
    }  
    .MsoChpDefault   
    {
    mso-style-type:export-only;   
    font-family:"Calibri",sans-serif;   
    mso-fareast-language:EN-US;
    }  
    @page WordSection1   
    {
    size:612.0pt 792.0pt;   
    margin:72.0pt 72.0pt 72.0pt 72.0pt;
    }  
    div.WordSection1   
    {
    page:WordSection1;
    }  -->
    </style>

    Thursday, May 16, 2019 9:01 AM
  • User839733648 posted

    Hi conners,

    I suggest that you could use text-decoration: none to remove the underline style.

    And you could use !important, it means that, 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!'

    a:link, span.MsoHyperlink{
      text-decoration: none !important;
    }

    Or you could define another class style and add it using js.

    .someclass{
      text-decoration: none !important;
    }

    $("a").addClass('someclass');

    Best Regards,

    Jenifer

    Friday, May 17, 2019 8:05 AM