grid background is incorrect with percentages about susy

[mirisuzanne]

Thanks for the note.

I'm not sure what all your variables represent, that doesn't look like a standard Susy setup to me.

You're right, but it's not a bug on our end, it's the standard well-documented issue of sub-pixel rounding. Generally sub-pixel rounding gives you one pixel margin of error, but in this case it's compounded with each column in the grid, so you can end up several pixels off. Firefox handles rounding better than Chrome does in this case, thus the difference.

I'll make sure to document that difference in the new docs we are working on.

Susy is built to embrace the zen approach to design. The web is not a fixed medium. If you need pixel-exact grids, Susy is not for you. If you need robust responsive grids, I think it's the best tool around. Cheers!

[pdewouters]

hey, don't get me wrong, I'm loving susy. I just use my own grid overlay and it's aligning fine.
I couldn't find an example of a grid setup with percentages, so I googled and found this article
http://surgeworks.com/blog/responsive-web-design-using-compass-revised
I copied the formulae from that article.
The susy tutorial uses ems.

by the way, is your site http://eric.oddbird.net/ built with Compass/Susy? because that's what I want to do.
I need header/content/footer to span the full width of viewport with different backgrounds, then inner divs which are centered.

so I have this:
#header, #nav, #inner, #footer{
@include container;
background-color: hsla(60,100%,50%,0.4);
}
.wrap{

@include pad(1,1);
@include margin-leader(1);
@include margin-trailer(1);
@include clearfix;

}

[mirisuzanne]

Ah, I see what you are doing. That's an interesting approach and looks like it would work fine.

So you know, there's a much simpler option. Susy was built precisely to take care of that math for you. All Susy grids are fluid on the inside, so simply do:

$total-cols: 12;
$col-width: 58px;
$gutter-width: 24px;
$side-gutter-width: 0px;

The only difference here will be that your grid container has width: 960px; max-width: 100%; set on it (which is simply an IE6-friendly way of saying max-width: 960px;). You can leave that if you like having the upper limit to your fluidity, or you can override it with width: 100%.

I'm also adding major responsive features to the next release of Susy. I should have a beta out soon. You can see the syntax in development here: https://gist.github.com/2306353

I do need to document this better. The advantage of the fluid grid image is that it's fluid. It's also automatic (no image needed). So you get a trade-off by switching to images.

[pdewouters]

great! thanks for the explanation, makes sense now.

[mirisuzanne]

Not seeing this any more on the latest Chrome: Version 19.0.1084.41 beta

[pdewouters]

weird, when I put the grid background back in, it actually changes the widths of my content columns

[mirisuzanne]

What version? 0.9? Can you paste some code that will re-create the problem for me?

[pdewouters]

yes v0.9, the code can be found here: https://github.com/pdewouters/genesis-child-theme/
I set the grid in the _base.scss file and the container and background are in _layout.scss
at the moment I commented out //@include susy-grid-background; at line 34

[mirisuzanne]

I can't recreate this. When I comment or un-comment the grid-background, the only change I see is 6 background-images and a background position. I'm afraid the issue is somewhere on your end.

[pdewouters]

probably yes. thanks for taking the time to check though