# CSS bug in box category style
**URL:** https://meta.discourse.org/t/css-bug-in-box-category-style/25525
**Category:** Bug
**Created:** [2015 年 2 月 22 日午後 3:26 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525 "2015-02-22T15:26:10Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@yagizozturk](https://meta.discourse.org/u/yagizozturk)
#### Post date: [2015 年 2 月 22 日午後 3:26 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525/1 "2015-02-22T15:26:11Z")
Here is a little css bug in category style box mode..
1.3.0 beta1 is the discourse version.
Chrome version : Version 38.0.2125.111 m
---
### Author:  [@Moter8](https://meta.discourse.org/u/Moter8)
#### Post date: [2015 年 2 月 22 日午後 5:51 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525/2 "2015-02-22T17:51:18Z")
What browser are you using and what version is discourse on / on what site do you see this?
---
### Author:  [@TechnoBear](https://meta.discourse.org/u/TechnoBear)
#### Post date: [2015 年 2 月 22 日午後 5:55 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525/3 "2015-02-22T17:55:40Z")
It happens on any site if the font size is zoomed in or out.
In my case, I have to set meta.discourse to 110%, and you can see a slight misalignment.
---
### Author:  [@elberet](https://meta.discourse.org/u/elberet)
#### Post date: [2015 年 2 月 22 日午後 6:10 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525/4 "2015-02-22T18:10:33Z")
75%: 
90%: 
100%: 
110%: 
175%: 
I can see a _teeeeeny_ tiny misalignment at 90%, but nothing nearly as severe as previously screenshotted…
Anyways, the left part is styled with `line-height: 24px` and I’d assume that font hinting is causing this to be scaled differently then a straight up `height: 24px`. In fact, applying `height: 24px` to the element in the inspector results in both links having the same height even after scaling…
---
### Author:  [@Moter8](https://meta.discourse.org/u/Moter8)
#### Post date: [2015 年 2 月 22 日午後 6:21 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525/5 "2015-02-22T18:21:24Z")
> [@TechnoBear](#):
>
> It happens on any site if the font size is zoomed in or out.
_ **and why aren’t you mentioning what browser you are using 😤** _
Fine for me both at Firefox Developer Editio 37.0a2 (2015-02-22) and Chrome 41.0.2272.64 beta-m.
---
### Author:  [@TechnoBear](https://meta.discourse.org/u/TechnoBear)
#### Post date: [2015 年 2 月 22 日午後 6:51 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525/6 "2015-02-22T18:51:47Z")
Apologies. I’m using Firefox 35.0.1 on Ubuntu Gnome 14.10. I have it set to zoom text only.
On Meta I see the slight misalignment as in my screenshot, because I have meta permanently set to 110% zoom. On SitePoint, which I normally view at 100%, I can also reproduce the issue using zoom:
110%
133%
---
### Author:  [@yagizozturk](https://meta.discourse.org/u/yagizozturk)
#### Post date: [2015 年 2 月 23 日午前 7:30 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525/7 "2015-02-23T07:30:21Z")
1.3.0 beta1 is the discourse version.
Chrome version : Version 38.0.2125.111 m
The site is [dinozor.org](http://dinozor.org) which you cannot see the bug right now because i am using the bar category mode.
---
### Author:  [@purldator](https://meta.discourse.org/u/purldator)
#### Post date: [2015 年 2 月 23 日午前 8:57 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525/8 "2015-02-23T08:57:10Z")
Here it is at 300%. Chrome Version 40.0.2214.115 m.
Don’t really see any difference. This was taken from here at Meta, by the way.
Here it is in Photoshop. I see no alignment problem:
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2015 年 2 月 23 日午前 9:48 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525/9 "2015-02-23T09:48:55Z")
I believe they were referring to Firefox though
---
### Author:  [@yagizozturk](https://meta.discourse.org/u/yagizozturk)
#### Post date: [2015 年 2 月 23 日午前 9:55 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525/10 "2015-02-23T09:55:00Z")
I was referring to chrome and firefox. Updated my original question with version info also.
**Changed the site to box mode again** , you can see the bug, [dinozor.org](http://dinozor.org)
---
### Author:  [@TechnoBear](https://meta.discourse.org/u/TechnoBear)
#### Post date: [2015 年 2 月 23 日午後 12:42 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525/11 "2015-02-23T12:42:59Z")
I can reproduce the problem in Firefox 35 as above on all sites - here, SitePoint and [dinozor.org](http://dinozor.org).
In Chromium Version 40.0.2214.111 Ubuntu 14.10 (64-bit) I can _only_ reproduce the issue at 90% zoom, for some reason - but again, it affects all sites. (Screenshot is from SitePoint, as the colour makes the issue more visible.)
---
### Author:  [@elberet](https://meta.discourse.org/u/elberet)
#### Post date: [2015 年 2 月 23 日午後 6:20 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525/12 "2015-02-23T18:20:00Z")
Yeah, welcome to the wonderful world of font rasterization, one of the _darkest_ kinds of computer magic. Different libraries will produce different results, the same library may produce different results on different platforms, the same library may even produce different results on the same platform but with a different monitor!
Font rasterizers were never written with consistency being the goal, but simply making the result look good. If that means that a 20 pixel glyph, scaled down by one third, ends up being 14 pixels high instead of 13 despite the rounding error, then so be it.
Just give the thing a fixed `height` instead of a `line-height` and be done with it… 😑
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2015 年 2 月 25 日午前 6:44 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525/13 "2015-02-25T06:44:36Z")
I somewhat cleaned this up with
[https://github.com/discourse/discourse/commit/8248abf73caded433151b8ab5f00cf7839729baf](https://github.com/discourse/discourse/commit/8248abf73caded433151b8ab5f00cf7839729baf)
But I think @awesomerobot needs to do another round of cleanup here, we need to pull all of the box styling into badges.css.scss, its all over the place now.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2015 年 2 月 25 日午前 6:44 UTC](https://meta.discourse.org/t/css-bug-in-box-category-style/25525/14 "2015-02-25T06:44:49Z")