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

Cuireadh an snáithe seo sa chartlann. Cuir ceist nua má tá cabhair uait.

Text Out of alignment (with GaugeMeter.js)

  • 8 bhfreagra
  • 1 leis an bhfadhb seo
  • 21 views
  • Freagra is déanaí ó yongseong.liew

more options

I have a website that uses GaugeMeter.js component. The text of the gauges are out of alignment (as shown in the screenshot) -- which never the case when it is opened with Chrome Browser (i.e. always centered and within the circle/arc).

Strangely, sometime it works well when I started to change the Firefox window width (it is a responsive page).

Anyone came across this? Any idea to solve this?

Attached screenshots

Réiteach roghnaithe

The problem appears to be caused by this rule:

.GaugeMeter {
  display: inline;
}


Why is that needed? You could try using inline-block or using the default (block).

Read this answer in context 👍 0

All Replies (8)

more options

Check your zoom controls.

<Control> (Mac=<Command>) + (plus) enlarge - (minus) reduce 0 (zero) restore

more options

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

more options

yongseong.liew said

Strangely, sometime it works well when I started to change the Firefox window width (it is a responsive page).

Probably you have an event handler tied to the resize event. If you call that handler after page load, does that have any effect on the problem?

more options

cor-el said

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

Zipped an offline version which the static page shows the same "out of alignment" issue when viewed in Firefox.

Download link: [https://demo-site.signoff.live/firefo.../firefox-rendering-issue.zip]

Athraithe ag yongseong.liew ar

more options

cor-el said

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

Zipped an offline copy and the static page shows the same issue when viewed offline using Firefox.

Download link: https://demo-site.signoff.live/firefox-rendering-issue.zip

Athraithe ag yongseong.liew ar

more options

cor-el said

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

Zipped an offline copy and the static page shows the same issue when viewed offline using Firefox.

Download link: https://demo-site.signoff.live/firefox-rendering-issue.zip

more options

Réiteach Roghnaithe

The problem appears to be caused by this rule:

.GaugeMeter {
  display: inline;
}


Why is that needed? You could try using inline-block or using the default (block).

more options

jscher2000 said

The problem appears to be caused by this rule: .GaugeMeter { display: inline; }
Why is that needed? You could try using inline-block or using the default (block).

It comes as the default CSS from the GaugeMeter.js library sample.

Indeed, removing that solves the problem.

It is interesting that Chrome/Safari (Webkit) treats that line differently and never show similar behavior.