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;
}
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;
}