Grids rounding.

54 views
Skip to first unread message

Murray

unread,
Apr 1, 2012, 7:12:00 PM4/1/12
to object-or...@googlegroups.com
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

unread,
Apr 1, 2012, 10:45:51 PM4/1/12
to object-or...@googlegroups.com
It's a terrible looking hack, but I've solved this for Future-Murray by doing this:

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

Present-Murray will just have to wait a bit.

Murray.





--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/object-oriented-css/-/iRelYAijEBEJ.
To post to this group, send email to object-or...@googlegroups.com.
To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en.

Cleecanth

unread,
Nov 13, 2012, 1:18:01 AM11/13/12
to object-or...@googlegroups.com, murray....@gmail.com
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

unread,
Nov 13, 2012, 6:09:12 AM11/13/12
to OOCSS Google Group, murray....@gmail.com
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
Forward
0 new messages