Why is FireFox doing this to my web page, why is it ignoring styles and style sheets?
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?
Chosen solution
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.
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
Chosen Solution
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:
