Perfect In Ie, But Errors In Firefox

[antandsons]

My site www.antandsons.com is perfect in IE, but firefox shows some slight errors where the links override some of the text.

[Mitch]

Well I checked your CSS code, and it seems like you are pulling up some errors in there. That might be a good place to start hunting for a solution to the problem. You can see it for yourself here:

 

Validate Your CSS File

 

Hope that helps!

[dkotchen]

antandsons,

 

For some reason, you set the height of the paragraphs in your left and right columns to 17px (take a look at your style sheet). This is the immediate cause of your problem.

 

When you use the <center> tag in Firefox, Firefox treats the text enclosed in the <center>...</center> tags as a new block-level element (the <center> tag is equivalent to <div align="center">). This new block-level element forces a paragraph break, and then Firefox places this new element just below the paragraph. But since the height of the paragraph is only 17px, the centered block-level element is placed 17px from the top of the paragraph (which is very close!), putting it right on top of some of the text of your paragraph. To make this visually clear, you can place a border around the paragraph: <p style="border: solid black 1px">. Notice that since the text of your paragraph requires more space than 17px, it blows right through the bottom of its container.

 

A quick fix would be to replace your <center>...</center> tags with <span style="text-align: center">...</span>. Because they create an in-line element instead of a block-level element, the span tags will not force a paragraph break. The text between the span tags will remain a part of the paragraph. But you should really get rid of the statement in your style sheet that sets the height of the paragraph to 17px.

 

By the way, the center tag was deprecated in HTML 4.01. In your document type declaration, you have declared HTML 4.01 strict. However, because you are using deprecated tags, your page will not validate as strict.

 

If you want some insight into the details of how Firefox treats the <center> element, try this: http://www.markschenk.com/various/center-element.html. In general, you're probably better off avoiding the <center> element altogether.

 

Hope this helps.

Edited September 6, 2005 by dkotchen

[Mitch]

Very nice call dkotchen!