Permalink
Browse files

Add IE9 correction for SVG overflow, fix #16. Update demo to include …

…explicit <img> and <svg> tests.
  • Loading branch information...
1 parent 7f8442a commit 8cece826593d0219d53f9e666d9f4f95368fdc3a @necolas necolas committed Jun 21, 2011
Showing with 41 additions and 17 deletions.
  1. +16 −5 demo.html
  2. +25 −12 normalize.css
View
21 demo.html
@@ -61,7 +61,7 @@
The <dfn>dfn element</dfn> example<br>
The <em>em element</em> example<br>
The <i>i element</i> example<br>
- The img element <img src="http://placehold.it/16x16" alt=""> example<br>
+ The img element <img src="http://placekitten.com/16/16" alt=""> example<br>
The <ins>ins element</ins> example<br>
The <kbd>kbd element</kbd> example<br>
The <mark>mark element</mark> example<br>
@@ -78,6 +78,17 @@
The <u>u element</u> example
</p>
+ <h1>Embedded content</h1>
+
+ <h3>img</h3>
+
+ <img src="http://placekitten.com/100/100" alt="">
+ <a href="#"><img src="http://placekitten.com/100/100" alt=""></a>
+
+ <h3>svg</h3>
+
+ <svg style="width:100px; height:100px;"><circle cx="100" cy="100" r="100" fill="#ff0000"></svg>
+
<h1>Grouping content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
@@ -158,9 +169,9 @@
</dl>
<h3>figure</h3>
-
+
<figure>
- <img src="http://placehold.it/400x200" alt="">
+ <img src="http://placekitten.com/400/200" alt="">
<figcaption>Figcaption content</figcaption>
</figure>
@@ -250,7 +261,7 @@
<fieldset>
<legend>Clickable inputs and buttons</legend>
- <p><input type="image" src="http://placehold.it/90x24" alt="Image (input)"></p>
+ <p><input type="image" src="http://placekitten.com/90/24" alt="Image (input)"></p>
<p><input type="reset" value="Reset (input)"></p>
<p><input type="button" value="Button (input)"></p>
<p><input type="submit" value="Submit (input)"></p>
@@ -283,7 +294,7 @@
<div><select><option>Option 01</option><option>Option 02</option></select></div>
<div><textarea cols="30" rows="5" >Textarea text</textarea></div>
- <div><input type="image" src="http://placehold.it/90x24" alt="Image (input)"></div>
+ <div><input type="image" src="http://placekitten.com/90/24" alt="Image (input)"></div>
<div><input type="reset" value="Reset (input)"></div>
<div><input type="button" value="Button (input)"></div>
<div><input type="submit" value="Submit (input)"></div>
View
37 normalize.css
@@ -1,4 +1,4 @@
-/*! normalize.css 2011-06-21T02:22 http://github.com/necolas/normalize.css */
+/*! normalize.css 2011-06-21T18:23 UTC · http://github.com/necolas/normalize.css */
/* =============================================================================
HTML5 element display
@@ -77,17 +77,6 @@ textarea {
font-family: sans-serif;
}
-/*
- * 1. Removes border when inside 'a' element in IE6/7/8/9
- * 2. Improves image quality when scaled in IE7
- * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
- */
-
-img {
- border: 0; /* 1 */
- -ms-interpolation-mode: bicubic; /* 2 */
-}
-
/* =============================================================================
Links
@@ -252,6 +241,30 @@ nav ol {
/* =============================================================================
+ Embedded content
+ ========================================================================== */
+
+/*
+ * 1. Removes border when inside 'a' element in IE6/7/8/9
+ * 2. Improves image quality when scaled in IE7
+ * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+ */
+
+img {
+ border: 0; /* 1 */
+ -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/*
+ * Corrects overflow displayed oddly in IE9
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+
+/* =============================================================================
Figures
========================================================================== */

0 comments on commit 8cece82

Please sign in to comment.