css list

[skeej]

Hi

How can i give each <li> a different left padding but they need to be numbered as well??

HTML

<div class="inbrief02">
  <p>There are five different equipment types which require testing:</p>
  <ul>
    <li>Class 0 (equipment with a non earthed metal case).</li>
    <li>Class 01 (same as the above but the metal casing has an earth terminal but the cable is twin and the plug has no earth pin).</li>
    <li>Class 1 (equipment with earth protection for the metal casing and protection against shock).</li>
    <li>Class 2 double insulated (the live parts are encapsulated in supplementary insulation or reinforced insulation equivalent to double insulation).</li>
    <div id="test">
      <li>Class III (equipment that are supplied from a separate extra low voltage source SELV which will not exceed 50V).</li>
    </div>
  </ul>
</div>

CSS

.inbrief02 {
	width: 615px;
	padding: 0 0 0 185px;
}
.inbrief02 ul {
	font: normal 14px Arial, Helvetica, sans-serif;
	color: #4D4D4F;
	text-align: justify;
	margin: 0;
	padding: 0 0 10px 0;
}
.inbrief02 li {
	list-style: decimal outside;
	margin: 20px;
	padding: 0 0 0 0; 
}
#test {
	padding: 0 0 0 50px;
}

the problem im having is this only works in firefox and not IE??

Can someone help

Thanks

[AutisticCuckoo]

That's invalid markup! A <ul> cannot have a <div> as an immediate child. (You cannot wrap a <li> inside anything else.)

This seems to work, if I understand correctly what you are trying to achieve:

<div class="inbrief02">
  <p>There are five different equipment types which require testing:</p>
  <ul>
    <li>Class 0 (equipment with a non earthed metal case).</li>
    <li>Class 01 (same as the above but the metal casing has an earth terminal but the cable is twin and the plug has no earth pin).</li>
    <li>Class 1 (equipment with earth protection for the metal casing and protection against shock).</li>
    <li>Class 2 double insulated (the live parts are encapsulated in supplementary insulation or reinforced insulation equivalent to double insulation).</li>
    <li id="test">Class III (equipment that are supplied from a separate extra low voltage source SELV which will not exceed 50V).</li>
  </ul>
</div>

.inbrief02 li {
	list-style: decimal inside;
	margin: 20px;
	padding: 0 0 0 1.5em; 
	text-indent:-1.5em;
}

(The remainder of the CSS is unchanged from your original.)

[skeej]

Hi

Thanks thats fine i was thinking the samething but is it possible to give each <li> a different left padding??

Thanks

[AutisticCuckoo]

Well, the last one has a different left padding than the others. If that's not what you're trying to do, I'm afraid I don't understand.

You can assign IDs or classes to each <li> and set whatever paddings you want.

[vinpkl]

try this for diferent pading for diferent li's

<li class="first">Class 0 (equipment with a non earthed metal case).</li>
<li class="second">Class 01 (same as the above but the metal casing has an earth terminal but the cable is twin and the plug has no earth pin).</li>

.first{
padding-left:10px;
}
.second{
padding-left:15px;
}

vineet

[skeej]

hi AutisticCuckoo

works fine but is it possible to have list outside and not inside???

Thanks for your help!!!

[Paul O'B]

hi AutisticCuckoo

works fine but is it possible to have list outside and not inside???

Thanks for your help!!!

Yes just change it to outside and remove the text-indent.