Try disabling graphics hardware acceleration. Since this feature was added to Firefox, it has gradually improved, but there still are a few glitches.

You might need to restart Firefox in order for this to take effect, so save all work first (e.g., mail you are composing, online documents you're editing, etc.).

Then perform these steps:

• Click the orange Firefox button at the top left, then select the "Options" button, or, if there is no Firefox button at the top, go to Tools > Options.
• In the Firefox options window click the Advanced tab, then select "General".
• In the settings list, you should find the Use hardware acceleration when available checkbox. Uncheck this checkbox.
• Now, restart Firefox and see if the problems persist.

Additionally, please check for updates for your graphics driver by following the steps mentioned in the following Knowledge base articles:

Troubleshoot extensions, themes and hardware acceleration issues to solve common Firefox problems

Upgrade your graphics drivers to use hardware acceleration and WebGL

Did this fix your problems? Please report back to us!

Thanks for your reply, but this didn't do anything to help. Our website is a problem on every machine that uses the Firefox browser, in IE our website works great and everything is lined up perfectly. Again it must be something in our .css codes that are not compatible with Firefox, but not sure what it is. Any other ideas?

Thanks.

Yes. It has to be a coding issue, I'll let it to another contributor here to help you.

The page looks normal to me. There are validation errors in the code, however. See this page:

• http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.toxicdiesel.com%2F

Woops! Forgot to mention that it works fine for me too.

Thanks for your help. If you compare the page with IE to Firefox, don't you see the background is not center vertically correct, the 2nd line nav menu is shifted to the right about 6 pixels and lower footer is not centered. Don't you see this? I see it on every system I have with Firefox, even the safari browser has the shifted content. The IE displays everything correctly. Would fixing the validation errors correct the alignment issues? I just don't want to break the code for IE too. I need the website to work across all browsers.

Thanks.

I just tried chrome and see no difference.

You don't see the alignment issues in the attached photo in Firefox? I see the problem on 5 different machines all running the latest rev=) IE shows everything lined up correctly. I haven't tired chrome, but it might be like IE and work fine not sure. I know that Safari and Firefox browsers both have the same problem.

Let me know, Thanks.

Chrome showed the same issue, IE showed it in center. I would not completely blame is on Firefox. And fixing as mentioned on the validator may help - it may or may not break...

Yep, that's what I thought... I'm not blaming Firefox at all =) In fact, I blame IE more for not showing me the correct problem with the coding. I assume IE is just correcting a mistake somewhere in the markup language that Firefox and other browsers are more strict on. My personal experience is, if it works with Firefox, it will work with all other browsers generally. Someone asked me for some help with their site, so I'm trying to track down where the problem might be at that is causing the alignment conflict between browsers.

Tnx.

Note that there is a missing quote after 34% in the second TD: <td width="34% valign="top">

You also have a third TD that takes up extra space:

<td width="33%" valign="top"><P align=center>&nbsp;</P></td>

If you set the TABLE width to auto (i.e. do not set it) and not to 100% like you do and adjust the width values of the TD elements then Firefox should center that table.

You can also consider to set the margin-left:auto and margin-right:auto to center the table style="margin-left:auto;; margin-right:auto; width:auto"

Thank you so much, that helps a lot. The footer is centered now, but why doesn't the table stay centered when the window is re-sized? In IE the table moves to keep centered as you widen the window, but in Firefox it just stays static. Any ideas on this?

Also why do you think the menu above is shifted in Firefox? Any ideas on this one?

Thank you so much for your help.

The footer doesn't center automatically because the DIV #footerWrap has left and right margins set to 0, so they aren't adjusted.

#footerWrap
{
    float: center;
    color: #fff;
    height: auto;
    width: 930px;
    margin: 0 auto;
    padding: 5px 0;
    border-top: 0px solid #000;
    border-bottom: 0px solid #000;
}

The menu bar gets wider because Firefox add a border of 3px left and right, so reducing the width from 930px to 924px would work with Firefox or just leave out the width and let Firefox adjust it.

#horizNav2
{
    clear: both;
    background: #000;
    height: 31px;
    width: auto;
    line-height: 31px;
    font-color: #fff;
    padding: 0;
    margin-top: 0px;
    border-bottom: solid 2px #000;
    border-left: solid 3px #000;
    border-right: solid 3px #000;
}

A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum.

• http://forums.mozillazine.org/viewforum.php?f=25

The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.

Note that Firefox has a built-in inspector that allow to disable, modify, and add new style rules easily.

Current Firefox versions have a lot of web developer tools build-in.

• https://developer.mozilla.org/en/Tools

• https://developer.mozilla.org/en/Tools/Page_Inspector
• https://developer.mozilla.org/en/Tools/Page_Inspector/HTML_panel
• https://developer.mozilla.org/en/Tools/Page_Inspector/Style_panel
• https://developer.mozilla.org/en/Tools/Page_Inspector/3D_view
• https://developer.mozilla.org/en/Tools/Style_Editor

Thanks Cor-el. You've been a big help. I've been using firebug in Firefox to help to line things up, that's great.

Hey, I have one last question. After changing the width=auto in the #horizNav2 style menu to line up the right edge, that worked great in both Firefox and IE. Now I just have to line up the body so the right edge matches the menu edge. If I change the width=924px in the #bodyWrapper it looks good in Firefox, but it's off in IE by 6px, If I change it to width=auto; both are off. Would you have any idea on lining up the body with the menu so it works in both browsers? The bodyWrapper is below...

1. bodyWrapper {

   background: none repeat scroll 0 0 #FFFFFF;
   border-left: 3px solid #000000;
   border-right: 3px solid #000000;
   clear: both;
   float: left;
   height: auto;
   margin-bottom: 10px;
   padding: 0;
   width: 930px;

}

It would be best to ask advice at the MozillaZine forum site like I posted above to resolve such issues with browser compatibility.
I'm on Linux and can't check the page with IE.

Thanks. Yeah I did that and someone help me figure out what the problem was. Thanks again for you assistance.