• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 685
  • Last Modified:

FireFox 3.0 Text Color Defaults to White

I have web pages that display fine in IE 6.0 & 7.0, and FF 2.0, but in FF 3.0 I am getting white text - it's there but you can't see it.  I have to go into each web page, and insert a <font color="#000000"> and </font> within each <td> block in order to get it to display properly.  Try it yourself with www.susanbrefach.com.  Index.htm displays fine in IE and FF 2.0 but not 3.0.

Web pages created with FrontPage 2003.

There has to be some way to avoid tediously changing every single web page.
0
donestes
Asked:
donestes
  • 5
  • 4
  • 3
1 Solution
 
David S.Commented:
Firefox is simply doing what you told it to do. You set the text color to transparent:

TABLE {
table-border-color-light:#C0C0C0;
table-border-color-dark:#003366;
border-color:#003366;
color:transparent;
}


This is a bit old, but much of what it says is relevant -- What's wrong with the FONT element? (http://www.mcsr.olemiss.edu/~mudws/font.html)

P.S. Are you aware that your page contains XHTML and CSS errors?
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
0
 
donestesAuthor Commented:
Are you saying that IE and FF 2.0 ignore this TABLE attribute and that FF 3.0 is correct in the way that it processes it?  You did not directly address the fact that FF 3.0 displays differently from IE and prior releases of FF.

I found the TABLE declaration you referred to in the referenced css file.  I have never looked into a css file before.  Although I am an old programmer, I know enough HTML to barely be dangerous and nothing at all about css and XHTML. For this application, I'm just a dumb FrontPage user.

What is the resolution? Go into the css file and remove the "transparent" declaration? Is this change compatible with IE and FF < 3.0? Is there a way to do it in FP?

Thanks!
0
 
David S.Commented:
True, I didn't address why FF3 was displaying it differently from slightly older browsers. How FF3 is displaying makes sense. Also I happen to know that many browsers don't support the "transparent" value on the color property. (Technically "transparent" isn't a valid value for the color property anyway, so I'm surprised that FF3 and Safari 3 now support it.)

I avoid all WYSIWG editors, especially FP, so I can't advise you as to any special CSS handling features FP might have. It's really easy to just delete the one line in a text editor, however.
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
brundoCommented:
I agree with all all the things Kravimir wrote, especially a short P.S. about validator.

Donestes, if you think Firefox displays the page in a wrong way, you can try with Google Chrome (www.google.com/chrome), or go to someone who has a Mac and try it with Safari.

Now I'll try to be more constructive :-))

In your table definition in the file _themes/sumipntg/sumi1011.css:

TABLE {
  table-border-color-light:#C0C0C0;
  table-border-color-dark:#003366;
  border-color:#003366;
  color:transparent;
}

replace color with background-color.

I cannot find out why someone wants font color to be transparent....
0
 
donestesAuthor Commented:
Also, I went into the css file and deleted the transparent attribute. It made no difference in the way that it displays
0
 
brundoCommented:
On the attached picture you can see what I've changed and the result in Firefox.

You have another problem(s) in your stylesheet. E.g. table definition is on the lines 111 and 221; h1 on lines 79 and 162 etc. It is very hard to debug the style sheet when definitions are so scattered through the file... So, maybe you've deleted another color:transparent...

-background-color.png
0
 
David S.Commented:
The thing is that you did fixed it. It just doesn't appear that way because the old version of the stylesheet is still cached by your browser(s).

Read up on how to clear the cache: http://www.google.com/search?q=clear+browser+cache
0
 
David S.Commented:
I meant "did fix", not "did fixed". ...what one gets when one edits on the fly without rereading to make sure it still makes sense.
0
 
donestesAuthor Commented:
brundo - thank you very much.  This has certainly fixed my problem, and I am propagating the solution to the other web sites that I support that will certainly have the same problem.

In the image you posted, you will note that the heading appears to the right of the photo but the following text slides below.  If you display the same with IE or FF2, you will see the text appear below the heading and then wrap around the photo.  I assume that this is a similar problem with css.  

I find all aspects of web design/programming to be extremely frustrating.  I have no other recourse for dealing with this new problem other than posting it.  I do not consider this to be a professionally comfortable state of affairs.

I appreciate what Kravimir said about avoiding WYSIWYG editors.  There appears to be an impedance mis-match between a visual editor and an HTML display.  However, for the 3 simple web sites that I support, doing a deeper dive appear to me to be unwarranted - at least until stuff like this appears that makes me want to run amok. I would be happy to move beyond products like FP if I had a reasonable alternative.

I started out with mainframe assembler programming (dating myself here) and graduated to a variety of higher level languages, and in all cases I learned the languages top down with a complete explanation of the theory of the language, its structure, and its syntax.  

By contrast, web design (HTML, css, XML/XSL, XHTML, DHTML ... ad nauseum) appears to be a bottom up approach in which all explanations that I've found presume that you already understand the theory or already know so much that basics don't need to be explained. Or alternatively, they want to teach me without explaining the theory, so that I am presented with a grab-bag of do-this, do-this2, do-this3 ... without any unifying intellectual framework. Neither of these approaches provides me with an efficient method of achieving a reasonable mastery of the subject in a reasonable period of time.

My posted problem is solved, for which I am very appreciative.  I'll leave this question open for a couple of days in case you'd like to comment further about how I might best cure (or significantly reduce) my vast ignorance on this topic.
0
 
brundoCommented:
Hi,

i am glad that it works now. In the case of text which comes under the picture this is a consequence of defining width="100%" for table where problems are listed.

Now back to discussion you've started. I see three problems regarding web pages:
- "standards"defined by web browser manufacturers (not so bad as in the 90-ies, but still here)
- if something is written not according syntax, web browser displays what it wants
- web browsers don't follow all the standards.

The first problem is not a problem: you have to use on your page only standard elements and attributes. A good and simple source is W3Schools, http://www.w3schools.com/. XHTML is the safest choice :-))

The second problem is not a problem, too. There is validator at http://validator.w3.org, which can help you to have valid code.

The third problem is a problem... especially when you know that many users use old browsers (IE6, e.g.)... :-(( But, if you look at questions on EE in CSS zone, others have similar problems, too. And experts have answers :-))

How to work? You can continue to work in FrontPage... but more with code or split view then design (there are other advantages of FrontPage aside from design view).

Excellent tools for debugging web pages are Web Developer Toolbar for Firefox (see my screenshot, I've changed your stylesheet "on the fly") and IE Developer Toolbar for IE7. Google Chrome has similar tool integrated in the browser.

And, at the end, some words about learning... Now it is important to learn principles, the logic of the language you use, and not to learn everything. With the knowledge of logic of the new language you use, you'll easy find what you need (in the beginning on the W3Schools, later on www.w3.org).

I understand the feeling "I know everything in my language" (I am from the FORTRAN generation, close to yours...), but with huge libraries of objects and functions the world of programming has been changed. With web design is the similar story. It is not so bad - just take some time for making your "big picture" of (X)HTML+CSS...
0
 
donestesAuthor Commented:
Thank you very much.  Extremely helpful.

I did discover one important factoid - the 3 sites with problems were all originally created with FP 2000, then upgraded to 2003.  2 other sites created with FP 2003 do not have the problem in the css file.

Best regards,

Don
0
 
David S.Commented:
The thing about (client-side) web developement is that it's not just programming, there are other more artistic aspects to it and it helps to have very good creative problem solving skills.

Opera also has developer tools: http://dev.opera.com/articles/view/introduction-to-opera-dragonfly/

Here are some good learning resources:
http://www.sitepoint.com/article/html-css-beginners-guide
http://www.htmldog.com/guides/
http://www.sitepoint.com/article/html-37-steps-perfect-markup/
http://www.cssbasics.com/
http://reference.sitepoint.com/
http://www.digital-web.com/types/web_design_101/
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now