Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is there a way to get rid of the indent on an <ul> in CSS?

    Hi...
    <ul> tags always seem to bumb the <li>'s to the right when they are scripted, so it ends up looking like this.... compared to the rest of the text:
    &nbsp;&nbsp;&nbsp;&nbsp;*blah, blah
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;blah,blah
    &nbsp;&nbsp;&nbsp;&nbsp;*blah, blah
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;blah,blah
    &nbsp;&nbsp;&nbsp;&nbsp;*blah, blah
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;blah,blah

    Is there any way to get rid of that left indent, so it's flush with the rest of the text? I've tried just using the <li> tag without the <ul> tag and then it looks like this:
    *blah,blah
    blah,blah
    *blah,blah
    blah,blah
    *blah,blah
    blah,blah
    And I want it to look like this:
    *blah,blah
    &nbsp;&nbsp;blah,blah
    *blah,blah
    &nbsp;&nbsp;blah,blah
    *blah,blah
    &nbsp;&nbsp;blah,blah

    HELP PLEASE!!!
    Last edited by helpplease; 09-06-2002 at 01:16 AM.

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    Sacramento, California
    Posts
    132
    Thanks
    0
    Thanked 0 Times in 0 Posts

    try this

    try this
    Code:
    <html>
    <head>
    <style>
    li {position:absolute; left:1;}
    </style>
    </head>
    <body>
    <ul>
    <li>blah
    </ul>
    </body>
    </html>
    hope it helps!!
    Hairynugs


    Simple is best.

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Didn't really want to bother with absolute positioning, since that is relative to the whole page.
    Thanks though.
    Any other ideas???

  • #4
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    It's either

    ul{
    margin:6px;
    }

    or

    ul{
    text-indent:6px;
    }

    Not used this for a while

  • #5
    Regular Coder
    Join Date
    Sep 2002
    Location
    self.location
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    actually, you can eliminate the indent with pure HTML, you don't need styles...

    Simply omit the outer <ul> tags, and go staight to the <li> tags

    The list items can still have that bullet (if desired), but they will align flush left.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by realisis
    Simply omit the outer <ul> tags, and go staight to the <li> tags
    The problem with that is that wrapping lines will not be indented to the edge of the bullet, they will wrap to the beginning of the line, which doesn't look very good.

    The short answer is no - there are CSS3 properties for controlling the indentation of UL tags, but as far I know no browser yet supports them

  • #7
    New Coder
    Join Date
    Jul 2002
    Location
    Houston, TX
    Posts
    84
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I had this same problem recently and my solution was not a pretty one... I resorted to a table. I put the <li> in one cell and the text in another for each row.
    Michael

  • #8
    New Coder
    Join Date
    Jul 2002
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks everyone. That was very helpful and I probably will just use two "nbsp"'s to align the second row up.


  • #9
    Regular Coder
    Join Date
    Jul 2002
    Location
    Ontario, Canada
    Posts
    104
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was looking for this question and am glad someone took a stab at it. From what I read, no one really implemented Nightfire's suggestion and I can tell you that it works! Here is how I applied what he suggested:

    Added this to my style sheet:

    ul.square {list-style-type:square; color:#494535; margin:14px}

    Incorporated this into my document:

    <DIV CLASS=body2>The HTML code for the following page layouts are provided under the Accessories tab in the menu.</DIV>

    <DIV CLASS=body2><UL CLASS="square">
    <LI>Page layout as you see it now without the iFrame
    <LI>Page layout without a border between the columns
    <LI>Page layout using a column as the ever-popular left border
    <LI>Page layout using a border across the entire width of the top of the page with the columns beneath it
    </UL></DIV>


    Resulted in:



    Which is exactly what I wanted it to do.

    It's important to note that if you use too small a margin indent, you won't see the bullets or only part of the bullets. Be sure to give yourself enough margin room to accommodate the bullets and the rest is easy.

    Thanks Nightfire!
    Last edited by Deanna475; 01-29-2003 at 09:22 AM.

  • #10
    Regular Coder
    Join Date
    Jan 2003
    Posts
    680
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Deanna, you may want to add 'padding: 0' (or close) to that rule or it won't look as you want in Moz.

    Different browsers style lists differently so when fooling around with them it's always a good idea to control both margins and padding.
    (o<
    //\ &nbsp; &nbsp; &nbsp; =^..^=
    &nbsp; &nbsp; $!

  • #11
    Regular Coder
    Join Date
    Jul 2002
    Location
    Ontario, Canada
    Posts
    104
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi M. I did as you suggested and now my lists will look good in Moz, too!


  •  

    Posting Permissions

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