Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

Learn More

Text overlapping on table content

  • 13 답장
  • 0 이 문제를 만남
  • 252 보기
  • 최종 답변자: 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~
첨부된 스크린샷

선택된 해결법

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.

문맥에 따라 이 답변을 읽어주세요 👍 1

모든 댓글 (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?

글쓴이 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

선택된 해결법

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.

글쓴이 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.

글쓴이 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.

글쓴이 cor-el 수정일시