Firefox H1 text is Red, Black in I.E. Help please!

sindee75 · #1 (**permalink**) 10-13-2008, 01:59 PM

Hello, this has been driving me nuts for 6 months and I cannot find an answer on the internet. I have tried so many fixes I could find that did not work. Please help!
Several pages on my website that have an H1 tag display black text like it should in I.E. 6 or 7.
I have the newest version of Firefox and it display red text. One of several answers says to add the Doc Type and it should fix the issue. However, when I add the doc type, yahoo site builder takes it away when I go to publish the results. Is this the only reason and fix for my problem???
Take a look at http://www.selfdefenseproductsflorida.com for an example of one page doing this in red in firefox and black in I.E.
Thanks for any help...

**wige** · #2 (**permalink**) 10-13-2008, 03:17 PM

The source code for that page is rather hard to follow, but Firebug shows that somewhere Firefox is seeing a <font color="red"> tag being applied to the h1 element. I could not, however, determine where that line is located.

sindee75 · #3 (**permalink**) 10-13-2008, 03:39 PM

Thanks Wige, Hopefully someone can help us figure this one out.....Anyone???...Cindy

dharrison · #4 (**permalink**) 10-13-2008, 06:10 PM

Hi sindee

I'm not much in the know with Yahoo Site Builder, so please excuse my ignorance.

I have taken a peek at your source code and I did notice

Quote:

h1
{
font-weight:bold;
color:#000000;
font-size: 18px;
}

Is situated just before the H1 tag in the body text. Can you not add it to the head tag in the main stylesheet?

I wouldn't say the Doctype would cause that one issue. The only problem I find with excluding a DOCTYPE is that HTML validators refuse to validate it. By the way, I hope the doctype you're referring to is transitional and not strict (the codes a bit of a mare to read!).

Keimos · #5 (**permalink**) 10-13-2008, 09:30 PM

Hi Sindee,

Too many conflicts, I would suggest do a w3w check!

<style type="text/css"></style>
<meta name="robots" content="index,follow">

</head>
<body bgcolor="#FFCC99" text="#000000" link="#0000FF" vlink="#800080" topmargin="0" leftmargin="0">
Your style header and body header conflict with each other. Either stick to inline, on the page or put all your style as external. On page overides external. IE tends towards strict, whilst IE still interprets, hence the difference.

Take care
Keimos

dyahnne · #6 (**permalink**) 10-14-2008, 02:06 AM

I visited your website and I'm really not sure why your h1 font tags are displaying as red in Firefox instead of black. I'm not familiar with Yahoo Site Builder and not sure if it's displaying your CSS coding correctly. I'm using IE 6 browser, which displays the h1 text color as black.

The h1 style tag may work if it is embedded between the head tags, ex. <head><style></style></head>, or it's probably inheriting the red text value from some content near it, including an active or visited link, or maybe another h1 tag is defined in some other external Style sheet used by Site Builder. Nevertheless, below are some options you can try in order to fix the problem.

First, try changing the color value to one of the 3 options shown below.
{color: black;}
{color: #000;}
{color: rgb(0,0,0);}

Second, do not use the color property at all, maybe it will default to black.

Third, try moving the following h1 tag style code from the body of your page to the top of your page; adding it to the existing style sheet shown between your header tags. See following example. Note. try #000000; or black; CSS color values.

h1 {
font-weight:bold;
color: black;
font-size: 18px;
}

Also don't forget to delete the following code from the body of your page.

<style>
h1 {
font-weight:bold;
color: black;
font-size: 18px;
}
</style>

Fourth and final option, use an inline style to define your h1 tags. This only controls the style for one element. You would have to do this for each occurrence of the h1 tag. Obviously, this is a lot of work you want to avoid. Inline CSS has the highest priority out of external, internal, and inline CSS. See example below.

<h1 style="font-weight:bold; font-size: 18px; color: black;">Buy Taser, Stun Guns, Pepper Spray. Purchase Mace, Personal Alarms, Home Security Products, And Animal Repellents. Check Out Our Sale!</h1>

Two puzzling things I noticed:

I also noticed that you didn't define the color for the active link (which defaults to red) within your body tag as you did for a link and visited link. And why is the style tag between your header tags enclosed in comments (<--- --->). Some syntax Firefox doesn't support.

I hope this helps...

cbosleeds · #7 (**permalink**) 10-14-2008, 03:29 AM

The quickest way for you to fix this, as suggested above is probably to add style internally to the h1 tag. Its a kludge but it will fix any inheritance issues if you're struggling with troubleshooting the CSS.

Use a global editing facility so you only have to do it once. Dreamweaver allows you to do this, or you could get a text editor which allows you to make global changes such as NoteTab Standard (license costs £5)

the code you would want would be something like:

<h1 style="color: #000;">some text</h1>

sindee75 · #8 (**permalink**) 10-14-2008, 03:06 PM

Thank you for everyones help. unfotunately, I cannot do anything with a css stylesheet with yahoo sitebuilder. basically, with sitebuilder, you use templates..I used an html template and put the H1 tag in there and just pasted it on the page where I wanted it. It looks centered in IE and color black like it should in IE, firefox off centers it and makes it red. I did try to add the different color values and it does nothing.

What is there now is this:
h1
{
font-weight:bold;
color:#000000;
font-size: 18px;
}
</style>
<h1>Buy Taser, Stun Guns, Pepper Spray. Purchase Mace, Personal Alarms, Home Security Products, And Animal Repellents. Check Out Our Sale!</h1>

Cbosleeds suggested to do this : <h1 style="color: #000;">some text</h1>
Isn't this the same as to what I have already??

Any other suggestions??? I did ask yahoo support and they are stumped...Thanks Everyone!

RosieD · #9 (**permalink**) 10-14-2008, 03:51 PM

The problem is that FF will render code as it truly is, and that means that any code tags that haven't been closed will be shown. IE is more forgiving and won't necessarily show your errors. So my guess is that you have an open red colour tag somewhere-I'd work on searching for that.

ran_dizolph · #10 (**permalink**) 10-14-2008, 04:58 PM

Quote:

I did ask yahoo support and they are stumped

This is precisely the problem with template-style/WYSIWYG sites, IMHO. 300 Validation errors? Even the people that sell the bloody things can't fix 'em, and that just doesn't sit right.

sindee75 · #11 (**permalink**) 10-14-2008, 11:32 PM

Quote:

Originally Posted by RosieD

The problem is that FF will render code as it truly is, and that means that any code tags that haven't been closed will be shown. IE is more forgiving and won't necessarily show your errors. So my guess is that you have an open red colour tag somewhere-I'd work on searching for that.

This is a toughie! I cannot find a red color tag..But, when I remove the H1 tag and just place text without the H1 tag, it is Black in Firefox. So, wouldn't it have to do with that H1 tag?

dyahnne · #12 (**permalink**) 10-15-2008, 01:44 AM

sindee75, I think there is another h1 tag that has already been defined as red. You'll have to look for that tag. Unless you're okay with using normal text, you can also try using h2 or h3.

richard-s · #13 (**permalink**) 10-15-2008, 10:02 AM

WYSIWYG Sitebuilders are not good at applying multiple changes: So, it is often better to start again with a new page.

The "web developer" extension for Firefox shows that there are lots of problems with this page. See the HTML validation report on:

[Invalid] Markup Validation of http://www.selfdefenseproductsflorida.com/ - W3C Markup Validator

As others have said, web browsers do try to make sense even of faulty pages, but can become overwhelmed by errors.

I'm surprised that the sitebuilder didn't insert a "doctype."

Richard

sindee75 · #14 (**permalink**) 10-16-2008, 12:19 PM

Thank you to everyone who has posted and tried to help. Now, I am just tring to figure out if there is a print button in this thread so I can print out all replies to ty all suggestions

Cindy

RosieD · #15 (**permalink**) 10-16-2008, 07:57 PM

Do you have access to the code itself? If you use a browser like firefox you can find it by the drop down VIEW, then page source. Put it in an editor such as edit plus, and then search for the term RED.

sindee75 · #16 (**permalink**) 10-17-2008, 08:38 AM

Hello all,
I wish I could award someone with the problem solving answer

I have tried all suggestions and the font is still red in firefox and text off alignment.
I also tried searching the source code for a red h1 tag and cannot find one as suggested.
I guess I will continue to lose sales from people using Firefox because the pages with the H1
tags look bad..Or, I'll have to remove the H1 completely. Sure don't want to have to remove
it......I guess I'll leave this open for a while in hopes of finding an answer....Thanks everyone!!!
Cindy

sindee75 · #17 (**permalink**) 10-17-2008, 08:43 AM

Quote:

Originally Posted by RosieD

Do you have access to the code itself? If you use a browser like firefox you can find it by the drop down VIEW, then page source. Put it in an editor such as edit plus, and then search for the term RED.

I have searched the source page and there is no h1 tag with 'red' in it. This is baffling! Thanks for suggestion...
Cindy

sindee75 · #18 (**permalink**) 10-17-2008, 02:38 PM

Several of you that mentioned the red text...Thank you!
I found the problem! I just don't know how to fix it!

<tr>
<td>
<font color="red"><b>Sale!<font face=arial><b>

THIS IS CAUSING THE PROBLEM! What is wrong with the code above? Is there an ending tag or something missing????

I can't believe the problem is almost solved! Thank you all. After 6 months of pulling my short hair out! I just love you guys!

richard-s · #19 (**permalink**) 10-17-2008, 05:08 PM

Actually, the page contains:

Code:

<font color="red"><b>Sale!<font face=arial></font><b>

(See: http://www.webproworld.com/newreply....ote=1&p=399082 )

There are various problems here:

* The tags aren't "nested" properly - not closed in the correct order;
* The "font face" is redundant because it's closed immediately;
* The "font color" is not closed;
* The second "b" should be "/b"

So, what you probably intended:

Code:

<font color="red" face="arial"><b>Sale!</b></font>

Notice how each "opening" tag is matched with a "closing" tag; also notice the correct order for "closing" the tags.

The W3Schools website has a handy area for experimenting with the various tags.
http://www.w3schools.com/

Richard

sindee75 · #20 (**permalink**) 10-17-2008, 08:15 PM

Thank you so much! I did finally realize that I did not have the closing tag of </font> and fixed that!
Now, I realize from the previous post that I am missing the </br> tag

I really want to thank everyone from the bottom of my heart for helping me to find this solution after all these months! Even Yahoo support could not figure it out!

Thank You!!!!!!!!!!!!!

P.S. If you want a free-bee or a discount on our products, let me know you helped me on here. I want to show my appreciation!

richard-s · #21 (**permalink**) 10-18-2008, 06:47 AM

Quote:

Originally Posted by sindee75

Thank you so much! I did finally realize that I did not have the closing tag of </font> and fixed that! Now, I realize from the previous post that I am missing the </br> tag

I'm glad that you've now solved the problem, and thanks for posting the result.

The missing tag was "</b>" to end the bold text; rather than "<br>" which inserts a "break" (that is a new line).

ps. Thanks for your kind offer but our government no longer trusts us even to have an innocent pen-knife - far less a Taser.

dyahnne · #22 (**permalink**) 10-20-2008, 07:27 PM

WOW! It's great to come back from the weekend and find out that the 'elusive red text' has been found. We were all glad to help out. I know this is a big relief for you now. I wish you much success in your business!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
White text, black page... Problem or not?	almer	Google Discussion Forum	32	08-20-2005 03:26 PM
Firefox text size increases	ozchris	Accessibility and Usability Forum	6	07-29-2005 01:49 AM
Black background with white text. Any chance of a penalty?	Aldo	Google Discussion Forum	18	07-19-2005 04:35 AM
White Text and Black Page	jacobwissler	Google Discussion Forum	5	04-05-2005 04:36 AM
Centering Left-Justified Text on the Page in Firefox	beelzebob	Graphics & Design Discussion Forum	1	03-05-2005 11:35 AM