Space around <li> tags... - GoFuckYourself.com

Voodoo · 09-09-2009, 09:03 PM

I had a link a while back that told how to get rid of the space around the [li] tags in CSS. Can't seem to find it now. Anyone know how?

FlexxAeon · 09-09-2009, 09:07 PM

Code:

ul li { margin: 0; }

or it might be padding i can't remember. try both

Voodoo · 09-09-2009, 09:09 PM

Quote:

Originally Posted by FlexxAeon

Code:

ul li { margin: 0; }

or it might be padding i can't remember. try both

Yeah, I use:

Code:

*{margin:0px;padding:0px;}

At the top, but have also tried it on the actual element. The padding is still there. ;-/

Darkland · 09-09-2009, 09:22 PM

Code:

<ul style="margin: 0;">
  <li>knklnlkn</li>
  <li>lknlonln</li>
</ul>

That what you are looking for?

FlexxAeon · 09-09-2009, 09:26 PM

Quote:

Originally Posted by Darkland

Code:

<ul style="margin: 0;">
  <li>knklnlkn</li>
  <li>lknlonln</li>
</ul>

That what you are looking for?

wait do you put it on the ul? i'm blanking. dont make me open dreamweaver

ProG · 09-09-2009, 09:29 PM

What is inside the li?

If there is an image inside, try using li img { display: block; }

If there is only text and the padding is top & bottom adjust li { line-height: 1em; }

Or are you referring to bullet spacing?

ungratefulninja · 09-09-2009, 09:30 PM

Margin and padding do control the space inside and outside of the LI "box."

If you're wanting to control the space between the bullet point and the text then { text-indent: 0pt;} or something along those lines will do it.

Darkland · 09-09-2009, 09:31 PM

Quote:

Originally Posted by FlexxAeon

wait do you put it on the ul? i'm blanking. dont make me open dreamweaver

Worked for me...

TheSenator · 09-09-2009, 09:35 PM

Your gonna have to ask a CSS expert.

There is a short hand way of doing this that will work for IE and FIreFox.

Im looking for a mod done to my WordPress theme that a CSS expert did for me. It was kinda of the same thing.

Basic_man · 09-09-2009, 09:39 PM

Quote:

Originally Posted by TheSenator

Your gonna have to ask a CSS expert.

There is a short hand way of doing this that will work for IE and FIreFox.

Im looking for a mod done to my WordPress theme that a CSS expert did for me. It was kinda of the same thing.

Hit me up on ICQ (349-164-75) if you need a CSS mod done

FlexxAeon · 09-09-2009, 09:43 PM

Quote:

Originally Posted by Darkland

Worked for me...

sigh.. had to open the dreamweaver

you're right but padding gets rid of the "indentation" while margin gets rid of the space between the ul and the li

so to get rid of all space it would be

Code:

<ul style="margin: 0; padding: 0;">
  <li>knklnlkn</li>
  <li>lknlonln</li>
</ul>

no css expert necessary

Lycanthrope · 09-09-2009, 10:06 PM

You will alleviate a lot of aggravation by one simple change when you are first zeroing things out:

change

Code:

* {margin:0px; padding:0px;}

to

Code:

* {margin:0; padding:0;}

ProG · 09-09-2009, 10:19 PM

0 and 0px are the same thing - that is strictly a preference and makes no difference.

http://www.w3.org/TR/CSS2/syndata.html#length-units

Quote:

The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.

Miguel T · 09-09-2009, 10:54 PM

ul { margin: 0; padding: 0}
ul li { display: block; width: 100%; }

Test that out.

09-09-2009, 09:03 PM	#1
Voodoo ♥ ♦ ♣ ♠ Industry Role: Join Date: Sep 2002 Location: Porn Valley, CA Posts: 10,590	Space around <li> tags... I had a link a while back that told how to get rid of the space around the [li] tags in CSS. Can't seem to find it now. Anyone know how? __________________ "I'm selflessly supporting the common good, but only coincidentally looking out for No.1."

09-09-2009, 09:07 PM	#2
FlexxAeon Confirmed User Industry Role: Join Date: May 2003 Posts: 3,765	Code: ul li { margin: 0; } or it might be padding i can't remember. try both __________________ flexx [dot] aeon [at] gmail Last edited by FlexxAeon; 09-09-2009 at 09:08 PM..

09-09-2009, 09:22 PM	#4
Darkland Confirmed User Join Date: May 2002 Posts: 1,488	Code: <ul style="margin: 0;"> <li>knklnlkn</li> <li>lknlonln</li> </ul> That what you are looking for? __________________ "The towers are gone now, reduced to bloody rubble, along with all hopes for Peace in Our Time, in the United States or any other country. Make no mistake about it: We are At War now -- with somebody -- and we will stay At War with that mysterious Enemy for the rest of our lives." H.S.T. 09/12/01

09-09-2009, 09:29 PM	#6
ProG Confirmed User Join Date: Apr 2009 Posts: 1,319	What is inside the li? If there is an image inside, try using li img { display: block; } If there is only text and the padding is top & bottom adjust li { line-height: 1em; } Or are you referring to bullet spacing? __________________ History will be kind to me for I intend to write it.

09-09-2009, 09:35 PM	#9
TheSenator Too lazy to set a custom title Industry Role: Join Date: Feb 2003 Location: NJ Posts: 13,331	Your gonna have to ask a CSS expert. There is a short hand way of doing this that will work for IE and FIreFox. Im looking for a mod done to my WordPress theme that a CSS expert did for me. It was kinda of the same thing. __________________ ISeekGirls.com since 2005

09-09-2009, 09:30 PM	#7
ungratefulninja Confirmed User Join Date: Apr 2006 Posts: 682	Margin and padding do control the space inside and outside of the LI "box." If you're wanting to control the space between the bullet point and the text then { text-indent: 0pt;} or something along those lines will do it.

09-09-2009, 10:06 PM	#12
Lycanthrope Confirmed User Industry Role: Join Date: Jan 2004 Location: Wisconsin Posts: 4,517	You will alleviate a lot of aggravation by one simple change when you are first zeroing things out: change Code: * {margin:0px; padding:0px;} to Code: * {margin:0; padding:0;} __________________

09-09-2009, 10:54 PM	#14
Miguel T ♦ Web Developer ♦ Industry Role: Join Date: May 2005 Location: Full-Stack Developer Posts: 12,469	ul { margin: 0; padding: 0} ul li { display: block; width: 100%; } Test that out. __________________ Full Stack Webdeveloper: HTML5/CSS3, jQuery, AJAX, ElevatedX, NATS, MechBunny, Wordpress