First, I would like to say hello as I have just registered! I’m building my first site with 960gs and I started using the style.css from HTML5 Boilerplate over the one in 960gs. I would like to understand what is the best way to force a specific vertical spacing across browsers, across different body font-families.
My problem is that I found out that for nested grids, most of the grid systems becomes unreliable. I found out 960.gs to be the most reliable. But still, even with 960.gs every little change in the body font-style effect the overall design, mostly the vertical spacing between grids. For the design I’m working on, both vertical and horizontal spacing needs to be exactly 5px.
I figured out that the body font-family and line-height has an effect on vertical spacing. But it means that when I change something in body font-family it ruins my site. A line-height change and again. I ended up not defining any font at body level (other than the sans-serif line in H5BP).
Can someone please explain what is the best way to make sure that the vertical spacing between grids doesn’t change between edits/browsers? And that why is this line in a way it is?
body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */
body, select, input, textarea { /* set your base font here, to apply evenly */ /* font-family: Georgia, serif; */ }
Please, have a look at my design (font rotation is dev only).
http://kek.org.hu/uj/uj21-szin2/
I ended up putting “line-height: 19px” in “body, select, input, textarea”, and this way the spacing is a nice 5x5 grid in every modern browser. But of course IE6,7 is an exception. But I still don’t understand why does font-family affects grid spacing and that what would be the most “clean” way to solve my problem.
As of now, it’s a bit clumsy:
- font:13px/1.231
- line-height: 19px
- no body font specified
- IE specific line-height?