Reasons not to include ul, ol, li on your CSS reset.
Based on Eric Meyer’s CSS reset on meyerweb.com he included ol, ul, li which was a great help on front-end developers.
Now when you are coding for a CMS (content manangement system) site you don’t want your clients to back to you and ask you why your ul bullets are not showing and your ol is not showing numbers on display. Remember not all clients have the ability to insert inline CSS styling to make bullets and numberings show up each time they will publish a new page.
So I keep my list elements as it is regardless of each various browsers output difference.
I reset margin and padding on the section where styling is not dynamic for end users like comment post, navigations, categories and etc. To keep the design crossbrowser compatible.
I suggest you should understand and study the style first before doing copy and paste.
This just my own approach on list elements, maybe I miss something so feel free to comment on this one.
I like to break up my CSS by use: reset.css, default.css, layout.css, classes.css, etc. Sheets can be combined at deployment, if needed.
I tend to use the Meyer reset sheet as is. My default.css sheet sets up the unclassed defaults for the site, sometimes with a #main (or similar) selector as appropriate. This covers clients authoring content from a limited CMS interface.
When I move between projects, I like knowing that the meyer reset is doing its thing, and that my defaults aren’t getting mixed in. A lot of people don’t like this method, but it works well for our workflow and long term maintenance.
You should still consider resetting the margin/padding on lists, you just need to make sure and re-define a margin/padding. Eric’s reset is meant to provide you with a good starting point.
Before you get blasted here, that is just a reset on all styles to get ALL browsers down to a somewhat solid baseline, from which you will need to define the presets for all the styles accordingly.
You should reset all your styles, and then go back and set the margin/padding manually to have the most control over your layout.
As I understand it, the whole point of a CSS reset is to establish a neutral starting point. A starting point implies moving onwards to setting your own basic styles that will be your defaults instead of the browser defaults. If you’re not doing the second part, then you’re not using the reset as it was intended.
I ran into this problem myself for a while with
<strong>and<em>, forgetting that I now had to explicitly define the expected bold and italic styles for them, respectively.The advantage of all of this is that it drives home much more strongly the whole point of semantic markup and the separation of content and style.
Even if ol, ul and li are included in the reset, there is no need to use inline styling. You have simply to specify your declarations after the reset, as you’d normally do with other elements, e.g. margins and paddings. I still don’t get why you consider lists elements different from other elements included in the reset.
Just my two cents
[sorry for any bad english, I'm italian]
This is one of those things I see a lot in resets, and I have never really understood the reasoning why. It would be like setting the strong tag to not be bold in the style sheet, and then add it back somewhere else.
Needless to say, the nice thing about folks like Eric is that they say their ideas are just that – their ideas – and are not to be taken as gospel. Those people who are taking these sheets as-is are doing themselves and their clients a disservice.
I totally agree with you. I create and configure sites to work with our CMS and found that reset on a lot of things is a big problem.
You may also want to consider taking away margins and padding for images on the list as well. I found this is a problem when clients want to add new images in their content and can’t apply space around them.
This may be more specific to our slightly outdated CMS, but also removing the margins and padding from table elements allow the user more flexibility when placing tables within content.
Just do not forgot to re-style your lists after the reset and you will not have this problem.
Well, I wouldn’t say that’s not a reason to use them in your reset. You just need to remember to redefine them after the reset, especially for the main areas where they will be used by the client.
You don’t need to have clients put inline styles. If you properly redefine margins and paddings and list-styles-types for those elements after you’ve reset it, then there shouldn’t be any real issues.
Thats a good point actually, I was using a reset stylesheet and it actually hindered my development so I dropped it and just reset lists on a case by case basis. Not each and every one obviously but used certain containers in my layout to determine the list styles.
I use the reset and then restyle for the content div.
I find I use the reset li’s, etc for navigation both in the header and footer. For me this makes a smaller,more controllable and less confusing stylesheet because I am not styling and restyling in multiple places.
so whats the point if you reset you list elements on your default and re-style or re-define it after? i leave ul, ol, li as it is and define margin:0; padding:0; when i use this elements. fyi i still you eric meyer’s reset but i drop those list elements. not all RTE offers good markup so i keep list element’s orignal look having bullets and numbered. “I only drop list elements not the whole thing on eric’s reset”
I have found that it is often useful to reset the styles and then re-establish a good base for the content area. I have a stylesheet based on the Firefox 2.0.12 user agent style just for this.
This means that you can style your template without having to worry about resetting everything and leave the content area behaving the same in all browsers still
@ admin (comment #12)
The difference is, each browser has different padding and margins they give to UL, OL, and LI elements by default. If you do not reset them and redefine them, it is left up to the browser, which in more cases than we would like to admit, can break a layout.
That is why you should reset them.
But hey, if it is working for you, and you have not had any complaints, all the more power to you.
good point i totally agree on this. thanks a lot for sharing!
I think people are missing the point (as it’s been said above) – you don’t have to zero out everything, then redeclare it later, you can just declare it in your “reset.css” or “unloaded.css” or “equalizer.css”
The point is to get the expected results in all browsers – so instead of ul,ol,li{ margin: 0; padding: 0}
You create:
ul,ol{margin-left: 20px; padding: 0 0 5px} etc. etc.
Finally someone got the point.
It is misleading to say, “Finally someone got the point’! Your point is not the same as Keif’s.
Your words, example and overall reasoning make a completely different point. You say, ‘I keep my list elements as it is regardless of each various browsers output difference’ so your clients don’t come back to you and ‘ask you why your ul bullets are not showing’.
Keif on the other hand is saying, ‘Have an overall reset for list elements but reset to sensible defaults for your site other than 0′.
You say leave it out and Keif says leave it in (but not 0). I agree with Keif: ‘The point is to get the expected results in all browsers’. Leaving it out does not achieve this.
The reason why others might use a complete reset css is so they only need to keep one copy of this file for all their sites and then have a site default.css that redefines the elements that require other default values for that site. I can see the reasoning for this too (if you have multiple sites on the same server).