CSS on Firefox for dummies... please.

Hello! I'm kinda new in this business, so go easy on me... please. ^^;

I have a site based on DIV layers and CSS and, as u guessed, it doesn't show like it should on Firefox. How do I fix this?

Here is a link to the style sheet: http://www.duoxheero.com/style.css

And here is one of the pages: http://www.duoxheero.com/main.html

I'd appreciate any kind of help... anything to make Firfox display my site.

Thank u,

Naomi.

Firefox (and Netscape too, both mozilla) are not as forgiving of poorly written code as IE is. One thing I notice is the unnecessary use of tables to structure the page's layout. Tables are good for tabular data, and for years many people used them for layout. But with CSS they can be largely avoided. For example the page has several sections like this

NOTE* the missing end td tags
These could be simply written as

and would look the same after applying and table related css styles to the p-s ie. change
to

Try these changes and see if it helps.

Thank u so much. Heh. I did say I was new in this business so I didn't expect the code to be perfect.
In any case, I don't think that the tables are the problem because the CSS doesn't apply to anything, not the background (which is essential to the desgin) or the text properties. Is there a way to fix that? Especially the background? The repeat property doesn't seem to work on Firefox.
I appreciate the help!
Naomi.

The 'code' is not that bad ... have seen much worse

First thing I noticed is:

Always use quotes where needed, must be something like:

But to answer your question:
When you have a external style sheet, do not use <style type="text/css"> and </style>. Since you made a link to it, and specified that it is a style sheet, FireFox tries to parse this and fails.
You could leave the <!-- and --> in.

" .. seen worse .. " My God yes, I've seen some so bad it would make you want to run away. And that on "professional" pages too!
Your code has errors, but believe me, you're not off to a bad start.
MichaelSoft has made some valid observations.
Anyway, I did some more scrutinizing and here's what I came up with:

In the #image div you use absolute size values. This works because you know the size of the sliced images.

Try this: test by temporarily adding this line to the end of the #nav and #content divs style's:
style="background-color: #0f0; border: 3px #f00 solid;"

Take a look with IE and Firefox.

Then test by temporarily changing - overflow: visible to overflow: scroll

Take a look with IE and Firefox.

It seems the IE and Firefox differ in the order in which they render page elements.

You should now be able to correct the page's rendering so that it will at least display as desired in the IE, NS, Opera and FF browsers with Windows.

Perhaps you do not have a business site where quality is crucial, but please do your users a favor and correct the poor coding that I previously mentioned, There are other operating systems and many browsers. Just because the site looks good in the browsers you test with is not a guarantee that it will look good to everyone else.

Thank u so much for all of your help. I will do my best. ^-^

I've only recently taught myself CSS and I'm still learning, I guess. Perhaps I was too hasty by redesigning my site with something I have not yet mastered.

In any case I made the changes you've offered and tested it on Firefox. It looks fine to me, better than before that it. I'll keep learning, of course.

Thank u so much!

Naomi.