Why does the following html snippet:
<html>
<head>
<title>Test</title>
</head>
<body>
Some Text<br />
<font color="rgb(0,0,0)">More Text</font><br />
<span style="color: rgb(255, 0, 0);">
<font color="rgb(0,0,0)">And the last of the text!</font>
</span>
</body>
</html>
Result in the output in the picture at the link (notice the red colouring!):
This seems to happen in Chrome and Firefox and even in Outlook (in HTML emails) but the text shows as black in IE 11.
It's not necessarily something I need to or can fix but that sort of styling is something given by a third party component and it's led me to wonder why this gives the result it does. I can't find any suggestions anywhere on the web on why this would be red(ish) rather than black.
I want to understand it more than anything.
The HTML color attribute (which was superseded over two decades ago) doesn't accept CSS color values. It only accepts HTML color values.
rgb(0,0,0) is a CSS color value. It is not an HTML color value.
Error recovery will cause it to either be ignored (in which case the parent element's colour will be inherited) or treated as a different colour.
Some browsers render <font color="rgb(0,0,0)"> in red because they interpret "rgb(0,0,0)" - which isn't a valid color value according to the deprecated spec - as hex color string #b00000:
<font color="rgb(0,0,0)">This color</font>
equals
<font color="#b00000">this color</font>
See Why does HTML think “chucknorris” is a color? for an explanation. Thanks to #j08691 for pointing this out in the comments above.
Related
is there a way to change the TextSize and Textcolor directly in the HTML Document?
It must be this kind of box (same class) because I need the backroundcolor.
Unfortunately it always has the same textsize.
This is the html line:
Welcher Button reagiert schneller?
Picture of HTML element
I know it is probably a very easy solution but I just can't find the solution.
You can not set a font-size via HTML, you can however use CSS inside a HTML document to edit any property like so:
Inside the head > style element (then however it is recommended to use classes [like I did] or ids).
<head>
<style>
.box {
font-size: 32px;
}
</style>
</head>
<body>
<div class="box">
<!-- content -->
</div>
</body>
Or directly inside the specific element's first tag, by adding a style="" attribute.
<div style="font-size: 32px;">
<!-- content -->
</div>
In this example I used a div you can really do this on any element and set the font-size to 32px you can choose any number and even different units.
Simplicius has a good response.
The closest you can get to what you’re asking for (as your question was originally worded) would be something no longer supported in html5
It still works but use at your own risk.
<font size=2 color=red face=Arial>
your text
</font>
EDIT: I should mention that the layout was done with tables. I've even tried styling the parent <td> element to get the desired appearance. Still, no bananas.
How do you change the font color of text in an HTML email in AOL's client?
I've tried the following code:
<td>
<span style="color:#FFFFFF;">My Text</span>
</td>
After some suggestions from the community, I've also tried the following approach:
<td>
<font color="white">My Text</font>
</td>
Unfortunately, the text color doesn't change at all. In fact, when viewing the computed styles in Firebug, it doesn't show any color being applied to the element.
I'd expect this to work since all other inline styles work fine and the email is rendered beautifully in every other major client.
Thanks in advance for your help.
Try using the <font> tag. This site doesn't list <span> as a supported tag.
<font color='#FFFFFF'>My Text</font>
font tag is one option, but if possible in your layout, you might want to break out the text into a td and call something like <td style="color:#FFFFFF;">My Text</td>
AOL provides a format icon. Click on that and use the eyedropper on the Format Banner to select color for your text.
try <td><span style="color:#990011;">Text</span></td> (eg. uses some shade of red to stand out)
<a style="text-decoration: none;" href="{$shareWithFriendsLink}">
<span style="text-decoration: none; color: #ffffff;">
htt<span></span>{$shareWithFriendsLink|substr:3} </span></a>
Empty <span></span> prevent mail client for recognizing string as link.
|substr:3 are in use for Smartys variables for cut off first 3 symbols (htt) added before manually.
I have a background color of #efefef (greyish), color loads just fine in every browser.
Problem is that when I copy the whole file from the browser and paste it in an e-mail, then the background color changes to white.
How do I keep it the same color?
<body bgcolor="#efefef" link="#ff6633" alink="#ff6633" vlink="#ff6633">
Try
<div style="background-color:#EFEFEF">
<p>EMAIL TEXT</p>
</div>
in your email.
You can not use <body> tags in html email. All email clients will strip out any <body> <head> tags etc.
You need to rebuild the email using tables and use inline styles to style the elements.
HTML emails are notoriously difficult to code. The way you are trying to do it simply will not work i'm afraid.
Here is a brief introduction to coding html email: http://www.sitepoint.com/code-html-email-newsletters/
Yet another "IE is doing something different from other browsers" question but this is one is slightly unusual in that IE7 does the correct thing but IE 8 and 9 do not.
Here is the situation, I have a simple 3 column layout. The first 2 columns are fixed width and the third I want to be variable width so that it uses up the available space.
I am outputting textual data in the third column. The text data should be free to wrap at the end of a data value/sentence - so I output it as .
<span class="nowrap">foo bar</span>
<span class="nowrap">moo bahh</span>
(See the example below also)
everything works like a charm in FF, Chrome and IE7 but internet explorer 8 and 9 treat the consecutive nowrap spans as 1 big nowrap element (i.e. it puts all the values on one line). There is white space between the spans and so (IMO) it should be free to wrap.
The only way i can get IE8/9 to wrap as I want is to include some non-white space between the nowrapped spans.
This workaround is OK but I am curious to know:
Is IE rendering the markup correctly or incorrectly (i.e. is my expectation that the values should wrap incorrect. I only assume that IE is at fault because the other browsers do it differently)
Is there a more elegant solution that the one I have: In an ideal world, I would want to ensure that the separating comma never wrapped to the start of a new line.
Thanks in advance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server">
<style type="text/css">
.leftBit {float:left; margin-right: 10px; background-color: yellow;}
.middleBit {float:left; width:305px; margin-right: 10px; background-color: orange;}
.remainder {margin-left: 420px; min-width: 200px;background-color: #DDD;}
.nowrap { white-space:nowrap;}
.clear {clear: both;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">This value wraps - but I want to keep the values on the same line</div>
<div class="remainder">
<span>Blue the colour of the sea and the sky, </span>
<span>Green green green green of home, </span>
<span>Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">I don't know why these values do not wrap? They do in FF and chrome and IE7 but not IE8/9</div>
<div class="remainder">
<span class="nowrap">Blue the colour of the sea and the sky, </span>
<span class="nowrap">Green green green green of home, </span>
<span class="nowrap">Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">Here is my "work around" - I have to include some non-whiite space between the "nowrap" elements. Is this a bug or expected behaviour?</div>
<div class="remainder">
<span class="nowrap">Blue the colour of the sea and the sky </span> ,
<span class="nowrap">Green green green green of home </span> ,
<span class="nowrap">Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<hr />
</form>
</body>
</html>
Determining word breaks isn't preformed the same in different browsers or between different specifications. I believe Firefox is the only latest release that will format the way you are expecting. There are certain length situations where Chrome will also break out of the parent box.
As such, manual hints need to be provided in the HTML to get consistent output.
In the specific example, a way to get around this is to use the unicode character for Zero Width Space. This will break apart your code without introducing additional space.
<span class="nowrap">foo bar</span>
<span class="nowrap">moo bahh</span>
If for some reason you can't use the unicode code, you might want to try the html entity which is a thin space. It will, however, introduce some additional space into your html output.
Although this seems like an issue where there should be consistency between the browsers, http://www.cs.tut.fi/~jkorpela/html/nobr.html quotes several technical documents and their differences between how words should be broken, in addition to the differing browser interpretations of those documents. I'm guessing each browsers overall strategy plays a part in this specific example.
Except for preformatted elements - -, each block structuring element is regarded as a paragraph by taking the data characters in its content and the content of its descendant elements, concatenating them, and splitting the result into words, separated by space, tab, or record end characters (and perhaps hyphen characters). The sequence of words is typeset as a paragraph by breaking it into lines.
Source: HTML 2.0, section Characters, Words, and Paragraphs
In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur.
Source: HTML 4.0, section Hyphenation
see Unicode Technical Report #14: Line Breaking Properties (technicality alert!), which seems to allow a "direct break" between an alphanumeric character and an opening parenthesis, for example. This is hardly a good idea in general, though. It would even allow very dishono(u)rable breaks!
Thanks to #nosilleg's answer I made a great solution using CSS only.
Given that you're already using classes this is easy, add this;
.nowrap:before {
content : '\200B';
}
What this does is inserts the Zero Width Space character just before each of your nowrap elements, without you editing the HTML!
Now you wont have to remember to add in that pesky HTML entity every time you use your nowrap class.
Worked in IE8 and 9 and didn't affect the other browsers.
I hope IE9/any can be rendered as IE8/any by adding below line of meta in the head of html
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
then it works as in the fashion we liked to
I have tried and isolated the problem below after spending hours on this. First link is not underlined on hover in FF but works in all the other browsers I have tried. The second link properly works in Firefox too. Most of the existing html on the site is structured in the below way so a site wide fix will be appreciated.
HTML: (pasting as code here removes tags) http://pastebin.com/duqfKGeY
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
FF test
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="ff.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table>
<tbody>
<tr>
<td>
<ul type="disc">
<li>
<a target="_blank" href="http://example1.com">
<font size="2" color="#b80000"><b>Example Link 1</b></font></a>
<br>
<font size="2" face="Verdana">
example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text
<a target="_blank" href="http://example2.com/">
<font size="2" face="Verdana" color="#b80000">Example link 2</font>
</a>
example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text .
</font>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS:
a{color:#b80000;}
a:link{color:#b80000;text-decoration:none;}
a:visited{color:#b80000;text-decoration:none;}
a:hover{color:#b80000;text-decoration:underline;}
a:active{color:#b80000;}
Edit: Validates without any errors on W3C Validator
The <B> tag is overriding the text-decoration. Just add this:
a:hover b{text-decoration:underline;}
If there are others you could probably even do:
a:hover > *{text-decoration:underline;}
This is all a bit over kill I would just use:
a{text-decoration:none;}
a:hover{text-decoration:underline;}
There should be no reason why this doesn't work.
Okay first things first,
Tables for layout - educate yourself please:
http://shouldiusetablesforlayout.com
http://www.hotdesign.com/seybold/
http://webdesign.about.com/od/layout/a/aa111102a.htm
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
<font> tags were deprecated LONG ago, we now use CSS and <span> tags for all our styling needs.
The most likely reason why stuff doesn't work is because your HTML is basically completely wrong, yes it works but it is killing the interwebz - Here is your layout redone with <div> tags and CSS - nice and clean and everyone is happy:
Live Demo
Also - validation - It is just a tool, not a standard to aspire to, sure it helps fish out bugs but it could end up causing you hassle trying to be 100% compliant (Stares at XHTML Strict) more on that here:
http://net.tutsplus.com/articles/general/but-it-doesnt-validate/
I see the :hover underline on both links in FF 3.6/Mac, even when they are visited links.
As Alex Thomas pointed out, your CSS can be more concise--consider that all the link states are the same color, and only the :hover state differs by having an underline.
Even though the crummy HTML from Google Docs has the color stated on those font tags (retro, eh?), duplicate the color rule in your CSS so the :hover underline appears in the correct color:
a {
color: #b80000;
text-decoration:none;
}
a:hover{ text-decoration:underline;}
The problem may be with the text-decoration: underline; CSS statement. Firefox ignores this in version 3.6. I know by version 7.0 it works just fine, but I don't know when it was actually fixed.
What version of Firefox are you working with?