how do i position ul bullets using css?

ul css image replacement positioning of bullet images

[andylepp]

I'm trying to mimic a print layout that my boss has created. I'm using css to insert images for the unordered list bullets, but they are not in the position I'd prefer.

How do I position them to the pixel within the css for the <li> element?

This is my css:

ul { 
display:inline;
}
li {
line-height:1.5em;
font-size: 10px;
clear:both;
height: 7em;
margin-bottom:2em;
list-style-position: outside;
}
li em {
font-size: 12px;
font-style:normal;
font-weight:bold;
color: #cc0000;
}
#marketing{ list-style-image:url('images/marketing.gif'); }
#artwork{ list-style-image:url('images/artwork.gif'); }
#digiprint{ list-style-image:url('images/digiprint.gif'); }
#largeformat{ list-style-image:url('images/largeformat.gif'); }
#signage{ list-style-image:url('images/signage.gif'); }
#newmedia{ list-style-image:url('images/newmedia.gif'); }
#display{ list-style-image:url('images/display.gif'); }

This is my html:

<ul>
<li id="marketing"><em>B2B Services</em><br>
Brand Design and Maintenance, Corporate Identity, Campaign Management, Direct Mail</li>
<li id="artwork"><em>Design</em><br>
Graphic Design, Artwork</li>
<li id="digiprint"><em>24 Hour Digital Print</em><br>
Print on Demand, Catalogues/Price Lists, Leaflets/Flyers, Stationery, Labels, Posters</li>
<li id="largeformat"><em>Large Format Print</em><br>
Internal/External Banners, Digital Wallpaper, Window Contra Vision, Canvas Prints, Mounted Prints</li>
<li id="signage"><em>Signage</em><br>
Corporate, Informative and Directional, Retail, Window Graphics, Vehicle Decals, Full Vehicle Wraps</li>
<li id="newmedia"><em>New Media</em><br>
Web Sites, Instructional Animation, Presentations, CD-ROMs, CD Duplication, Interactive Catalogues</li>
<li id="display"><em>Portable Display</em><br>
Rollups, Popups, Banner Stands, Room Dividers, Event Banners, Popup Flags</li>
</ul>

[snip]

[edited by: createErrorMsg at 3:28 pm (utc) on Sep. 20, 2005]
[edit reason] No urls, please. See forum charter. [/edit]

[createErrorMsg]

When the browser places a bullet image, it creates a marker box outside of the element and places it there. The size of this marker box is largely determined by the line-height of the element, the size of the bullet image, and the left padding (or margin, depending on which browser it is) on the LI. These three factors combined make for very shoddy control over the exact position of a bullet brought into a list via the list-style-image property.

An approach that affords more control is to style away the bullets, padding and margins altogether, apply your image as a background on the LI, and position it via the background-position property....

ul, li{
margin:0;
padding:0;
list-style-type:none;
}
li{
background:url(myBullet.gif) left top no-repeat;
padding:10px;
}

In the above, replace LEFT with the pixel position in from the left edge, TOP with the pixel position down from the top edge, and the LI's padding with the width of the image being used. Note that if you replace "top" with "center" it will center vertically within the line-height of the LI.

cEM

[xfinx]

<oops>
upper reply is better..

[edited by: createErrorMsg at 4:41 pm (utc) on Sep. 20, 2005]
[edit reason] language [/edit]

[Alquesm]

I had the exact same problem. I wanted to position my list-style-image precisely, and the solution createErrorMsg posted worked perfectly!

Thanks alot! :)