Link to home
Start Free TrialLog in
Avatar of Paul Konstanski
Paul KonstanskiFlag for United States of America

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:
 <h1><sienna>This turns to Sienna</sienna></h1>

Open in new window


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?
Avatar of Peter Hart
Peter Hart
Flag of United Kingdom of Great Britain and Northern Ireland image

the usually way of doing it that works on all browsers is:

define

.sienna {  color: sienna;   }

then use it so...

 <h1 class="sienna">This turns prints in sienna</h1>
Avatar of Norman9
Norman9

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.
SOLUTION
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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!
yeah
sorry
Avatar of Paul Konstanski

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 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!!

Additionally, if you use a WYSIWYG editor, you get this:
Within my sentence, <font color="#c0504d">the phrase is red</font>
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 ;)

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.