Paul Konstanski
asked on
< color > CSS Doesn't work in Internet Explorer
I did a bunch of work in Chrome and then loaded it in Internet Explorer and was disappointed to see a key thing did not work.
Pretty simple.
In my CSS I have this line
sienna { color: sienna; }
Then in my document I can put this:
What that does is takes that text and turns it to an h1 tag but also turns the color to Sienna.
It works great in Chrome, Safari, on the iPad, etc., but it doesn't work in Internet Explorer. IE just ignores the Sienna color. It does the H1 tag, but ignores the Sienna. I would assume I should do it as < div class="sienna"> with my style sheet as:
.sienna { color: sienna; }
Or is there a work around to get it to work in Internet Explorer? It sure is a convenient way to color code in a short cut.
What makes this kind of weird is that it doesn't happen all the time. Maybe I just need some hints about how to track down why this does and doesn't always work?
Pretty simple.
In my CSS I have this line
sienna { color: sienna; }
Then in my document I can put this:
<h1><sienna>This turns to Sienna</sienna></h1>
What that does is takes that text and turns it to an h1 tag but also turns the color to Sienna.
It works great in Chrome, Safari, on the iPad, etc., but it doesn't work in Internet Explorer. IE just ignores the Sienna color. It does the H1 tag, but ignores the Sienna. I would assume I should do it as < div class="sienna"> with my style sheet as:
.sienna { color: sienna; }
Or is there a work around to get it to work in Internet Explorer? It sure is a convenient way to color code in a short cut.
What makes this kind of weird is that it doesn't happen all the time. Maybe I just need some hints about how to track down why this does and doesn't always work?
the css usually uses class or id
for example
declare id:
<h1 id="sienna">This turns prints in sienna</h1>
for css
<style>
h1#sienna{
color: sienna;
}
</style>
for class
<h1 class="sienna">This turns prints in sienna</h1>
<style>
h1.sienna{
color: sienna;
}
</style>
for div
<div>
<h1>Title</h1>
<h1>Title1</h1>
<p>How do you hear with us?
</p>
</div>
if you like to add css style , for example blue Title and green for Title 1
<div class="nav">
<h1 class="pro">Title</h1>
<h1 class="pre">Title1</h1>
<p class="one">How do you hear with us?</p>
<p class="two">Another format</p>
</div>
the css like this
<style>
div.nav h1.pro
{
color: BLUE;
}
div.nav h1.pre
{
color: GREEN;
}
div.nav p.one
{
align: center;
}
div.navp.two
{
align:right;
}
</style>
You may add properties and attributes on that...like float, border and etc.
for example
declare id:
<h1 id="sienna">This turns prints in sienna</h1>
for css
<style>
h1#sienna{
color: sienna;
}
</style>
for class
<h1 class="sienna">This turns prints in sienna</h1>
<style>
h1.sienna{
color: sienna;
}
</style>
for div
<div>
<h1>Title</h1>
<h1>Title1</h1>
<p>How do you hear with us?
</p>
</div>
if you like to add css style , for example blue Title and green for Title 1
<div class="nav">
<h1 class="pro">Title</h1>
<h1 class="pre">Title1</h1>
<p class="one">How do you hear with us?</p>
<p class="two">Another format</p>
</div>
the css like this
<style>
div.nav h1.pro
{
color: BLUE;
}
div.nav h1.pre
{
color: GREEN;
}
div.nav p.one
{
align: center;
}
div.navp.two
{
align:right;
}
</style>
You may add properties and attributes on that...like float, border and etc.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Their are 3 common type of DOCTYPE, the strict , translational and Loose, when in html 5 it only <!DOCTYPE html5.0>
^ The HTML5 doctype look likes this:
<!DOCTYPE html>
It doesn't have the 5.0 in it!
<!DOCTYPE html>
It doesn't have the 5.0 in it!
yeah
sorry
sorry
ASKER
I appreciate all of the advice to stick with the "standard" way of doing things.
I'm in the middle of a project right now where I've taken a "creative" approach and it has not been well received by those who take a more "conservative" approach.
The question was asked "why do this" - because it's a lot easier. For example, compare these two ways of getting a word to change to my specially designed red color.
Traditional way:
Within my sentence, <div class="red">this phrase is red</div>.
Creative way:
Within my sentence, <red>this phrase is red</red>.
Additionally, if you use a WYSIWYG editor, you get this:
Within my sentence, <font color="#c0504d">the phrase is red</font>.
The main advantage I see for using my creative way is that you can have a consistent use of red. In my case the default "red" in HTML is a little too bright for my design, so I'm trying to use a consistent "toned down" version. So it isn't up to somebody picking the right one off the color wheel. (or having to always look up which version of red I used). It the same anywhere in the site.
Second, it just quicker to code. I only defined four colors and since their in my core stylesheet their always available.
The answer about the DOCTYPE above is what I was looking for. That helped answer my questions. For me, the benefit of having it work 98% of time for this project and with the consequences of it not working not being that bad, I'll probably take my chance and keep using this code. Who knows, maybe it will become the norm and I'm just ahead of the curve.
I'm in the middle of a project right now where I've taken a "creative" approach and it has not been well received by those who take a more "conservative" approach.
The question was asked "why do this" - because it's a lot easier. For example, compare these two ways of getting a word to change to my specially designed red color.
Traditional way:
Within my sentence, <div class="red">this phrase is red</div>.
Creative way:
Within my sentence, <red>this phrase is red</red>.
Additionally, if you use a WYSIWYG editor, you get this:
Within my sentence, <font color="#c0504d">the phrase is red</font>.
The main advantage I see for using my creative way is that you can have a consistent use of red. In my case the default "red" in HTML is a little too bright for my design, so I'm trying to use a consistent "toned down" version. So it isn't up to somebody picking the right one off the color wheel. (or having to always look up which version of red I used). It the same anywhere in the site.
Second, it just quicker to code. I only defined four colors and since their in my core stylesheet their always available.
The answer about the DOCTYPE above is what I was looking for. That helped answer my questions. For me, the benefit of having it work 98% of time for this project and with the consequences of it not working not being that bad, I'll probably take my chance and keep using this code. Who knows, maybe it will become the norm and I'm just ahead of the curve.
I understand the need for a creative approach, but that doesn't mean you should re-invent the wheel - a creative one might be square, but the traditional round one will work better - proven!
A piece of advice, don't use either of the following:
<red>This is highlighted</red>
<span class="red">This is hilighted</span>
It's a major PITA when, down the road, the brief changes to 'I'd rather have the hilites in blue'. You either find yourself hunting through potentially thousands of HTML files to change the class or tag, or you end up with CSS that looks like this:
.red { color:blue; }
Better to use a functionally descriptive class:
<span class="hilite">This is highlighted</span>
And the CSS:
.hilite { color: red; }
or
.hilite { color: blue; font-weight:bold; }
easy!!
What you ought to have is:
Within my sentence, <span class="hilite">the phrase is red</span>
and in your external CSS file:
.hilite { color: #c0504d; }
A piece of advice, don't use either of the following:
<red>This is highlighted</red>
<span class="red">This is hilighted</span>
It's a major PITA when, down the road, the brief changes to 'I'd rather have the hilites in blue'. You either find yourself hunting through potentially thousands of HTML files to change the class or tag, or you end up with CSS that looks like this:
.red { color:blue; }
Better to use a functionally descriptive class:
<span class="hilite">This is highlighted</span>
And the CSS:
.hilite { color: red; }
or
.hilite { color: blue; font-weight:bold; }
easy!!
Additionally, if you use a WYSIWYG editor, you get this:Change your editor - the font element and the color attribute are both deprecated in HTML4 and not supported at all in HTML5. Time to update me thinks ;)
Within my sentence, <font color="#c0504d">the phrase is red</font>
What you ought to have is:
Within my sentence, <span class="hilite">the phrase is red</span>
and in your external CSS file:
.hilite { color: #c0504d; }
@ChrisStanyon agreed.
define
.sienna { color: sienna; }
then use it so...
<h1 class="sienna">This turns prints in sienna</h1>