List bullets horizontal spacing from text (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Starhugger -> 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 -> 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 [;)]



Tailslide -> 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;}



Starhugger -> 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.)



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875