Why does an HTML link appear blue in Outlook 2010? - html

I want to fix this link appearing in the color blue, when it should be white. It happens in outlook 2010.
<span style="font-family: Arial; font-size: 10px;">
You are subscribed with email address
<font style="color: rgb(255,255,255);"><%user.Email%> </font>
<a href="<%unsubscribe_link_text%>"
style="color: rgb(174, 215, 51) ! important;">
<font style="color: rgb(255,255,255);">Click here</font>
</a> to unsubscribe.
</span>
Can anyone see whats wrong with that and help me? :)

try with
<span style="font-family: Arial; font-size: 10px;">
You are subscribed with email address
<font style="color: rgb(255,255,255);"><%user.Email%> </font>
<a href="<%unsubscribe_link_text%>"
style="color: #ffffff ! important;">
<span style="color: #ffffff;">Click here</span>
</a> to unsubscribe.
</span>
notice the span inside the a

I've always set my colours in the style sheet against the a tag as follows and should work fine in Outlook.
a:link {
color: #666666;
}
a:visited {
color: #666666;
}
a:active {
color: #666666;

Try change this
style="color: rgb(174, 215, 51) ! important;
to
style="color: #ffffff";

Try using hex colors instead of RGB.
Master guide: http://www.campaignmonitor.com/css/

Related

text-decoration in multiple font-size in Mozilla Firefox

I have such situation (problem visible only in Mozilla Firefox):
<span style="text-decoration: underline;">
SomeText
<span style="font-size: 50pt">Bigger</span>
SomeText
</span>
<br/>
<span style="font-size: 50pt;">
<span style="text-decoration: underline">Bigger</span>
</span>
as you can see the underline under "Bigger" word in first line is thinner than the underline in second line. I want to do something like that: (but I don't want to change HTML, only CSS)
<span style="text-decoration: underline;">SomeText</span>
<span style="text-decoration: underline;font-size: 50pt;">Bigger</span>
<span style="text-decoration: underline;">SomeText</span>
I have tried to do that using text-decoration: inherit:
<span style="text-decoration: underline;">
SomeText
<span style="font-size: 50pt;text-decoration: inherit;">Bigger</span>
SomeText
</span>
but now I have got two underlines... So how can I do that? Thanks for help.
PS. I am using Mozilla Firefox
Turn the inner span into an inline-block. See this answer for explanation.
.underline-all {
text-decoration: underline;
}
.underline-all * {
display:inline-block;
text-decoration: underline;
}
<span class="underline-all">
SomeText
<span style="font-size: 50pt">Bigger</span>
SomeText
</span>

HTML please Hilp

Hey so im making a website for ICT class for hmk and basically i want "R A S T A" printed accross the front page how would you recommend going about this problem?
<P class="sans" align="center"> <font size="80" color="#009900" >R</p> </font>
<p class="sans" align="center"> <font size="80" color="#ffff00" >A </p> </font>
<p class="sans" align="center"> <font size="80" color="#ff0000" >S </p> </font>
<p class="sans" align="center"> <font size="80" color="#009900" >T </p> </font>
<p class="sans" align="center"> <font size="80" color="#ffff00" >A </p> </font>
I tried to understand your question but it is hard to visualize exactly what you want. So I'll just clean and update your code (i.e. bring it into the 21st Century).
Please don't use the <font> tag or the align attribute anymore. It's 2016.
If this is a heading, use <h1>, not <p>.
Tags work like parentheses in math. Close the inner before the outer:
<strong><em>this is correct.</em></strong>
<strong><em>this is incorrect.</strong></em>
Learn CSS. It saves you from repeating a lot of code and it's just the right thing to do.
<style>
/* this is CSS */
.page-heading {
font-size: 80px;
}
.letter1, .letter4 { color: #009900; }
.letter2, .letter5 { color: #ffff00; }
.letter3 { color: #ff0000; }
</style>
<h1 class="page-heading">
<span class="letter1 sans">R</span>
<span class="letter2 sans">A</span>
<span class="letter3 sans">S</span>
<span class="letter4 sans">T</span>
<span class="letter5 sans">A</span>
</h1>
If class .sans is what I think it is (font-family: sans-serif), and its properties are all inherited (as indeed font-family is) then you don't need to apply it to each span; you can apply it to the entire heading. Each span will inherit it from the heading. Again, this only works if all the properties in .sans are inherited.
<h1 class="page-heading sans">
<span class="letter1">R</span>
<span class="letter2">A</span>
<span class="letter3">S</span>
<span class="letter4">T</span>
<span class="letter5">A</span>
</h1>
Alternate solution: Use all descriptive CSS classes. Recommended only for very advanced CSS authors.
(This method reduces CSS size, however design changes must be reflected in the HTML, not the CSS. When first learning CSS you're better off with the method above.)
<style>
.fz-80 { font-size: 80px; }
.c-green { color: #009900; }
.c-yellow { color: #ffff00; }
.c-red { color: #ff0000; }
</style>
<h1 class="sans fz-80">
<span class="c-green">R</span>
<span class="c-yellow">A</span>
<span class="c-red">S</span>
<span class="c-green">T</span>
<span class="c-yellow">A</span>
</h1>

Overwrite span styles

I am new to CSS !
I would like to overwrite a span style using external CSS. Any suggestions?
!important did not work for me.
Sample code below.
<div class="abc" id= "xy" style="font-size: 30px;">
<span style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span> </div>
basically I would like to overwrite the #009530 for the text using a external css.
I tried like below external css. It did not work for me.
#xy {
color: blue !important;
}
TIA
Use following css:
#xy span{
color: blue !important;
}
<div class="abc" id="xy" style="font-size: 30px;">
<span style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span>
</div>
<span id="xy" style="color: #009530;">bcdefghijklmnopqrstuvwxyz bananaaa</span>
css
#xy
{
color: blue !important;
}

How do I add space between span in html for emails?

I am making email templates so I am limited with what I can do.
I've got align="center" but I still need space between the two spans. How can I do this?
CODE:
<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span><span style="color: #ffffff;
font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
</td>
NOTE: I can't use margins or padding in email templates.
Margin is not supported in all email clients. I've also had some slight inconsistencies in padding in the past, although it does work.
Might seem like a hack (but isn't html for email that anyway?) - safest way in email is to use multiple together like so: .
I'd also use <font> tags instead of <span>, they are more consistent.
is padding what you are looking for?
span{
padding-left: 15px;
}
Try this CSS:
span{
margin-right: 10px;
}
Here is Demo: http://jsfiddle.net/84qyG/
Consider doing this:
<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span> <span style="color: #ffffff;
font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
</td>
Notice the subtle & nbsp; between the spans.
Not sure why you can't use margins though. Also, is there a reason you're using td? I'm guessing it's part of a table?
I believe what you are actually looking for is
display: block;
Ex. http://jsfiddle.net/kshreve/5jNGu/
Another way you could do this is to add <br/> after the closing spans.
Edit: You should also look into adding CSS classes to reduce the amount of redundant styling
Consider inserting an empty div in between the 2 span tags?
.spacer {
display: inline-block;
width: 10px;
}
Either using multiple non-break-space characters or spacer image can solve your problem.
<span style="">text #1</span><img src="images/spacer.gif" alt="" border="0" width="10" height="1" /><span style="">text #2</span>
You could use padding or margin:
http://jsfiddle.net/tpXF4/
<td width="659" height="28" bgcolor="#999999" align="center">
<span style="color: #ffffff;font-family: Arial, sans-serif;font-size:20px;padding-right:30px;">
CODE:</span> <span style="color: #ffffff;font-family: Arial, sans-serif;
font-size:20px;font-weight:bold;">BEHAPPY</span><span style="color: #ffffff;
font-family: Arial, sans-serif;font-size:20px;">• Ends 6/01</span>
</td>
If you are using jsx/React you can use back ticks:
<span>{` My text...`}</span>
Just add a whitespace to start your text (or end your text)

Why does my HTML signature appear correctly in Thunderbird, but incorrectly in Outlook?

I've written some small HTML code to use as a signature in Thunderbird. The display is perfect and works without error for emails received by Thunderbird. However when an email from me is received in Outlook, color information is missing.
Here is my HTML code (with names and identifying information replaced)
<html>
<div class="Section1">
<p><b><span style="font-size: 10pt;
font-family:Arial,sans-serif; color: rgb(35, 53,
64);padding-left: 10px;">
<!-- NAME -->
First </span>
<span style="font-size: 10pt;
font-family:Arial,sans-serif; color: rgb(223, 93,
39);"> Last <br>
</span></b>
<span style="font-size: 9pt; font-family:
Arial,sans-serif; color: rgb(35, 53, 64);padding-left:
10px;">
<!-- Job Title -->
Mobile App Developer
<br>
</span>
<!--COMPANY NAME--> <b><span style="font-size: 11pt;
font-family: Arial,sans-serif; color: rgb(223, 93,
39);padding-left: 10px;">Company</span></b><b><span
style="font-size: 11pt; font-family: Arial,sans-serif;
color: rgb(35, 53, 64);">Name ®</span></b></p>
<p>
</span> <span style="font-size: 9pt; font-family:
Arial,sans-serif; color: rgb(35, 53, 64);padding-left:
10px;"><a class="moz-txt-link-abbreviated"
href="mailto:email#email.com" style="color: rgb(35,
53, 64);text-decoration:none;">
<!--EMAIL ADDRESS--> email#email.com</a></span> | <span
style="font-size: 9pt; font-family: Arial,sans-serif; color:
rgb(223, 93, 39);">My.Name Skype</span><br>
<b><span style="font-size: 10pt; font-family:
Arial,sans-serif; color: rgb(35, 53, 64);padding-left:
10px;"><a class="moz-txt-link-abbreviated"
href="http://www.google.com" style="color: rgb(35, 53,
64); text-decoration:none;">
<!--WEBSITE URL--> www.google.com</a></span></b></p>
</div>
</body>
</html>
Outlook:
Thunderbird:
I'm not sure what the issue is as I have very little experience with HTML. I took most of this code from someone else's signature block.
Try using the hexadecimal code instead of rgb(r, g, b).
For example, replace rgb(35, 53, 64) occurences with #233540.
You can use http://www.javascripter.net/faq/rgbtohex.htm to figure out the hex code.