Text Out of alignment (with GaugeMeter.js)
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?
Chosen solution
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).
All Replies (8)
Check your zoom controls.
<Control> (Mac=<Command>) + (plus) enlarge - (minus) reduce 0 (zero) restore
Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?
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?
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]
Modified by yongseong.liew
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
Modified by yongseong.liew
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
Chosen Solution
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).
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.