image positioning and attributes for LI in CSS

[chiyo]

recently playing around with using an image for <LI> (bullet points) via CSS.

First Problem is I cant find how to "align" or "position" the image, resulting in the bullet point image always being aligned at the top of the <LI> - does not look right.

At the moment I'm using

LI { text-align : left;
padding-bottom : 7px;
list-style : url(../images/li.gif);
}
IS there anyway I can extend that image declaration to include attributes such as width, height and align as you could in HTML? Or even to center the image with the bullet text? I though always specifying width and height attributes was more of less essential for page loading times?

Second problem.. I hear that the URL above should be absolute rather than relative, as (some?) Netscape browsers interpret the url as relative to the page the CSS is used in rather than the location of the "css file"

Would I be better off using the virtual url e.g. "ht*p://www.***.com/images/li.gif" or, as suggested by my source the server path "usr/web/images/li.gif"

Thanks very much.

[tedster]

The positioning of the image in a list-style is tricky. I tweak the image itself, adding or removing "padding" in Photoshop, until it sits where I want it to next to each bullet point.

You may be right about the URL being read incorrectly in some browsers. I put my css file in the directory where the HTML lives, so couldn't say. Certainly a full absolute URL should be trouble-free. The only problems might come with a relative URL.

I've never heard of using the true server path instead of the virtual path - why does your source recommend this?

[Nick_W]

The positioning of the image in a list-style is tricky. I tweak the image itself, adding or removing "padding" in Photoshop, until it sits where I want it to next to each bullet point

Yes, I've played with this for ages to no avail. THe only solution I came up with was as Tedster said.

The only problem comes when users resize their text or different browser/platforms have differing text defaults...

Nick

[chiyo]

sounds like a good work-around thanks both.

Will add a bit of transpararant "padding" to the image itself so it a least it is not flush against the borders.

Will also use the absolute URL as Tedster suggests.

any advice on height and width attributes?

I think i tried the bad guess:

url (images/li.gif width=8 height=8)

without success

[Nick_W]

any advice on height and width attributes?

Can't be doen as far as I know...

Nick

[chiyo]

Thanks Nick,

this seems to a major failing of CSS at present if it cannot attribute height and width attributes. Wouldnt that mean that page loading would be held up until the browser parses the size of the image by downloading it?

Tedster.. just looked back to find the recommendation on actually using the server path instead of the virtual URL and it came from the TopStyle CSS Editor help file in the tips section.

[Nick_W]

Wouldnt that mean that page loading would be held up until the browser parses the size of the image by downloading it?

No. This happens when you use tables as the browser has to deal with columns and rows etc.

With pure CSS layouts the text and images flow as the sheet is loaded. I never put hieght and widths on my images.. just needless code.

Nick

[chiyo]

Ah good point nick..

Yup we use tables for positioning, css for everything else. Still not enuff reason to move me to 100% CSS however in the near future however.