Grid bug in Firefox

[Gaubee]

when debug in Firefox,something wrong in grid model. the Firefox's userAgent is is "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:21.0) Gecko/20100101 Firefox/21.0"

for example:

.pure-u-1-3 {
    width: 33.3333%;
}

shold be change like this:

.pure-u-1-3 {
    width: 33.33%;
}

Otherwise it will show to the next line.

[ericf]

This seems related to #41.

[zimt28]

Same problem here, Ubuntu FF as well.

[xlnt-webdesign]

Same with .pure-u-1-4 on ubuntu/firefox so it is no rounding issue (width:25%) the last unit drops to the next row

[adapterik]

You can work around this problem for now with this css (invoked after the pure css is included):

.pure-g, .pure-g-r {
  font-family: Arial;
}
.pure-u, .pure-u-1,.pure-u-1-2,.pure-u-1-3,.pure-u-2-3,.pure-u-1-4,.pure-u-3-4,.pure-u-1-5,.pure-u-2-5,.pure-u-3-5,.pure-u-4-5,.pure-u-1-6,.pure-u-5-6,.pure-u-1-8,.pure-u-3-8,.pure-u-5-8,.pure-u-7-8,.pure-u-1-12,.pure-u-5-12,.pure-u-7-12,.pure-u-11-12,.pure-u-1-24,.pure-u-5-24,.pure-u-7-24,.pure-u-11-24,.pure-u-13-24,.pure-u-17-24,.pure-u-19-24,.pure-u-23-24 {
  font-family: sans-serif
}   

Where sans-serif can be whatever you like, but this is consistent with the font settings for pure. This ensures that the pure-g grid container will remove letter spacing (-0.31em) correctly for the contained pure-u units, and the pure-u unit container will set it back again. YUI guys -- this seems like kindof a serious issue (unless worked around) for anyone actually using recent yui3 grids or pure grids.

[xlnt-webdesign]

.pure-g, .pure-g-r {
  font-family: Arial;
}

;-) it works even on systems without Arial installed...

[adapterik]

Hey @xlnt-webdesign thanks for including .pure-g-r back in there (that is what I use), I had left out that and plain pure-u.
Re working without Arial installed, are you talking about Linux or Android? I wasn't being scientific in my solution, just noting that it works for me. On my linux (archlinux), with the fonts that I've installed (I don't remember what is stock), Arial gives me Liberation Sans, and sans-serif gives me Bitstream Vera Sans. Other than installing some fonts, I have not done any fiddling with font matching preferences. I've read that Liberation Sans was designed to closely match Arial, which seems to be the case here, but I don't know about Droid Sans or Roboto on Android. I would assume that both Arial and sans-serif would map to them, and that they are designed as drop in replacements the ubiquitous Arial.

[xlnt-webdesign]

@adapterik I'm not that deep into the issue to understand it, but I'm using Ubuntu Linux 13.04 and just checked if Arial is installed (it wasn't). But the workaround with the addition of .pure-g-r works for me.

[adapterik]

@xlnt-webdesign If you haven't already, and are curious, you may be able to run fc-match Arial at the command line to see what your system is giving you instead of Arial.

[xlnt-webdesign]

@adapterik

fc-match Arial
LiberationSans-Regular.ttf: "Liberation Sans" "Regular"

[rockymountainhigh1943]

Shouldn't this framework work with any type face serif or not? This is a big issue if it's going to cause problems with layout and something to make other developers weary of relaying on. Any plans to get this corrected?

[tilomitra]

@rockymountainhigh1943 Yeah, this is pretty important in my list. We'll try to fix this in the next release.

[rockymountainhigh1943]

Right on! Thanks for the update.

[martinspielmann]

Got the same issues here with Linux/Chromium. Thanks for the work arounds :)

[AndreiDuma]

Changing a unit's width from 25% to 24.99% seems to fix the issue without (font or any other) visual changes.

[teaualune]

I had a similar problem with Chrome, but it looks fine in Safari: https://gist.github.com/teaualune/6098800 The third DIV drops to the next line

[ericf]

Closing this as a duplicate of #41