Text overlapping on table content
I got this issue when tried to read some API document provided by a marketplace that i have project with. I tried on another browser and it shown normal, not a single text is overlapping. I've tried some suggestion on another topic to pick No Style on Page Style menu (View -> Page Style -> No Style) but it got more messed up and tried changing font size but still got no improvement. Helpp me pls~
Chosen solution
Possible code for userContent.css:
@-moz-document domain(open.shopee.com) { .basic-table-row td[data-v-032ce90c] {height:auto!important;} }
It is not that difficult to create userContent.css if you have never used it.
The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder with the random name (xxxxxxxx.default-release).
You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in the profile folder with the random name (name is all lowercase). In the chrome folder you need to create a plain text file with the name userContent.css (name is case sensitive). In this userContent.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userContent.css file as a plain text file.
In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userContent.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".
You need to close (Quit/Exit) and restart Firefox when you create or modify the userContent.css file.
More info about userContent.css and userChrome.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
- https://www.userchrome.org/firefox-changes-userchrome-css.html
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
- https://support.mozilla.org/en-US/kb/about-config-editor-firefox
All Replies (13)
That may be a result of zoom settings. You could try reducing the amount of zoom.
https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages
Terry said
That may be a result of zoom settings. You could try reducing the amount of zoom. https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages
Nope. Thats not do any effect. I've tried that too. The text still overlapping.
Can you provide an url or do you have to be logged in to view?
EDIT: What about changing font size?
Modified
Terry said
Can you provide an url or do you have to be logged in to view? EDIT: What about changing font size?
https://open.shopee.com/documents/v2/v2.order.get_order_list?module=94&type=1 Try the "Order" API documents, and go to "get_order_list" submenu.
I've tried changing font size too but still no effect. I guess the problem is the CSS or something else bout the web design, its just optimize for Chrome but messed up on FF.
Right now my only workaround is use other browser.
What I see looks even worse than your screenshot. Font is Roboto, Helvetica Neue which cause issues for some users.
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts
The inspector shows that this is a problem with this table cell. The div.basic-table-row td.basic-table-data-cell .content-slot-td-container[data-v-032ce90c] sets the height to 100%, but its containing table cell sets height:0 and this means that Firefox doesn't expand that container to make the content fit. It displays fine if I disable the height:0 rule. You can contact the website and ask them to look into this.
Chosen Solution
Possible code for userContent.css:
@-moz-document domain(open.shopee.com) { .basic-table-row td[data-v-032ce90c] {height:auto!important;} }
It is not that difficult to create userContent.css if you have never used it.
The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder with the random name (xxxxxxxx.default-release).
You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in the profile folder with the random name (name is all lowercase). In the chrome folder you need to create a plain text file with the name userContent.css (name is case sensitive). In this userContent.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userContent.css file as a plain text file.
In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userContent.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".
You need to close (Quit/Exit) and restart Firefox when you create or modify the userContent.css file.
More info about userContent.css and userChrome.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
- https://www.userchrome.org/firefox-changes-userchrome-css.html
In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
- https://support.mozilla.org/en-US/kb/about-config-editor-firefox
Modified
cor-el said
Possible code for userContent.css:@-moz-document domain(open.shopee.com) { .basic-table-row td[data-v-032ce90c] {height:auto!important;} }
It is not that difficult to create userChrome.css if you have never used it.
The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder with the random name (xxxxxxxx.default-release).
You can find the button......
I've follow ur instruction but nothing change. Did i do it wrong? I attched some screenshot.
Modified
Is the file named userContent.css?
Terry said
Is the file named userContent.css?
No sir, i named it userChrome.css like u said. Do i need to change it?
Gwick said
Terry said
Is the file named userContent.css?No sir, i named it userChrome.css like u said. Do i need to change it?
Edited. Last time i saw the tutorial, the file name was userChrome.css. Now that @Terry mention it, turn out the tutorial got modified and now the file name is userContent.css. I tried it, and its work like a charm! Thank you good Sir!
The userChrome file affects the user interface. The userContent file affects pages.
Sorry for the confusion. The heading mentioned correctly "Possible code for userContent.css" but the remainder mentioned userChrome.css. The steps are the same, only the filename differs like Terry wrote above is userChrome.css for the user interface including context menus and userContent.css is for webpages including special about: pages like about:preferences and about:home and about:newtab (about:about lists all of them).
WARNING: modifications made through a userChrome.css or userContent.css file can stop working as Firefox evolves in new releases, and can break Firefox or cause strange behavior.
Modified