UL, LI, OL have always been a bit of a pain when it comes to CSS. The problem is that different browsers allocate these tags with different padding and margins. The result is inconsistent bullet or ordered list spacing in different browsers. So: we reset our style sheet, setting everything to '0'. Afterwards, you can re-specify the margin and padding that your lists should use - in an attempt to create a consistent spacing in all browsers. ??? ???
Problem solved? To an extent, but what other problems have we created...
Problem Solved? No
When we reset out stylesheet sometimes we are not aware of the problems that can occur down the track.
There are all sorts of references across the web regarding "resetting your style sheet". Take these with a pinch of salt. Mostly they are sound, but some contain ill-thought-out or "unaware" details that come back and bite you.
For example, other controls that may be in use for your site (like Telerik Menus and Tree View) rely heavily on styling of UL's and LI's. While other controls in your site may specify their own rules for UL's and LI's, sometimes references you make to specifying UL's and LI's flows directly to these controls, blowing out their layout. Sometimes list styles can either inherit or add their own styles on top of the ones passed down. Now, this becomes a serious problem, because what you find in turn is that you need to start defining or resetting multiple instances of UL, LI and OL - which becomes a real pain; and for what it's worth, this type of programming is against the ideal model (multiple hard-coded definitions in multiple areas).
Resetting Or Defining Your Site CSS Defaults
Previously We used...
----------------------
*,.*,#* {
margin: 0px;
padding: 0px;
}
-------------------------
IE however applies this to all lists. Bullet or number lists become invisible - they just look like regular lines of text. So you're then required to redefine the base setting for your UL's and LI's - which as mentioned above can flow to the styling in other controls, resulting in unexpected or inconsistent layouts for those controls if depend heavily on their own UL or LI styling.
What We Find Is Best
We find that it is best to simply exclude resetting or defining your UL's, LI's or OL's. Like below. This means explicitly defining all of your tags rather that using wildcards (*). Note the exclusion of UL, LI, and OL. Let the browsers have their fun with UL's and LI's, but later when other controls like menus or delicately styled lists come into play, the won't be affected by globally pre-defined lists styles that you were requried to put in your style sheet.
---------------------------------
body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0px;
padding: 0px;
}
body,td,th {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:normal;
color: #444444;
line-height:1.5;
}
body {
margin-top: 0px;
}
------------------------------------------