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

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

helpplease

09-06-2002, 12:13 AM

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:
    *blah, blah
      blah,blah
    *blah, blah
      blah,blah
    *blah, blah
      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
  blah,blah
*blah,blah
  blah,blah
*blah,blah
  blah,blah

HELP PLEASE!!! :confused:

hairynugs6382

09-06-2002, 12:34 AM

try this

<html>
<head>
<style>
li {position:absolute; left:1;}
</style>
</head>
<body>
<ul>
<li>blah
</ul>
</body>
</html>

hope it helps!!

helpplease

09-06-2002, 12:39 AM

Didn't really want to bother with absolute positioning, since that is relative to the whole page.
Thanks though.
Any other ideas??? :confused:

Nightfire

09-06-2002, 12:46 AM

It's either

ul{
margin:6px;
}

or

ul{
text-indent:6px;
}

Not used this for a while

realisis

09-06-2002, 11:04 AM

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.

brothercake

09-06-2002, 11:42 AM

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

msimmons

09-06-2002, 04:20 PM

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

helpplease

09-06-2002, 07:53 PM

Thanks everyone. That was very helpful and I probably will just use two "nbsp"'s to align the second row up.

:thumbsup:

Deanna475

01-29-2003, 08:17 AM

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:

http://tig.brwebdesign.com/misc/css_text_indent.gif

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! :thumbsup:

meow

01-29-2003, 08:39 AM

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.

Deanna475

01-29-2003, 09:49 AM

Hi M. I did as you suggested and now my lists will look good in Moz, too! :D