Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

Search Support

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

Why is FireFox doing this to my web page, why is it ignoring styles and style sheets?

  • 7 பதிலளிப்புகள்
  • 0 இந்த பிரச்னைகள் உள்ளது
  • 1 view
  • Last reply by jscher2000 - Support Volunteer

There are two images here the one in green is Firefox the other in Chrome.

One of these is loading correctly and one is trashing the image layout.

It is something that Firefox is doing to the images...

CSS and or Styles tell Firefox what to do and Firefox is not doing it???

What can I do to render these in Firefox the way Chrome renders them?

There are two images here the one in green is Firefox the other in Chrome. One of these is loading correctly and one is trashing the image layout. It is something that Firefox is doing to the images... CSS and or Styles tell Firefox what to do and Firefox is not doing it??? What can I do to render these in Firefox the way Chrome renders them?
Attached screenshots

தீர்வு தேர்ந்தெடுக்கப்பட்டது

It took me a while to see it. This problem is caused by a slight font size difference between Firefox and your other reference browsers. The slightly wider width of the wording under 86it Community causes the table to be a bit too large and because you apply table-layout: auto, Firefox makes space by moving the content to the left. If you change .table100 to table-layout: fixed that resolves the issue:

Read this answer in context 👍 2

All Replies (7)

you can reproduce the error by looking at PHP-Nuke Titanium at https://www.php-nuke-titanium.86it.us

Thanks in Advance.. I spent hours making this theme so that my buddy could access it with Firefox

Is anyone looking at this or does anyone care?

The thing I noticed, which I assume is what you are referring to, is the animated background behind the content. Actually, it's a video and in other browsers, it auto-plays, while in Firefox, it may be blocked by the autoplay block. You'll notice an extra icon next to the lock icon in the address bar when autoplay is blocked:

Click that icon to open a panel where you can change the permission. Note that it won't take effect until you reload the page (either click the Reload button on the toolbar or press Ctrl+R). Then you can enjoy that totally annoying animation in Firefox, too. See attached screenshot comparison.

Ref. Allow or block media autoplay in Firefox

If you were referring to some other difference between the images, what is the difference, I can't see it.

The images are not lining up where they should be. In the left side block. look closer... Visit the page... https://www.php-nuke-titanium.86it.us

Once you are on the page you will see that where it says 86it Community under the Portal Menu on the left side of the page, the icons are messed up. Images and the CSS are not lining up in Firefox. And no there are no other browsers with this problem. A function creates the menu so all the other links were made by the same function and all display properly on every single other browser in production. There is no error in the CSS or the function; Hint the function ran and created all the other menu links correctly. I assume FireFox is seeing a number in the string and doing something it should not do with it. THE ONLY THING DIFFERENT IN THE STRING VALUE IS THE NUMBER 86...

When CSS tells the browser what to do it needs to do it correctly.

By the way, if you want to see how it is supposed to be displayed load any other browser. Thanks

தீர்வு தேர்ந்தெடுக்கப்பட்டது

It took me a while to see it. This problem is caused by a slight font size difference between Firefox and your other reference browsers. The slightly wider width of the wording under 86it Community causes the table to be a bit too large and because you apply table-layout: auto, Firefox makes space by moving the content to the left. If you change .table100 to table-layout: fixed that resolves the issue: