csscss-reset

Nav and lists in a reset style-sheet


Is this reset style-sheet correct? The problem I am having is with the oi and ul.

As you can see, below where there is

 ol li, ul li {
    margin: 5px 0 0 40px;
   }

I only want to apply it for Lists within the page, it worked, however It applys the style to the Nav list as well! which is in the header, how can I prevent that from happening?

html, body, div, section, article, span, figure, figcaption, img, 
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, abbr, address, 
small, strong, sub, sup, input, output, textarea, ol, ul, li, fieldset, 
form, label, legend, tr, th, td, table, caption, footer, header, 
hgroup, aside, menu, nav, time, mark, audio, video, 
canvas, embed, iframe, object {

    margin: 0;
    padding: 0;
    border: none;
    font: inherit;
    max-width: 100%;
    text-decoration: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;    
    -webkit-box-sizing: border-box;
}

a {
    display: inline-block;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

ol li, ul li {
    margin: 5px 0 0 40px;
}

abbr {
    font-weight: bold;
}

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

.hidden {
    display: none;
}

Solution

  • If there are li elements in your nav you have to reset them again or (a better way) you should specify which li elements should have these margins. so use a class for them instead.

     ol li.margined, ul li.margined {
        margin: 5px 0 0 40px;
     }
    

    or the first option

    ol li, ul li {
        margin: 5px 0 0 40px;
    }
    nav ol li, nav ul li {
        margin: 0;
    }