Heres a screenshot to make it clear. I'm trying to figure out a robust way of making the bullet images vertically aligned to my li content. As you can see my content is currently too high.
Many thanks 'over-flowers'...
+2
A:
You can use something like this in your css...
#content li{
list-style-image: url(../images/bullet.gif);
}
Galwegian
2008-10-20 09:16:25
thanks dude, that what I use already, ( should have posted CSS!). Bryn's method will hopefully allow me to tinker with the alignment a little more.
Pickledegg
2008-10-20 09:27:29
+6
A:
Well, some css code to see how you currently set your bullet images would be useful ;-)
Instead of actually setting the 'list-style-image' property, I've had far more consistent results with setting a background-image property for the li element. You can then control the positioning with pixel accuracy. Remember to set a suitable left-padding value to push your list item contents clear of the bullet image.
BrynJ
2008-10-20 09:18:42
i currenty use the method that Galwegian has shown. I'll give your '<li> with background image' method a whirl. Looks like I'll have more flexibilty lining up the image :)
Pickledegg
2008-10-20 09:26:12
I've never even used "list-style-image" because back when I started using CSS it was discouraged (Netscape 4) didn't support it properly. Even now that all browsers support it, I find the "background-image" approach far more useful.
savetheclocktower
2008-10-20 20:55:35
+2
A:
use background-image, for your li elements, add padding.
.box li{
padding-left: 20px;
background-image: url("img/list_icon.jpg");
background-repeat: no-repeat;
background-position: 0px 2px;
margin-top: 6px;
}
miceuz
2008-10-20 09:22:28
Pixel background positions are prone to produce problems. Instead, use relative qualifiers `center left`. Addionally, do you know the `background` property shortcut?
Konrad Rudolph
2008-10-20 09:30:06
yes i do know the shortcut, but i like my declarations verbose. pixel positioning addresses the very problem Pickledegg described - images are not nicely aligned vertically by default and design of the bullets may require pixel-level adjusting.
miceuz
2008-10-20 09:57:00
+2
A:
I like @bryn's answer. One example I've used successfully:
#content ul li {
margin: 3px -20px 3px 20px;
padding: 0 0 0 0;
list-style: none;
background: url(newbullet.gif) no-repeat 0 3px;
}
The negative right margin may or may not be needed in your case. You may need to adjust to meet your specific needs depending on your image. (My image is 14 x 15.) You must specifically set margins and padding if you want a similar look across browsers as Firefox and IE use different defaults for displaying bullets.
Traingamer
2008-10-20 15:14:39