Grids rounding.

Skip to first unread message


Apr 1, 2012, 7:12:00 PM4/1/12
I'm trying to use 3 size1of3's in a box 660px wide and the rounding is out in various ways in different browsers... I can get 3 boxes equal to 220px by changing the width of size1of3 to 33.333334% in most browsers except IE9 which get's it close enough that it's unnoticeable, but Opera is another story entirely as it seems to misbehave no matter what. I even tried rolling back to the old "xxx xxx xxx xxx xxx ..." OOCSS, but it's still not cooperating.

I guess grids.css was never supposed to be dead accurate, but I worry that the designer here is going to get out their pixel ruler and whack my hand with it.

Has anybody solved rounding issues with this before?

Murray Nuttall

Apr 1, 2012, 10:45:51 PM4/1/12
It's a terrible looking hack, but I've solved this for Future-Murray by doing this:

noindex:-o-prefocus, .size1of3 {width:33.34%} /* makes this behave properly in Opera v12a */

Present-Murray will just have to wait a bit.


You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To view this discussion on the web visit
To post to this group, send email to
To unsubscribe from this group, send email to
For more options, visit this group at


Nov 13, 2012, 1:18:01 AM11/13/12
As a designer first and a developer second, I would have to say that pixel perfection is a thing of the past. Design is all about compromise and constraints, and one of the best parts of designing for the web is giving control to your user. Your design challenges are no longer about perfect placement, but about creating things that best suit your user's needs. Those needs include catering to your users' browsers, and, most of all, delivering your site to your users in as efficient a manner as possible.

Now, adding a single hack won't slow down your site noticeably, but I'm not sure I like the road this leads down. Percentage rounding is always going to be an issue with browsers until the spec directly specifies how to handle it. This is a huge challenge and one we, as designers, are just going to have to get off our high chairs and deal with.

Your designer should understand this concept and fast. Pixel perfection is not coming back and we should embrace it.

Nicole Sullivan

Nov 13, 2012, 6:09:12 AM11/13/12
to OOCSS Google Group,
I think flexbox may ultimately help with some of the layout issues we fight, but ultimately, yeah there will be new devices/browsers with new different bugs we can only yet imagine. ;)

You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
Reply all
Reply to author
0 new messages