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

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

Text overlapping on table content

  • 13 uphendule
  • 0 zinale nkinga
  • 7 views
  • Igcine ukuphendulwa ngu cor-el

more options

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~

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~
Ama-screenshot ananyekiwe

Isisombululo esikhethiwe

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

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.

Funda le mpendulo ngokuhambisana nalesi sihloko 👍 1

All Replies (13)

more options

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

more options

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.

more options

Can you provide an url or do you have to be logged in to view?

EDIT: What about changing font size?

Okulungisiwe ngu Terry

more options

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.

more options

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

more options

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.

more options

Isisombululo Esikhethiwe

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

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.

Okulungisiwe ngu cor-el

more options

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.

Okulungisiwe ngu Gwick

more options

Is the file named userContent.css?

more options

Terry said

Is the file named userContent.css?

No sir, i named it userChrome.css like u said. Do i need to change it?

more options

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!

more options

The userChrome file affects the user interface. The userContent file affects pages.

more options

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.

Okulungisiwe ngu cor-el