搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

Text Rendering Outside Table Cell Borders

more options

Hey All,

I'm having an issue where the text in a table, which is supposed to remain within the borders of a given cell, is spilling outside of the cell. It's making the text from different cells bleed into other cells, and makes it very tough to read from said table. I have attached an image to better illustrate when I'm describing. I have attempted to play with some of the text settings, but it didn't seem to make a difference. Thanks for any help anyone can provide!

Cheers,

Hey All, I'm having an issue where the text in a table, which is supposed to remain within the borders of a given cell, is spilling outside of the cell. It's making the text from different cells bleed into other cells, and makes it very tough to read from said table. I have attached an image to better illustrate when I'm describing. I have attempted to play with some of the text settings, but it didn't seem to make a difference. Thanks for any help anyone can provide! Cheers,
附加的畫面擷圖

所有回覆 (13)

more options

Try to ask advice at a web development oriented forum.

more options

cor-el said

Try to ask advice at a web development oriented forum.

Thanks for the reply. To be clear, this isn't a table that I'm creating. This is just a screen capture of a page I'm loading that has a table on it. Does your advice still apply despite this?

Cheers,

more options

One reason this can happen is if you set a "Minimum font size" on the Settings page. The reason is that Minimum font size enlarges the text without increasing the space allotted for the text, so it bursts out of the predefined layout.

To enlarge text, it's better to use zoom -- proportional zoom, i.e., do not check the box for Zoom text only.

more options

Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?

more options

jscher2000 said

One reason this can happen is if you set a "Minimum font size" on the Settings page. The reason is that Minimum font size enlarges the text without increasing the space allotted for the text, so it bursts out of the predefined layout. To enlarge text, it's better to use zoom -- proportional zoom, i.e., do not check the box for Zoom text only.

Thanks for your reply, but I don't have a minimum font size selected. I did check those settings. As well, I have the check box selected that allows for pages to choose their own fonts.

more options

cor-el said

Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?

Unfortunately, this is not a publicly accessible page. This is a screen cap from within the admin panel of our ticketing system, which only a select few can access. I did try to access some of the company's public pages with tables (like their API documentation page), but those tables all seem to display properly.

Is there, perhaps, some information I provide from a page inspection, or from the page source, which would be useful?

more options

Are you zooming the page or have increased the font size or is this an incompatibility with Firefox where other browser do not have this issue?

Does zooming out to make the text smaller help ?

more options

cor-el said

Are you zooming the page or have increased the font size or is this an incompatibility with Firefox where other browser do not have this issue? Does zooming out to make the text smaller help ?

No page zoom is being used (set at the default 100%). The page loads correctly in Chrome. It does seem to be specific to FireFox. I also just installed FireFox recently, and have not touched any of the default settings (except to set my default home page to blank).

Zooming out does actually help, but I have to zoom out to an absurd degree for the issue to go away fully.

Thanks again for your help.

Cheers,

more options

Can you show a screenshot of how Google Chrome shows this ?

Is GC using the same font and font size if you check this in the Inspector?

You can right-click and select "Inspect" to open the built-in Inspector with this element selected.

more options

cor-el said

Can you show a screenshot of how Google Chrome shows this ? Is GC using the same font and font size if you check this in the Inspector? You can right-click and select "Inspect" to open the built-in Inspector with this element selected.

I have attached a screen cap of the same table within Chrome. I reattached the original screenshot from FireFox for easier reference as well.

Here is what the inspector says if select a single cell in the table within Chrome: color: #12344D;

   height: 48px;
   font-size: 14px;
   padding: 0 16px;
   border-right: 1px solid transparent;
   vertical-align: middle;

Here is what it says if I select a single cell in the table within FireFox: color: #12344D; height: 48px; font-size: 14px; padding: 0 16px; border-right: 1px solid transparent; vertical-align: middle

Thus, those appear the same. If instead, I select the entire table, it also looks to be the same. There is a lot of information, and I'm not sure which is relevant, if any. However, all of it appears to be pretty much identical from what I can tell.

more options

Any thoughts on why the column is narrower in Firefox? It seems that is responsible for the text not fitting on two lines as expected.

more options

jscher2000 said

Any thoughts on why the column is narrower in Firefox? It seems that is responsible for the text not fitting on two lines as expected.

I have no idea. I haven't touched any of the settings within Firefox, at least not prior to the problem I'm describing, aside from toying with my bookmarks. This issue was visible literally within the first day of installing Firefox.

more options

We can't see the page, so it's more a question of what you can see. For example, is another column is taking too much space due to a long word/URL or wide image, or does the page have excessive margins, etc.

Anyway, you could mention it to the site.