Hilfe durchsuchen

Vorsicht vor Support-Betrug: Wir fordern Sie niemals auf, eine Nummer anzurufen, sie per SMS zu kontaktieren oder persönliche Daten preiszugeben. Bitte melden Sie verdächtige Aktivitäten über die Funktion „Missbrauch melden“.

Learn More

Text Out of alignment (with GaugeMeter.js)

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?

Angefügte Screenshots

Ausgewählte Lösung

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).

Diese Antwort im Kontext lesen 👍 0

Alle Antworten (8)

more options

Check your zoom controls.

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

Hilfreich?

more options

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

Hilfreich?

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?

Hilfreich?

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]

Geändert am von yongseong.liew

Hilfreich?

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

Geändert am von yongseong.liew

Hilfreich?

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

Hilfreich?

more options

Ausgewählte Lösung

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).

Hilfreich?

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.

Hilfreich?

Stellen Sie eine Frage

Sie müssen sich mit Ihrem Benutzerkonto anmelden, um auf Beiträge zu antworten. Bitte stellen Sie eine neue Frage, wenn Sie noch kein Benutzerkonto haben.