Position of Images in CSS Bulleted Lists

message from Chris $Hunt$ on 25 Jul 2004

I created a css style that uses an image as a bullet. Dreamweaver MX doesn't
display the image in Design View but it shows up in the browser. The problem
is that the image is not aligning with the text properly. It's a little
high. It's 20 px x 20 px. As an experiment I made it 50 px high adding space
at the top. But this had no effect upon the rendering of the image. Despite
the different image size it rendered the same. How can I get my image to
line up with the text. Is there a way to get Dreamweaver to show the CSS
style correctly in design view?

Thanks,

Chris (Hunt)

PS First Posted 22 July 2004

trx replied to Chris $Hunt$ on 24 Jul 2004

If you need precise placement of your image (especially cross-browser),
there is really no good way to get it using list-style-image. Instead of
struggling with that method, use your bullet image as a *background* image
on <li>. That way you can use left padding and background-image position to
put it exactly where you want it. Here is a link that will give you a very
clear example with css:

http://css.maxdesign.com.au/listamatic/vertical05.htm

Chris $Hunt$ replied to trx on 25 Jul 2004

Thanks trx,

That's a great link.

Chris

"trx" <jimpm@rmthscfw.com> wrote in message
news:uxonv3u48l53$.4v23ewlipfy3.dlg@40tude.net...

Archived message: Position of Images in CSS Bulleted Lists (Macromedia Dreamweaver)