Solved

FireFox 3.0 Text Color Defaults to White

Posted on 2008-10-23
12
663 Views
Last Modified: 2013-12-24
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
Comment
Question by:donestes
  • 5
  • 4
  • 3
12 Comments
 
LVL 42

Expert Comment

by:David S.
Comment Utility
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
 

Author Comment

by:donestes
Comment Utility
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
 
LVL 42

Expert Comment

by:David S.
Comment Utility
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
 
LVL 13

Expert Comment

by:brundo
Comment Utility
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
 

Author Comment

by:donestes
Comment Utility
Also, I went into the css file and deleted the transparent attribute. It made no difference in the way that it displays
0
 
LVL 13

Accepted Solution

by:
brundo earned 500 total points
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 42

Expert Comment

by:David S.
Comment Utility
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
 
LVL 42

Expert Comment

by:David S.
Comment Utility
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
 

Author Comment

by:donestes
Comment Utility
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
 
LVL 13

Expert Comment

by:brundo
Comment Utility
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
 

Author Comment

by:donestes
Comment Utility
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
 
LVL 42

Expert Comment

by:David S.
Comment Utility
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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

I recently found myself in a Corporate Situation where the client had requested blocking access to any and all websites except his own Domain? Easy? I am sure this would be your answer but their requirement was, this has to be done without using…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now