set offest from <ul> tag

Discussion in 'CSS' started by bandito40, Nov 4, 2008.

  1. #1
    Hi,

    I was wondering how to go about changing the horizontal offset that the <li> element is from the <ul> element to make a list more compact.

    For example:

    The list look is:
    list
    * one
    * two

    but if the offset can be changed the list would look as so:
    list
    * one
    * two

    Making it more compact.
     
    bandito40, Nov 4, 2008 IP
  2. BrandonGregory

    BrandonGregory Peon

    Messages:
    28
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The forum formatting removed your spaces, but I'm assuming you mean the indentation on the left side. The indentation is actually on the ul tag, not the li. I forget which uses which, but Firefox and IE use different settings for this indentation--one uses margin, and the other uses padding. So what you'll have to do is set both of them, like so:

    padding-left: 0px;
    margin-left: 2em;

    If you set the margin to 0, the bullet will actually float off to the left of where the border is, so use 1 or 2 em to get it close to the edge.
     
    BrandonGregory, Nov 4, 2008 IP
  3. bandito40

    bandito40 Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks you very much. I fiddle around with padding and margin but never got it right.

    Works now.
     
    bandito40, Nov 4, 2008 IP