[ModaMultimedia]

Hey guys Im working on a site and Ive just got into css recently and i dont know what im doing wron and im in desperate need of help.

While Im developing my site I was testing in in !E7 and looks the way i want it but in firefox its all weird, and tried all sort of stuff to work it out myself but its obvious i need some help =( could someone please help me out and explain what im doing wrong and what i need to do to get it looking the same in firefox? thanks

ps. the files are attached

[resten]

I may be new at this but I believe that your problem are the margins. If I read right the margins are rendered differently in Firefox than in IE(in your case IE 7.0). So for firefox the margins would be different than in IE , and I would also use % instead of px. An example of a firefox margin would be margin-top: 6% !important; /* Firefox */ , Internet explorer would ignore the ! and therefore not display that as the margin.

[pgo]

Make sure your math is correct on column widths. Also, you don't seem to understand the concept of floats. Read this: Floatutorial: Step by step CSS float tutorial

One thing you need to do is float #center. You don't need to give #content height: 100% - it won't do anything. And width: inherit; is unnecessary because that's the automatic behavior.

Look into margin and padding shorthands... "margin: 0 0 0 0;" and "padding: 0 0 0 0;" = "margin: T R B L;" and "padding: T R B L;"

Use a list for navigation (many examples on the site I linked above).

Don't use <h1> more than once for SEO purposes. Use <h2> and <h3> and <h4>, <h5>, and <h6>.

Make your source order: #left, #center, #right and float them all left.

If you want to center #container, do this:

body { text-align: center; /* For IE */ }
#container { width: blah; margin: 0 auto; }

And always, always, always make it work in a good browser first (Firefox, Opera, Safari) then test and fix for the bad one (IE).

Firefox is rendering properly - it's the code that's broken, not the browser.