Site works fine in most browsers except Firefox. (Volusion)

Question

I'm working on redesigning a small company's website that uses the Volusion eCommerce platform. There are essentially two parts to this website: the homepage - which is completely custom built - and the rest of the website, which largely relies on a bunch of template .html and .css files.

My main problem is, the site looks fine on Chrome, Safari, and (mostly) IE. But it looks absolutely horrendous on Firefox, and I cannot figure out for the life of me why this is.

Here are two links that best display the issue:

The homepage: (* removed link due to lack of reputation *)

And another page: http://www.farmtopeople.com/NYC-Artisan-Hub-s/3353.htm

I'm not sure how to fix this error, as any fix I make for Firefox only causes issues in Chrome etc.

One additional problem for IE: In the "another page" link, the main content of the page is pushed down below the left navigation. How can I fix this?

Some additional information that may help: Volusion can be limited with customization, so the way the homepage is being displayed is a little jenky. A completely custom html file, complete with it's own html, head, and body sections are pretty much just thrown into what's supposed to be the banner area of the page. This custom page uses css to "display: none" most of the template stuff that Volusion wants on every page, but this means that there are actually still two head and body sections on the homepage. I feel like this is is likely causing some problems, but its doesn't explain why the "another page" link is still so messed up.

Any help would be immensely appreciated!

EDIT:

Here is a screenshot of what I'm seeing through Firefox on the "another page" link above: http://i.imgur.com/i3Btpyq.jpg?1

It seems as though it is not registering any css at all?

Answer 1

What you can do is add some javascript to detect if it is firefox or not. Then if it is firefox, remove the unwanted margin from the div.

var FIREFOX = /Firefox/i.test(navigator.userAgent);
if (FIREFOX) {
    var el = document.getElementById('content');
    el.setAttribute("style","margin-left: 0px;");
}

edit:

You can put the JavaScript in your html using:

<script type="text/javascript">
     // The Code Above 
</script>

Answer 2

The problem appears to be at some point a div with as ID "#content" got set to a margin-left of -410px which is causing the entire page to be shifted to the left. Additionally I notice big parts of your styling use tables, this is bad practice and can cause trouble.