Differences

This shows you the differences between two versions of the page.

--- eg-146:lecture16 [2012/03/19 20:22] – [Case Study: Developing a Positioning Style Sheet] eechris
+++ eg-146:lecture16 [2012/03/19 20:30] – eechris
@@ Line 525: / Line 525: @@
  * Examine the structure.
-===== The CSS Reset =====
-  * Common technique, ensures that design starts from a blank slate on all browsers
 ===== The HTML5 display-role reset =====
@@ Line 533: / Line 530: @@
   * For older browsers, ensures that new elements are set as blocks
   * For IE browsers, we also need a JavaScript HTML5 fix (see the HTML5)
+  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/html5-elements-styling.html|See page]]
+----
+<code css>
+charset "utf-8";
+/* Style new "block-level-like" HTML5 elements so they occupy their own line in older browsers. */
+article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+</code>
+===== The CSS Reset =====
+  * Common technique, ensures that design starts from a blank slate on all browsers
+  * [[http://www.bruceontheloose.com/htmlcss/examples/chapter-11/reset.html|See result]]
+----
+<code css>
+/* CSS RESET
+------------------------------------------------ */
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+</code>
-Changing the Background
+===== Changing the Background ====
     To use a background image:
-#wrap {
+#background-image {
   background-image: url(bluebench.jpg);
   background-position: left top;