Outlook underlining words in HTML email


#1

Hi,

I'm creating a HTML email, but for some reason, when it is viewed in Outlook online, it is underlineing words.

I've tried applying text-decoraion: none!important;, but it still underlines words.

Does anyone know why this is happening?

This is a sample part of my code:

<td style="padding:  30px 30px; text-align: center; text-decoration: none!important">
                        <span style="display: block; font-size: 26px; font-family: 'Lato', Arial; color: #494949; padding: 0 0 20px 0; text-decoration: none!important;">"Heading</span>
                        <span style="font-size: 16px; line-height: 22px; font-family: 'Lato', Arial; color: #494949; text-decoration: none!important;">text</span>
                      </td>

#2

Hi,

Please try again, I think you just mistyped that declaration here, but your posted code also omits the space before !important. :wink:


#3

Thank, I have now spelt it correctly, but it is still underlining the text:

<td style="padding:  30px 30px; text-align: center; text-decoration: none !important">
                        <span style="display: block; font-size: 26px; font-family: 'Lato', Arial; color: #494949; padding: 0 0 20px 0; text-decoration: none!important;">Heading</span>
                        <span style="font-size: 16px; line-height: 22px; font-family: 'Lato', Arial; color: #494949; text-decoration: none !important;">Text</span>
                      </td>

#4

FWIW, I'm not familiar with Outlook online, :slight_smile:

The underlining is the default for links, maybe also in Outlook online.

If this table is wrapped in an anchor, you might try give that anchor a class in order to select just that one to remove the textdecoration in its children.


#5

Why would that snippet get underlined?

It's not a link as such and I don't believe outlook underlines all text.

Do you have an un-closed link somewhere else in the page?

I think we'd need to see the whole page if all your text is being underlined.

Outlook does underline links by default and I'm not sure that you can over-ride it as I believe some versions of outlook add the underline tag (u) around the link itself and so applying rules to the link have no effect. In some cases outlook will also strip !important rule so you need to specify the rule twice (once with !important and then without).

Html email is a nightmare and not all things are possible.


#6

Thanks for the replies.

I worked out that it was the display: block; that was causing it for some reason. I replaced it with display: inline-block; width: 100%;

and it fixed the issue


#7

Weird :slight_smile:


#8

It's only weird to normal folks.:slight_smile:

If I were to guess, I would say that Microsoft does not put too much development into Outlook.

It's possible that it still runs on the old IE Trident engine, or some variant of it.

Remember the IE bugs that were fixed by display:inline; with no rhyme or reason.


#9

I think it's among the worst to write html/css emails for.


#10

I've wiped them from my history :slight_smile:


#11

First that comes to mind is the infamous double float margin bug for IE6!


#12

Did you by any chance also happen to remove the !important ?

I'm wondering if instead of stripping out only the !important it might be stripping out the entire rule.

In any case AFAIK, other than user styles, in-line styles have top precedence. So if email is like a browser in that respect (I would not be the least bit surprised if it isn't) then I think the !important should be uneccessary. I would hope that it would be ignored and not cause a rule removal, but being email who knows.


#13

In browsers !important will top in-line style.
But who knows with Outlook, it does some very strange things with "standard" html & css. I've not been doing this long enough to remember doing things for old IE (<8) so I don't know if it's the same odd behaviour.

I never did much with emails either, until last month I had to do a mail shot. I thought it would be simple enough, no multiple columns, so no need to tables, I'll just use very basic html elements and css properties, avoiding any fancy html5 and css3 stuff. But viewed in Outlook I got gaps in the containing div where the body background showed through wherever there was a margin on sub-elements. So ended up doing a table after all.
I thought people used tables as a hack to get columns, like the old web, but I needed one just for a basic stacked blocks layout that worked in Outlook.


#14

Yes, my point was that !important in an in-line style seems uneccessary. Unless of course Outlook is also using !important

For browsers, the W3C specs can be used to see how browsers should work with HTML. But I have never seen any similar documentation for how email clients should work with HTML and I don't think there is even such a thing as email DOCTYPEs.

Thinking about it, it does seem odd that standards for emails has fallen through the cracks for so long a time.


#15

Yes, you would think they would up the game a bit.
Thunderbird isn't bad at displaying modern css, but Outlook and Gmail are pretty bad.
Why can't MS and Google put some technology from Edge and Chrome into their email clients and bring them up to speed?


#16

Good question. That approach seems to be working well for Thunderbird

Thunderbird is built on the same technical platform as the Firefox web browser.

At least if there were some consistency between browser and email client coding up HTML emails wouldn't be a trek through a mine field.


#17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.