I HATE FIREFOX!, ...can someone please help me with this?! Options

[ShootingBlanks]

Hello. I created the following site, which looks exactly how it should in IE (tried two different versions):

http://www.troma.com/IFTA/index.php

In Firefox and Safari, however, it looks totally wrong (and looks the same in both of those browsers). The site is very light on HTML, and built mostly with CSS (but still very simple CSS, since I'm a novice in that department, so I can't imagine it would screw things up that much!)...

Here is a link to a zip of the site files (just one index page, the images folder, and one css style sheet). The whole thing is under 150kb, so it's VERY small. If anyone could take a look at this and let me know how I could fix it, it'd be GREATLY appreciated! Thanks!!!

SITE FILES: http://www.troma.com/ifta.zip

Like, just the very simple fact that the main page content won't center in Firefox makes no sense to me. I've tried everything!...

--Matt

[Frederiek]

Use margin: 0 auto; in the containerMain div CSS rule.

[ShootingBlanks]

Use margin: 0 auto; in the containerMain div CSS rule.

Thank you SO much!...

...okay - baby steps. That got me through THAT hurdle. Any idea about the other stuff that looks fine in IE, but messed up in Firefox/Safari?

Specifically, here's the inconsistencies:

* The main navigation on the left should look like a filmstrip. I can either get it displaying properly on IE or on Firefox, but not both. In the current iteration of the site (I've updated both the site and the .ZIP file above), I have the first navigation link ("Cinema") set to look properly in Firefox (shifted to the right in IE), and I have the rest of the navigation links set to look properly in IE (shifted to the left in Firefox).

* On IE, the main text displays fine. On Firefox, there is a HUGE gap between the top paragraph and where the bulleted text starts. If I get rid of the "clear: both" on the "ul" tag, that fixes it on Firefox, but on IE, the bullets don't start underneath the picture. They start to the right of the picture.

Thanks so much to anyone who can help with any (or ALL) of these problems. I truly TRULY appreciate it!

--Matt

This post has been edited by ShootingBlanks: Aug 23 2007, 01:30 PM

[Darin McGrew]

It might be a case of different browsers having different defaults for margins, padding, etc. If you start by specifying "margin: 0; padding: 0" for everything, then you can specify the margins and padding you need more consistently.

[pandy]

Hello. I created the following site, which looks exactly how it should in IE (tried two different versions):

Hmmm. Not IE6, me thinks.

[ShootingBlanks]

Thanks for troubleshooting, everyone. I made some updates, and I THINK I have it set. Can you all please check the site link again, and let me know how it displays for you?...

Thanks!!!

[Brian Chandler]

Hmm. You've misspellt "consolidation", and the flag of Japan is wrong: the red bit should be a circle. The Union Jack is probably upside down, but being English I haven't the faintest idea how to tell.

[ShootingBlanks]

Hmm. You've misspellt "consolidation", and the flag of Japan is wrong: the red bit should be a circle. The Union Jack is probably upside down, but being English I haven't the faintest idea how to tell.

Cool - I'll pass that along to the person who'll paste in the text and does the graphics. I was just the "programming guy", so I only had to make sure that everything fit into place on all browser's...

Thanks!!!

[pandy]

Looks the same as before in IE6.