My website page layout is broken on Firefox only - and even good developers can't fix it
I truly hope somebody can give me some help. I am struggling to understand why my website page containers go nuts on Firefox. I tried so much, I payed a good developer who told me the issue was over, but it is still there. I'm trying everything but my project is being a failure due to very nasty WP Theme issues, like this one. I had to spend my time fixing the Theme and my project completely past its deadline. Maybe I'm going to be fired, without fox.
I clearly cannot add site credentials for anybody, but maybe some developer knows what could be of help.
It seems that the issue has something to do with page Container and Flex attribute. The website is a Wordpress site and the page is built with WPBakery Visual Editor. All updated, no customizations, pages should work easy... As you can see the page title is ok, but then inside the main page container, the Visual Editor rows (which have display = flex) behave as if they had no width. Despite that, changing the flex attribute to display = block targeting FF specifically through Css, it doesn't seem to work either. It's not something simple just as a Row option inside the Visual Editor.
Please see attachments. Many pages behave like that. My questions: - is there a possibility to speak with Firefox assistance and get a clue? - did any developer from community, experience something similar before? How did you manage to solve it? - Firefox, why are you behaving like that with an old supporter?
Thank you to anybody spending his time to help.
Isisombululo esikhethiwe
Hello Dbben, thank you for raising morale :) but I hope that outside TB you were able to see the right font style, too.
It's stressing when you must respond for every bit of code (you didn't write).. I did all I could. Unfortunately further confrontation with the boss on such topics may not lead to better understanding :D
Today I was able to fix one of the broken pages with a workaround, and I can confirm that the issue is tied to "display:flex" and "float:left" values interpretation from FF.
However I think you're right and there's no easy way to fix this without hiring developers. I need to find a stable solution for the whole site and the pages to come, too. So I'll close this post for now.
Once more, thanks to everybody for taking the time to check. Bye
Funda le mpendulo ngokuhambisana nalesi sihloko 👍 0All Replies (14)
Hi sviluppo5, in this report, we are working on a problem which seems quite similar. https://support.mozilla.org/de/questions/1332684
Okulungisiwe ngu schnrl
Thank you for following up.
Unfortunately my issue is not a single device / OS issue. Very old Pc, mobile phones, my updated Pc, everywhere the pages are broken (on Firefox only).
I am pretty certain that this issue is due to 2 css values: - css display attribute - css float attribute But I don't understand why those settings are allright everywhere except for FF.
Is there a reason you have not provided a link for us to see if we can replicate the issue?
Hi, you're right, but I'm concerned about showing my company name and website address, because of scams or any other malicious activity. Plus I don't like to leave this testimonial about the site itself in an open access forum.
That's why my original questions included one for contacting FF private support, which I guess does not exist... I am new in this Forums, but if you confirm that I can delete the post after a few days, I can add a link in there. Can you please confirm?
Thank you quite a lot.
Ok, I just realized that I can edit the posts later! Here you are:
L
L
Okulungisiwe ngu sviluppo5
hello sv,
please let your boss that we examined your html coding for the website and you did a beautiful job. The issue you are having, as well as many others, is not unique. It is a bug in current Mozilla FireFox browser. In fact, on yesterday I was looking at another complaint about a webpage that was not displaying the "elements" correctly. It was also a WordPress page.
As you can see in the attached pic, the Mozilla Thunderbird email program lays out your html nicely.
As to what you can use to "trick" FireFox into displaying the page correctly, is beyond me. I havent played with webpage-ing for many years.
Isisombululo Esikhethiwe
Hello Dbben, thank you for raising morale :) but I hope that outside TB you were able to see the right font style, too.
It's stressing when you must respond for every bit of code (you didn't write).. I did all I could. Unfortunately further confrontation with the boss on such topics may not lead to better understanding :D
Today I was able to fix one of the broken pages with a workaround, and I can confirm that the issue is tied to "display:flex" and "float:left" values interpretation from FF.
However I think you're right and there's no easy way to fix this without hiring developers. I need to find a stable solution for the whole site and the pages to come, too. So I'll close this post for now.
Once more, thanks to everybody for taking the time to check. Bye
You're welcome SV.
As a suggestion, take a look at the " page source " codes for webpages of other companies that do display well in FF and see what they use. Then implement the same codes / methodologies too.
Otherwise, I think i have heard in the recent pass that CSS is problematic in FF while old fashion HTML is not.
Laslty, if i recall, WordPress does provide templates for webpages some are free. But the better ones are for a cost - which their developers may provide free support to you.
So maybe browse around for a template that looks good and works in FF, then adopt it for your company.
Hello SV,
Out of curiosity, i dug into this webpage issue a bit more. I did a quick look into the codes for your page and then looked at the codes for a webpage of a store that has a similar fashion for dsplaying their product as your page displays the suites.
What i noted if the lack of element controls via a "grid"
I have attached to screen shots herein. Each has a webpage devoloper tool section opened at the bottom. As you will note between the two webpages, one has a "grid overlay" and the other does not.
So i think your page needs a grid to ensure the elements are locked into place.
Here is a link about this css element:
https:____//_____css-tricks.com/snippets/css/complete-guide-grid/
please remove the underlines above to use the url
Your links are still here, so I took a look at the all suites page. I'm not familiar with flex layout, but I can say that Firefox may require you to do more to clear floats so that content isn't crushed horizontally. By that I mean adding clear:left or clear:both at the beginning of a new "row" so Firefox doesn't try to squeeze its contents into the same space as the previous ones.
Good morning, I think that both your solutions are right. However in my specific case (deadline and so on), using a grid may require more time, while the use of clear should be very fast to implement.
I never thought to add clear:both... why? Very useful confrontation! Thank you guys. Regards
Unfortunately, different browsers seem to interpret the float specifications differently. This article from is where I learned about the need to clear floats:
https://www.complexspiral.com/publications/containing-floats/
thats interesting jscher !
but is there a way to clear these errors on a webpage while in FF?
I mean, lets say i an viewing a screwed up webpage on FF at this time.
Then I can open up that page source codes to modify the float codes and then have that page reload?
·´¯`·...¸>-)))º> ~dbben said
I mean, lets say i an viewing a screwed up webpage on FF at this time. Then I can open up that page source codes to modify the float codes and then have that page reload?
No, any changes you make using the Page Inspector or Style Editor (in the dev tools) are lost when you reload the page because Firefox cannot write to the server (it might be able to save changes to style sheets on disk).