List bullets horizontal spacing from text

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

List bullets horizontal spacing from text

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> List bullets horizontal spacing from text

Page: [1]

Starhugger

Posts: 521
Joined: 4/12/2005
Status: offline

List bullets horizontal spacing from text - 4/16/2006 1:12:14

I'm using an image for a list bullet. I'd like to increase the amount of horizontal space between the bullet image and the text. I can't seem to find any reference to doing this, either in my books or online.

Here's the CSS code I'm using:

ul {
 margin-left: 35px;
 }

li {
 list-style-image: url("images/bulletpink.jpg");
 }

The HTML is basic stuff:

<ul>
  <li>One</li>
  <li>Two </li>
  <li>Three</li>
</ul>

I've tried putting margin and padding attributes into the li definition, but nothing seems to change the space. I can't see a way to add a margin-right to the image URL.

Any ideas?

Starhugger


Kitka Posts: 2515 Joined: 1/31/2002 From: Australia Status: offline	RE: List bullets horizontal spacing from text - 4/16/2006 1:50:19 Hi Starhugger, I think this should do the trick: ul { list-style-image: url("images/bulletpink.jpg"); padding: 0; margin-left: 35px; } li { padding-left: 50px; } The 50px spacing is probably rather extreme, adjust to suit _____________________________ Kitka It is impossible to make anything foolproof because fools are so ingenious. (in reply to Starhugger)


Tailslide Posts: 6112 Joined: 5/10/2005 From: Out here on the raggedy edge Status: online	RE: List bullets horizontal spacing from text - 4/16/2006 3:57:47 You might have more luck using them as background images rather than list-style-image as background images are more reliable in the way they're interpreted by various browsers. li {list-style: none; margin: 0;} li a {background: url(../images/bulletpink.jpg) 50px 0 no-repeat ;text-decoration:none; border-bottom:none;padding:0 0 0 35px;} _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to Kitka)


Starhugger Posts: 521 Joined: 4/12/2005 Status: offline	RE: List bullets horizontal spacing from text - 4/16/2006 10:45:30 Thanks Kitka and Tailslide! Here's what I got to work: ul { list-style-image: url("images/bulletpink.jpg"); padding: 20px; margin-left: 20px; } li { padding-left: 10px; } I didn't try the background image approach. I wanted to see if I could get it to work more directly first. It seems to need both the padding and margin-left in the ul to be set to 20px to preserve the distance between the bullet and the left margin of the div (or whatever). The padding-left in the li is what distances the bullet from the text. Seems to work in both IE and FF. Thanks! Starhugger (Edited out duh factor.) (in reply to Tailslide)