Permalink
Browse files

Switched to font-size:0; on parent

* font-size:0; on parent
* restore on children with rem and px fallback

Signed-off-by: Jérôme Coupé <jercoupe@gmail.com>
  • Loading branch information...
1 parent 0f33fe5 commit 7e007b83f43523fd3714264ca61c98f5361921fe @jeromecoupe committed Jun 20, 2012
Showing with 11 additions and 15 deletions.
  1. +9 −13 css/screen.css
  2. +2 −2 index.html
View
@@ -10,9 +10,13 @@ Mobile First item grid using display:inline-block; for items
*/
+html
+{
+ font:normal 100%/1.5 Helvetica, Arial, sans-serif;
+}
+
body
{
- font:normal 14px/1.5 Helvetica, Arial, sans-serif;
background:#fcf9f5;
color:#000;
margin:2em;
@@ -33,27 +37,19 @@ reflowing grids of items
list-style:none;
margin:0;
padding:0;
- font-family: "Courier New", monospace; /*switch to monospace for the whitespace hack to work consistently*/
- letter-spacing: -0.55em; /* webkit: collapse whitespace between units */
- word-spacing: -0.1em; /* IE < 8 && gecko: collapse whitespace between units */
+ font-size:0; /*eliminates the whitespace between inline-block children items*/
background:green;
}
-.lt-ie8 .grid
-{
- letter-spacing: normal; /* reset IE < 8 */
-}
-
.item
{
display:inline-block;
vertical-align:top;
width:47.826087%; /*440/920*/
margin:0 4.3478261% 3em 0; /*40/920*/
- font-family: "open-sans", Helvetica, sans-serif; /*restore non-monospace font in grid units*/
- letter-spacing: normal;
- word-spacing: normal;
background:yellow;
+ font-size:14px; /*restore font size for browsers not supporting rems*/
+ font-size:1rem; /*restore font size for browsers supporting rems*/
}
.item:nth-child(2n)
@@ -71,7 +67,7 @@ reflowing grids of items
@media screen and (min-width:760px) {
/*bumping down the font size*/
- body
+ html
{
font-size:80%;
}
View
@@ -13,8 +13,8 @@
<title>Reflowing Inline-block Grid</title>
<!-- CSS (dropped support for IE6 > gets unstyled pages) -->
- <link rel="stylesheet" media="screen" href="css/normalize.css" />
- <!--[if ! lte IE 6]><!--><link rel="stylesheet" media="screen" href="css/screen.css" /><!--<![endif]-->
+ <link rel="stylesheet" media="screen, handheld" href="css/normalize.css" />
+ <!--[if ! lte IE 6]><!--><link rel="stylesheet" media="screen, handheld" href="css/screen.css" /><!--<![endif]-->
<!-- JS (modernizr only in the head, rest of script at the bottom) -->
<script src="js/modernizr.min.js"></script>

0 comments on commit 7e007b8

Please sign in to comment.