9 replies [Last post]
blakems
blakems's picture
Offline
Enthusiast
UTah, USA
Last seen: 11 years 37 weeks ago
UTah, USA
Timezone: GMT-7
Joined: 2003-04-07
Posts: 60
Points: 0

When making an unordered list and displaying the <li> inline. it adds a space inbetween each list item unless in the code you put all of the <li> on one line. (eg: <li>one</li><li>two</li><li>three</li> )

Does anyone know if there is a way around that without having to code the <li>s on one line, so they display without the extra space between them.

-bMs-
http//www.blakems.com !important;

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 21 hours 11 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5151
Points: 2749

tamming lists

Hi Blakems,
This might not be exactly what you want, Taming Lists
it should help and is a good article well worth a read.

blakems
blakems's picture
Offline
Enthusiast
UTah, USA
Last seen: 11 years 37 weeks ago
UTah, USA
Timezone: GMT-7
Joined: 2003-04-07
Posts: 60
Points: 0

unordered list spacing

no it is not. I have read the article and it is very useful but is doesn't address the issue. if you even look at zeldmans' code you will notice he put all of his <li>s on one line to avoid the problem. I was just wondering if there is way around that.

-bMs-
http//www.blakems.com !important;

dJomp
dJomp's picture
Offline
Enthusiast
York, England
Last seen: 11 years 39 weeks ago
York, England
Joined: 2003-03-23
Posts: 422
Points: 0

unordered list spacing

AFAIK this is a HTML issue, some browsers interpret any whitespace in the html source as a single space. Obviously whitespace includes the newline...

I've seen this style around:

<li
>blah</li><li
>blah</li>

Never tried it myself, basically the newline is wrapped in the <li> tag so it won't be printed.

Don't think it'll help with curing the problem but there's a bit of an explanation.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 7 years 28 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

unordered list spacing

You could work around the issue by using a negative value for the margin-left style property of the list items, and hence bringing them together.

li {margin-left:-4px}

Whether or not this is appropriate for your site will depend on what specifically you're trying to achieve. Let us all know what you end up doing!

potatoe
Offline
Regular
USA
Last seen: 11 years 39 weeks ago
USA
Joined: 2003-03-24
Posts: 12
Points: 0

unordered list spacing

Okay this is untested, but would it possibly work to say:

ul { display: none; }
ul li { display: inline; }

...thus not displaying the white spaces that fall outside the <li>s?

cheers

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 7 years 28 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

unordered list spacing

Creative approach, but unfortunately setting the display property on the list element to none will prevent it, and all of its list item children, from being displayed.

dJomp
dJomp's picture
Offline
Enthusiast
York, England
Last seen: 11 years 39 weeks ago
York, England
Joined: 2003-03-23
Posts: 422
Points: 0

unordered list spacing

Sven wrote:
li {margin-left:-4px}

Acceptable, but then you've GOT to seperate them on new lines... and pray that each browser renders the space at the given px width.

Although there's no all-round good solution.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Anonymous
Anonymous's picture
Guru

unordered list spacing

The problem is if you code all instances of <li> on one line it will it will work fine, but if you code each <li> on a different li it puts spaces between them when rendered. I think it is hopeless.

blakems
blakems's picture
Offline
Enthusiast
UTah, USA
Last seen: 11 years 37 weeks ago
UTah, USA
Timezone: GMT-7
Joined: 2003-04-07
Posts: 60
Points: 0

unordered list spacing

I actually found a fix. I just added float: left; to the definition and that fixed the problem. I still define it as display : inline also; so

-bMs-
http//www.blakems.com !important;