Vyhľadajte odpoveď

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Website works in IE fine but content is shifted in Firefox?

  • 17 odpovedí
  • 3 majú tento problém
  • 10549 zobrazení
  • Posledná odpoveď od w7fj

more options

Hi, would anyone know why my content is shifted when switching between the IE and the Firefox browser. Even the background image is messed up. Not sure what’s happening. Could someone take a look at www.toxicdiesel.com and let me know what they think would be causing this problem. I just don't see anything in my .css codes that would be incompatible with the Firefox browser.

Vybrané riešenie

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;

}

Čítať túto odpoveď v kontexte 👍 0

Všetky odpovede (17)

more options

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!

more options

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.

more options

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

more options

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

more options

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

more options

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.

more options

I just tried chrome and see no difference.

more options

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.

more options

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...

more options

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.

more options

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"

more options

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.

more options

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.

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.

more options
more options

Vybrané riešenie

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;

}

Upravil(a) w7fj dňa

more options

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.

more options

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