HOW do i create a SPECIAL LIST STYLE

[RegGFX]

ok... i've done this before but i've hit a little bump in the road....

Here is what i need help on
*** EXPLANATION OF WHAT I DID *****
I have a special indented list which reads as follows
<style>
li{
margin-left: -20px;
}
</style>

Which will make special indent setting of -20 when applied to HTML As listed below

<ul>
<li><strong>Report Snapshots </strong>
<br>
Blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</li>
</ul>

THE PROBLEM WITH THIS IS that i want this in a STYLE so that this doesn't change the margin on other lists in my HTML

so i wrote the following
<style>
.specialmargin{
margin-left: -20px;
}
</style>
****** QUESTION OF HOW DO I FIX THIS *****
MY QUESTION IS what is the Correct SYNTAX for applying
this style to the code below that produces the same bullet point results as the code below except in a class call out?

<ul>
<li><strong>Report Snapshots </strong>
<br>
Blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</li>
</ul>

ANYONE PLEASE RSVP
(i hope i don't sound too confusing about what i'm asking help on)
Special Thanks to the CSS forum
RegGFX

[drbrain]

<li class="specialmargin"><strong>...

If you have many list items, you'll want to place the class attribute on the ul element instead. You'd have to make these changes:

ul.specialmargin li {
...
}

<ul class="specialmargin">
<li> ...
<li> ...
...
</ul>

Oh, and you'll want to add the attribute 'type="text/css"' to your style element.

[tedster]

You will find cross-browser problems with negative margin-left -- unfortunately IE is quite crippled here.

Also a factor of note: most browsers have a default POSITIVE margin-left of some size for <li> So using -20px will not move the list item 20px to the left, it will move it 20px to the left of 0, which is already left of where the default position was.

So -20px (when it works) will create a hanging indent, out to the left of the rest of the content. You may just want to use 0 or 5px, instead of the larger default margin.

[RegGFX]

WOW -- THANKS FOR THE CORRECT STYLE INFO to control Margins in regualr UL Lists and the Tip about Lists info in other browsers.

**** HOWEVER i now have another problem ******

1)PROBLEM**
HOW Can i control the margins when using DL type lists?
for example,
When using DL.... how do i control the margins as you do with regular lists?

The code below.... does not work... or the margin does not decrease

<style>
DD.specialmargin DT {
margin-left: -20px;
}
</style>

<DL>
<DT>Definition Term One
<DD class="specialmargin">Definition Description One Definition Description One Definition Description One
<DT>Definition Term Two
<DD>Definition Description Two
<DT>Definition Term Three
<DD>Definition Description Three
</DL>

***********
Please someone advise on how to control the margins in DL type lists.

Thanks
RegGFX
please RSVP ASAP

[choster]

RegGFX, <dt> elements should not be inside <dd> elements, or vice versa. You should also make a habit of closing list items, otherwise your browser may get confused while calculating the cascade.

As for setting the margin, a definition list would be no different from the ordered list.

<style type="text/css">
.specialmargin {margin-left:0}
</style>

<dl>
<dt>First term</dt>
<dd class="specialmargin">Definition of first term</dd>
<dt>Second term</dt>
<dd>Definition of second term</dd>
</dl>