Controlling Distance of Bullets from List items?

Hi there, I'm trying to blend an adsense unit into the area just under a list of related articles on my blog and am trying to even match the bullet point next to the list items, placing it next to the adsense ad. (I'm trying to find out if thats legal or not with google, but just ignore that point for now).

My question is this: how do you specify the distance that the bullets are supposed to be from the list items they are associated with?

I had my distance and spacing all set so my bullet image and ad blended perfectly with the related articles links.....in firefox. But in IE the bullets were a lot closer to the list items so it looked terrible. How on earth do i get the bullets to be the same distance from the list items in IE as in Firefox?

 

Yeah FF and IE both interprate margin and padding diffrently.

You can make use this method to adjust just FF alone.

html>body put id or class here.

This is a bit of CSS from one of my sites. The first bit is the main styles for the id and then the second bit is the bit that only effects FF.

#leftnav {
      float: left;
      width: 130px;
      margin-top: 10px;
      margin-left: 5px;
      padding-top: 1em;	  
}

html>body #leftnav {
      padding-left: 5px;
	}

HTML:

Hope that helps.

 

So the gap between a list item and the bullet to the left of it is just a padding/margin issue?

 

Actually, the left margin and left padding control the indent of the list as a whole. The spacing from the bullet to the list item is determined by the browser and is not directly controllable.

What you can do is make the bullet a background image. Set the spacing by varying the left padding on the list item. For example;

li {
    padding-left: 20px;
    background: url(bull.jpg) top left no-repeat;
    }

Code (markup):

where bull.jpg is the image of the desired bullet.

cheers,

gary

 

What kk5st said. You may use spacing around the bullet list rather than just one padding left with bullet image, use padding:5px; or padding: 5 10px 10px 5px; (edit your own numbers)