Skip to content
Browse files

Clarified methods used to get rid of spaces between elements

Signed-off-by: Jérôme Coupé <jercoupe@gmail.com>
  • Loading branch information...
1 parent 79e753c commit 6a6c954dae0f2424714f00f0a632449af3e40f4e @jeromecoupe committed Jul 19, 2012
Showing with 2 additions and 2 deletions.
  1. +1 −1 README.md
  2. +1 −1 index.html
View
2 README.md
@@ -4,6 +4,6 @@ The aim of this test is to have a grid of items using media queries to change th
* Uses display:inline-block; and media queries
* Reflows depending on the available width (4 items per row > 3 items per row > 2 items per row)
* Plays nice with items of various lengths
-* Alleviates [the whitespace bug between items](http://css-tricks.com/fighting-the-space-between-inline-block-elements/). If you really want to be on the safe side here, use HTML comments to eliminate whitespace or block your begin and end tags together.
+* Alleviates [the whitespace bug between items](http://css-tricks.com/fighting-the-space-between-inline-block-elements/). If you really want to be on the safe side here, use HTML comments to eliminate whitespace or block your begin and end tags together. As a safety net, I also use the font-size:0 then restore trick (see code).
* Tested in all modern browsers and in IE >= 7 (slight float drops in IE7 upon window resize caused by sub-pixel rounding but I can live with that)
* Uses [selectivizr.js](https://github.com/keithclark/selectivizr) and [respond.js](https://github.com/scottjehl/Respond) to get support for CSS3 selectors and screen-size based media-queries in IE >=7
View
2 index.html
@@ -31,7 +31,7 @@
<li>Uses display:inline-block; and media queries</li>
<li>Reflows depending on the available width (4 items per row > 3 items per row > 2 items per row)</li>
<li>Plays nice with items of various lengths</li>
- <li>Prevent the <a href="http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/">whitespace bug between items</a>. If you really want to be on the safe side here, use HTML comments to eliminate whitespace or block your begin and end tags together.</li>
+ <li>Prevent the <a href="http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/">whitespace bug between items</a>. If you really want to be on the safe side here, use HTML comments to eliminate whitespace or block your begin and end tags together. As a safety net, I also use the font-size:0 then restore trick (see code).</li>
<li>Tested in all modern browsers and in IE >= 7 (slight float drops in IE7 upon window resize but I can live with that)</li>
<li>Uses <a href="https://github.com/keithclark/selectivizr">selectivizr</a> and <a href="https://github.com/scottjehl/Respond">respond</a> to get support for CSS3 selectors and screen-size based media-queries in IE</li>
</ul>

0 comments on commit 6a6c954

Please sign in to comment.
Something went wrong with that request. Please try again.