Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Space between bullet and text

Status
Not open for further replies.
AndyGroom

AndyGroom

Programmer
May 23, 2001
972
GB
Is there a style setting that I can add to the code below to adjust the space between a bullet point and the text associated with it?

Code: 
UL.STEPS { margin-left: 16px; margin-bottom: 7px; list-style-type: square; }
LI.STEPS { margin-bottom: 4px; }

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Sort by date Sort by votes
Yes but it didn't seem to make any difference. Adding padding-left to the UL tag just indented the bullet point further from the left margin, and adding padding-left to the LI tag had no effect on anything.

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Upvote 0 Downvote
I'm guessing you're doing something wrong then, because adjusting the LIs padding-left works fine for me in IE6 and Fx 3:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] dir="ltr" lang="en-US">
<head profile="[URL unfurl="true"]http://gmpg.org/xfn/11">[/URL]
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-language" content="en" />
	<title>Test</title>

	<style type="text/css">
		html, body {
			padding: 0px;
			margin: 0px;
		}

		ul {
			margin-left: 16px;
			margin-bottom: 7px;
			list-style-type: square;
		}
		li {
			margin-bottom: 4px;
		}

		ul.moreSpace li {
			padding-left: 50px;
		}
	</style>
</head>

<body>
	<ul>
		<li>List item 1</li>
		<li>List item 2</li>
		<li>List item 3</li>
	</ul>

	<br />

	<ul class="moreSpace">
		<li>List item 1</li>
		<li>List item 2</li>
		<li>List item 3</li>
	</ul>
</body>
</html>

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Thanks for your example.

You're right to say that you can move the text even further away from the bullet-point by setting padding-left, but ideally I wanted to move the text closer.

So, for your first three bullet points where the gap is about 10px between the bullet-point and the word 'List' I would like to close up that gap.

- Andy
___________________________________________________________________
If you think nobody cares you're alive, try missing a couple of mortgage payments
 
Upvote 0 Downvote
ideally I wanted to move the text closer.
Click to expand...

Ideally you could have mentioned that in your first post!

There is a proposed CSS 3 property, "marker-offset" for use with lists, but I don't think that it has wide (if any) support right now.

In fact, the property was moved from the CSS 2 spec to the CSS 3 spec, so perhaps it was deemed less important? Who knows!

I think your best bet would be to set "list-style-type" to "none", insert a background image at the top-left (or top-middle) of your LIs, and adjust the padding-left or text-indent accordingly (you would adjust the former to emulate a "list-style-position" of "outside" and the latter for "inside").

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
821
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
228
lmcate
lmcate
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
699
PeDa
PeDa
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
265
jjgupta915
jjgupta915
coldbohemia
  • Locked
  • Question
I'm inserting a text file into a we
Replies
2
Views
185
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top