SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: css list

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css list

    Hi

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

    HTML

    HTML Code:
    <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

    Code:
    .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

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code HTML4Strict:
    <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>
    Code CSS:
    .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.)
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

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

    Thanks

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    625
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    try this for diferent pading for diferent li's

    Code:
    <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>
    Code:
    .first{
    padding-left:10px;
    }
    .second{
    padding-left:15px;
    }
    vineet

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi AutisticCuckoo

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

    Thanks for your help!!!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by skeej View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •