Most of the issues have been cleared up but one of my h1's will turn black in dark mode on Outlook 360 and I'm not quite sure as to why.
<h1 mc:edit="header-title"
color="#ffffff"
mc:label="header-title"
class="header-title darkmodecolor"
style="margin: 0;padding: 0;box-sizing: border-box;font-family: Arial, Helvetica, sans-serif;max-width: 100%;color: white !important;font-weight: 700;font-size: 28px;line-height: 140% !important;">
<span
class="header-title darkmodecolor"
style="color: white !important;">
text is here
</span>
</h1>
I have tried using the color scheme media query but nothing is affecting it.
Related
I was tasked with removing unnecessary tags from computer-generated HTML that had a lot of useless tags (I only wanted to keep color/strong/em information). I came along something similar to this HTML:
<b>
<span style="FONT: 20pt "Arial"">
<strong>bold</strong> not bold <b>bold</b> not bold
</span>
</b>
For me (on chrome & firefox), it shows the bold text as bold and the not bold text as not bold, and I am confused as to why this is. In particular, this makes my task more complicated: I thought I could just remove the tags that do not have color/strong/em info, so change it to something like this:
<b>
<strong>bold</strong> not bold <strong>bold</strong> not bold
</b>
But now, all is bold instead of what it used to be.
I tried to find out what I could put in the FONT style to reproduce this behaviour:
Replacing Arial with foo kept the behaviour:
<b>
<span style="FONT: 20pt foo">
<strong>bold</strong> not bold <b>bold</b> not bold <!-- not bold is actually not bold! 20pt is applied -->
</span>
</b>
Switching the size and font changed the behaviour:
<b>
<span style="FONT: "Arial" 20pt">
<strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold. 20pt is _not_ applied -->
</span>
</b>
Any of the two values on their own did nothing much:
<b>
<span style="FONT: "Arial"">
<strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold -->
</span>
</b>
<b>
<span style="FONT: 20pt">
<strong>bold</strong> not bold <b>bold</b> not bold <!-- everything is bold -->
</span>
</b>
<b>
<span style="FONT: 20pt "Arial"">
<strong>bold</strong> not bold <b>bold</b> not bold
</span>
</b>
<div>Replacing `Arial` with `foo` kept the behaviour:</div>
<b>
<span style="FONT: 20pt foo">
<strong>bold</strong> not bold <b>bold</b> not bold
<!-- not bold is actually not bold! 20pt is applied -->
</span>
</b>
<div>Switching the size and font changed the behaviour:</div>
<b>
<span style="FONT: "Arial" 20pt">
<strong>bold</strong> not bold <b>bold</b> not bold
<!-- everything is bold. 20pt is _not_ applied -->
</span>
</b>
<div>Any of the two values on their own did nothing much:</div>
<b>
<span style="FONT: "Arial"">
<strong>bold</strong> not bold <b>bold</b> not bold
<!-- everything is bold -->
</span>
</b>
<b>
<span style="FONT: 20pt">
<strong>bold</strong> not bold <b>bold</b> not bold
<!-- everything is bold -->
</span>
</b>
Can anyone explain this behaviour, or at least tell me what styles I should look for that cancel outer styles?
I think I found the answer to my question, on the font css property documentation page. It states:
As with any shorthand property, any individual value that is not
specified is set to its corresponding initial value (possibly
overriding values previously set using non-shorthand properties).
Though not directly settable by font, the longhands font-size-adjust
and font-kerning are also reset to their initial values.
(My emphasis)
And a bit further down:
Initial value as each of the properties of the shorthand:
font-style: normal
font-variant: normal
font-weight: normal
font-stretch: normal
font-size: medium
line-height: normal
font-family: depends on user agent
So setting font: 20pt arial is equivalent to setting font-style: normal;font-variant: normal;font-weight: normal;font-stretch: normal;font-size: 20pt;line-height: normal;font-family: arial
In particular, the font-weight is reset from bold (or whatever it was) to normal.
So to solve my underlying question, I should look for font tags that do not specify the weight.
P.S. The reason that font: arial 20pt did not have this behaviour is because this is not an allowed value for font, so it is ignored:
If font is specified as a shorthand for several font-related properties, then:
it must include values for: <font-size> <font-family>
font-style, font-variant and font-weight must precede font-size
font-family must be the last value specified.
And in font: arial 20pt the font-family is not the last value specified.
Fonts depend on your actual browser and actual font. ref: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
Fonts have a particular weight which corresponds to one of the numbers
in Common weight name mapping. However some fonts, called variable
fonts, can support a range of weights with a more or less fine
granularity, and this can give the designer a much closer degree of
control over the chosen weight.
WHICH of the copyrighted or not fonts do you have? Depends. Browser, computer, CSS etc. but we cannot tell here.
Always specify a fallback (sans-serif in this case) This can all get a bit "tricky".
Bottom line: put all this in CSS and use classes so you can actually control it best and less HTML overall when you decide to change things Like pt is not normally great for visual but is for printed but not used much in modern HTML as a size. Now if you decide to change the size you have a lot of places to change it but if in CSS only one.
Now for some examples: (not all inclusive of the topic by any means)
.container {
font-weight: normal;
margin: 1em;
}
.container .fonty {
font-size: 20pt;
font-family: Arial, Helvetica, Verdana, "Gill Sans", sans-serif;
}
.heavy-one {
font-weight: 600;
}
.heavy-two {
font-weight: 900;
}
<div class="container">
<span class="fonty">
<span class="heavy-one">bold</span> not bold <span class="heavy-two">bolder</span> not bold
</span>
</div>
<div class="container">
<span class="fonty heavy-container">
<span class="heavy-one">bold</span> not bold <span class="heavy-two">bolder</span> not bold
</span>
</div>
<p>One with style in tags: (don't do this)
<span>
<span style="font-weight: normal; font-size: 20pt; font-family: 'arial', 'Arial', sans-serif;">
<span style="font-weight: bold;">bold</span> not bold <span style="font-weight: bold;">bold</span> not bold</span>
</span>
</p>
<p>Second with style in tags: (don't do this, bolder not great IMHO as it is one step heavier)</p>
<span style="font-weight: normal; font-size: 20pt; font-family: 'arial', 'Arial', sans-serif;">
<span style="font-weight: bold;">bold</span> not bold <span style="font-weight: bolder;">bold</span> not bold</span>
<p>Third with style in tags and <strong>: (don't do this) This also shows multiple similar font families and the fallback to "sans-serif" you should always include</p>
<span style="font-weight: normal; font-size: 20pt; font-family: Arial, Helvetica, Verdana, sans-serif;"><strong>bold</strong> not bold <strong>bold</strong> not bold</span>
For some reason, the ending of my email gets messed up any time there's a list (or div, or blockquote) above it. If I remove the list, then the problem magically goes away. Everything is closed properly, everything is aligned properly, etc. So I'm at a loss - what am I doing wrong? Template below:
<div style="max-width: 600px !important; padding: 20px; background-color: #FFFFFF"><p style="color: #191C22;font-family: Arial, sans-serif;margin: 10px 0;padding: 0;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-size: 16px;line-height: 150%;text-align: left; width: 100%;">Hi! <br>
<br>
Thanks for starting your application!<br><br>
Give us a call at our number or you can email us with questions.
<br><br>
Thanks for your business!<br>
<br>
<ul></ul>
Best,<br>
Magenta & Co
</p>
</div>
I can't for the life of me figure out what is causing this little white box when hovering over a button. I've recreated the code on codepen and it isn't there.
The html for the section is:
<div class="custom">
<h3><span style="color: #ffffff; margin-top: 50px;"><br>
Thinking of a new website?</span></h3>
<p style="text-align: left;"><span style="color: #ffffff;">Get started with this free guide</span></p>
<h4 style="text-align: left; margin-top: 20px;"><span style="color: #ffffff;">8 Steps To A High Impact Website Redesign</span><br>
<span style="color: #ffffff;"><small>How To Finally Get Your Website Sorted (And Actually Getting Results)</small></span></h4>
<p style="text-align: left;"><span style="color: #ffffff;"><a class="manual-optin-trigger" data-optin-slug="rnrqwxq9x7zlekfs" href="#" style="color: #ffffff;"><span class="btn">Send me the guide</span></a></span></p>
</div>
There are a couple of extensive stylesheets which apply to the page, so I'm not sure whether it would be easier to view the page here.
The button in question is the one about half way down under the heading 'Thinking of a new website?'. If you hover over the button that says 'Send me the guide' you will see it turns yellow and a white box appears to the right of it....I'm baffled???
Can anyone provide any ideas as to what might be causing it?
Thank you in advance.
D
Trying to add a color and Font family within a H1 tag together using style still it not works.Color property does not have any effect on my current line
<h1 align="center" style=" font-family:Arial, Helvetica, sans-serif"color:#0000FF">The Island Resort and Spa
<br>Welcome to Holiday Speciala</h1>
Why Text is not colored?
Because you separate between css properties using " and it is wrong the style attribute written as follow style="" and inside the double quotes you should write you css properties and separate between them using ; like this
style=" font-family:Arial, Helvetica, sans-serif; color:#0000FF"
Got a little typo there..
<h1 align="center" style=" font-family:Arial, Helvetica, sans-serif; color:#0000FF">The Island Resort and Spa
<br>Welcome to Holiday Speciala</h1>
I've created a responsive HTML email which works fine across many different platforms except when viewed on iPhone.
It seems that iOS is recognising a date + time and applying a blue colour/underline to the content. I've researched this issue for the past couple hours and am at a dead end.
I've tried turning format detection off for phone numbers:
<meta name="format-detection" content="telephone=no">
I've tried including date and address in this too:
<meta name="format-detection" content="telephone=no, date=no, address=no">
I've tried adding !important to the styles on the element with still no luck:
<h4 style="font-size: 16px;color: #FFFFFF !important; text-decoration:none !important;font-family: Arial;font-weight: bold;padding: 0;margin: 0;text-align: left;line-height: 1.3;word-break: normal;" class="appleLinksWhite">
Thursday 20th November
</h4>
<p style="color: #FFFFFF !important; text-decoration:none !important;margin: 0;margin-bottom: 0;font-family: Arial;font-weight: normal;padding: 0;text-align: left;line-height: 19px;font-size: 14px !important;" class="appleLinksWhite">
10:45am until 12:30pm,<br>The Feast, Suffolk Food Hall, Ipswich
</p>
I've tried adding a class to the elements .appleLinksWhite as recommended here which still did not do the trick.
I have also tried wrapping the inner contents in a <span> with the colour and text-decoration set and this still didn't work.
I'm at a loss for other things to try. How can I disable this behaviour?
Edit* It's worth noting that the issue is only with iPhone 4/5. iPhone 6/Plus are fine.
This will eliminate the blue+underline styling (tested on iPhone 5, iOS 8.3):
a[href^="x-apple-data-detectors"] {
color: inherit !important;
text-decoration: inherit !important;
}
I managed to get this working by tricking the date detection algorithm into thinking it's not dealing with a date by inserting a zero width character in between my date/time strings e.g:
<h4 style="font-size: 16px;color: #FFFFFF !important; text-decoration:none !important;font-family: Arial;font-weight: bold;padding: 0;margin: 0;text-align: left;line-height: 1.3;word-break: normal;" class="appleLinksWhite">
Thursday 20th November
</h4>
<p style="color: #FFFFFF !important; text-decoration:none !important;margin: 0;margin-bottom: 0;font-family: Arial;font-weight: normal;padding: 0;text-align: left;line-height: 19px;font-size: 14px !important;" class="appleLinksWhite">
10:45am until 12:30pm,<br>The Feast, Suffolk Food Hall, Ipswich
</p>