normalize declaration to remove list styles is not working

Question

   bplist00Ñ_WebMainResourceÕ   
_WebResourceFrameName^WebResourceURL_WebResourceData_WebResourceMIMEType_WebResourceTextEncodingNameP_;https://necolas.github.io/normalize.css/3.0.3/normalize.cssO‡<html><head></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox &lt; 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  box-sizing: content-box; /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}
</pre></body></html>Xtext/cssUUTF-8(?N`v”•Ó^g
m


 /*Lists
   ========================================================================== */

/**
 * Remove margin,padding,list style.
 */

  ol,
  ul {
    margin: 0;
    padding: 0;
    list-style: none;  
 } ```

```html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Porfolio</title>
<link rel="stylesheet" href="css/normalize.css"/>
<link rel="stylesheet" href="css/styles.css"/>
</head>

<body>

   <div id="wrapper">


   <header class="main_head">

    <h1>Le Var Range</h1>

        <nav class="main_nav">
        <ul>
        <li>Home</li>
        <li>Portfolio</li>
        <li>Contact</li>
        </ul>
      </nav>

      <img src="images/responsive-layout-profile.png" alt="varlerang" title="A picture of varlerang"/>
      <div id="profile">
      <p>Hello! I'm a front-end developer who loves responsive design and css. I recently accomplished learning front-end web development at Treehouse and am
excited to put all my creativity an skills to use!.
      </p>
      </div>
 </header>

   <div>

        <h2>Portfolio</h2>

      <ul class="img">
        <li>
        <img src="images/portfolio-12.png" alt="pic_12" title="picture of marketing page"/>
         <label for="marketing page">Marketing Page</label><p>This project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
        </li>
        <li><img src="images/portfolio-2.png" alt="pic_2" title="picture of search page"/>
         <label for="search page">Search Page</label><p>This project searches through a specific database to find information that the user is trying to look up.</p></li>
        <li><img src="images/portfolio-3.png" alt="pic_3" title="picture of travel app"/>
         <label for="travel app">Travel App</label><p>This project compares travel times based on different transportation methods and tells uou the best one.</p></li>
        <li><img src="images/portfolio-6.png" alt="pic_6" title="picture of map of favorite spots"/>
         <label for="Map of Favorite Spots">Map of Favorite Spots</label><p>This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p></li>
        <li><img src="images/portfolio-14.png" alt="pic_14" title="picture of work planner app"/>
         <label for="work planner app">Work Planner App</label><p>This project uses stickies to plan out your duties threw out the day and threw speech tells you when the next time another task that must be done.</p>
         </li>
        <li><img src="images/portfolio-7.png" alt="pic_7" title="picture of media player"/>
         <label for="media player">Media Player</label><p>This project uses Media Player, one of the best video player and music player for Mac OS. It can handle all popular video formats including: mp4, wmv, avi, mkv, dv, rm, mp, mpeg, flv, divx, swf, dat, h264, h263, h261, 3gp, 3gpp, asf, mov, m4v, ogv, vob, vstream, ts.
Media Player finds all your videos automatically for you. And saves your time and disk space to transcoding or format converting. Just put your video on sdcard or click the URL in browser to watch it. Support sub: srt, ass, ssa, sub,txt, utf, smi, rt,aqt, jss, js, utf8, utf-8.
The Media Player load external subtitle with same name of video automatically and support .m3u playlist.</p>
        </li>
     </ul>
   </div>

   <div class="contact">
     <h2>Contact</h2>

      <p>If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</p>

     </label for="phone">Phone</label><p>+1(283)888-9100</p>
     </label for="email">Email</label><p>email@varlerang.com</p>
   </div>

     <footer class="main_footer">
       <p>Le Var Range</p>

       <ul>
       <li>Home</li>
       <li>Portfolio</li>
       <li>Contact</li>
       </ul>
     </footer>

   </div>
 </body>
</html>

removing the list style for some reason is not working .. can someone tell me why .

Answer 1 · 2016-03-02T11:51:50Z

March 2, 2016 11:51am

normalize won't remove list styles!

Depending on what you wants to do, if you want to remove the little bullets, you can type

ul, li {
padding: 0;
margin: 0;
list-style-type: none;
}

Answer 2 · 2016-03-02T23:50:32Z

March 2, 2016 11:50pm

I did the first suggestion that didn't work and the second I did as well... in one of the vids the mentor did

ol, ul { margin : 0; padding: 0; list-style: none; }

that was all .... and it worked ... I followed along and nothing. I will try again. Thanks.

Answer 3 · 2016-03-02T23:52:35Z

March 2, 2016 11:52pm

I c ... i thought normalize could remove list styles ... I thought thats what I heard in the vid about normalize. ok i will try the second declaration you provided to c if it works ..... Thanks.

Answer 4 · 2016-03-03T00:03:28Z

March 3, 2016 12:03am

what I finally did was just put the declaration in another css file since still doesn't work in normalize file .. don't know why, but anyway thanks for the help and happy coding!

Answer 5 · 2016-03-06T11:15:42Z

March 6, 2016 11:15am

thanks .. i did put in my own in a separate file .. thats what I meant .. I didn't think it would be wise to alter the normalize file.

Welcome to the Treehouse Community

Looking to learn something new?

Le Var Range

Le Var Range

normalize declaration to remove list styles is not working

Kartikey Shahi

Kartikey Shahi

5 Answers

Garrett Levine

Garrett Levine

Le Var Range

Le Var Range

Le Var Range

Le Var Range

Le Var Range

Le Var Range

Garrett Levine

Garrett Levine

Le Var Range

Le Var Range

Garrett Levine

Garrett Levine