Why is my list-style-image not displaying?

[Roy Smith]

Be kind to me, I'm a CSS newbie...

I've been playing with drupal, building a web site (hyc-test.org). I
started with the "sky" theme, but didn't like the way it rendered list
items in menus.

Spcifically, it started with:

list-style-image: url(../../misc/menu-expanded.png);

in one of the early style sheets, and then overridden with

list-style-image:none

I went into this later style sheet and got rid of the list-style-image
attributes, assuming the earlier list-style-image specification would get
inherited.

The problem is, the images still don't get rendered. You can see this if
you go to http://hyc-test.org/. I tried both Firefox and Safari, with the
same result.

The real mystery is that if I examine the list item with Firefox's DOM
Inspector, under the Computed Style page, it shows list-style-image as
"url(http://hyc-test.org/misc/menu-leaf.png)". If I watch with a packet
sniffer while the page loads, I can see the browser do a GET for that URL,
and can see the "200 OK" response come back. Clearing the browser cache
has no effect; still no image gets rendered for the list items.

I'm stumped. What's going on here?

[dorayme]

In article <ro***********************@news.panix.com>,
Roy Smith <ro*@panix.comwrote:

Be kind to me, I'm a CSS newbie...

I've been playing with drupal, building a web site (hyc-test.org). I
started with the "sky" theme, but didn't like the way it rendered list
items in menus.

Spcifically, it started with:

list-style-image: url(../../misc/menu-expanded.png);

in one of the early style sheets, and then overridden with

list-style-image:none

I went into this later style sheet and got rid of the list-style-image
attributes, assuming the earlier list-style-image specification would get
inherited.

The problem is, the images still don't get rendered. You can see this if
you go to http://hyc-test.org/. I tried both Firefox and Safari, with the
same result.

The real mystery is that if I examine the list item with Firefox's DOM
Inspector, under the Computed Style page, it shows list-style-image as
"url(http://hyc-test.org/misc/menu-leaf.png)". If I watch with a packet
sniffer while the page loads, I can see the browser do a GET for that URL,
and can see the "200 OK" response come back. Clearing the browser cache
has no effect; still no image gets rendered for the list items.

I'm stumped. What's going on here?

It would be so nice if more urls that were put up here at least
validated, neither the html nor the css do. At least you provided
a url!

Have you seen the leaf bullet image that it is you will be
getting if you can make it fetch it? It does not look to me much
different to the available circle in standard CSS. You can start
tracking down the specific trouble by getting rid of all your css
and putting in the list items an inline style calling for that
leaf image... but convince me it is worth it?

--
dorayme

[Roy Smith]

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

In article <ro***********************@news.panix.com>,
Roy Smith <ro*@panix.comwrote:

Be kind to me, I'm a CSS newbie...

I've been playing with drupal, building a web site (hyc-test.org). I
started with the "sky" theme, but didn't like the way it rendered list
items in menus.

Spcifically, it started with:

list-style-image: url(../../misc/menu-expanded.png);

in one of the early style sheets, and then overridden with

list-style-image:none

I went into this later style sheet and got rid of the list-style-image
attributes, assuming the earlier list-style-image specification would get
inherited.

The problem is, the images still don't get rendered. You can see this if
you go to http://hyc-test.org/. I tried both Firefox and Safari, with the
same result.

The real mystery is that if I examine the list item with Firefox's DOM
Inspector, under the Computed Style page, it shows list-style-image as
"url(http://hyc-test.org/misc/menu-leaf.png)". If I watch with a packet
sniffer while the page loads, I can see the browser do a GET for that URL,
and can see the "200 OK" response come back. Clearing the browser cache
has no effect; still no image gets rendered for the list items.

I'm stumped. What's going on here?

It would be so nice if more urls that were put up here at least
validated, neither the html nor the css do. At least you provided
a url!

You're right. Sorry. I fixed up all the HTML botches I could and got it
to validate except for one HTML issue I can't do anything about, but which
couldn't possible be the cause of this. Still no images :-(

Have you seen the leaf bullet image that it is you will be
getting if you can make it fetch it? It does not look to me much
different to the available circle in standard CSS. You can start
tracking down the specific trouble by getting rid of all your css
and putting in the list items an inline style calling for that
leaf image... but convince me it is worth it?

Is what worth it? Is having the specific images worth it vs. having the
default ones? Yes. The leaf image (circle) isn't so different from the
stock one, but the expanded and collapsed (left and down pointing arrows)
images are.

But, at this point, I'm beyond the practical issues of what the actual
images are. I'm trying to understand *why* this is not working. I don't
like things I don't understand.

[dorayme]

In article <ro***********************@news.panix.com>,
Roy Smith <ro*@panix.comwrote:

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

In article <ro***********************@news.panix.com>,
Roy Smith <ro*@panix.comwrote:

Be kind to me, I'm a CSS newbie...
>
I've been playing with drupal, building a web site (hyc-test.org). I
started with the "sky" theme, but didn't like the way it rendered list
items in menus.
>
Spcifically, it started with:
>
list-style-image: url(../../misc/menu-expanded.png);
>
in one of the early style sheets, and then overridden with
>
list-style-image:none
>
I went into this later style sheet and got rid of the list-style-image
attributes, assuming the earlier list-style-image specification would get
inherited.
>
The problem is, the images still don't get rendered. You can see this if
you go to http://hyc-test.org/. I tried both Firefox and Safari, with
the
same result.
>
The real mystery is that if I examine the list item with Firefox's DOM
Inspector, under the Computed Style page, it shows list-style-image as
"url(http://hyc-test.org/misc/menu-leaf.png)". If I watch with a packet
sniffer while the page loads, I can see the browser do a GET for that
URL,
and can see the "200 OK" response come back. Clearing the browser cache
has no effect; still no image gets rendered for the list items.
>
I'm stumped. What's going on here?

It would be so nice if more urls that were put up here at least
validated, neither the html nor the css do. At least you provided
a url!

You're right. Sorry. I fixed up all the HTML botches I could and got it
to validate except for one HTML issue I can't do anything about, but which
couldn't possible be the cause of this. Still no images :-(

Have you seen the leaf bullet image that it is you will be
getting if you can make it fetch it? It does not look to me much
different to the available circle in standard CSS. You can start
tracking down the specific trouble by getting rid of all your css
and putting in the list items an inline style calling for that
leaf image... but convince me it is worth it?

Is what worth it? Is having the specific images worth it vs. having the
default ones? Yes. The leaf image (circle) isn't so different from the
stock one, but the expanded and collapsed (left and down pointing arrows)
images are.

But, at this point, I'm beyond the practical issues of what the actual
images are. I'm trying to understand *why* this is not working. I don't
like things I don't understand.

Fair enough, I do understand. But if you did track it down (it
might be as simple as something over ruling the list style or -
something always to watch for with bullets - are they off to the
left where you cannot see them because you have zeroed the
margins (look at your own adjustments, especially your dangerous
"* {margin: 0;}".

I really cannot see how you can live with, troubleshoot and
maintain such a complicated set of css sheets. It is easy to
bypass all and get your "leaf" bullets. But that is not what you
want. Perhaps someone will sort through your markup and css?

Have you tried this, turn all the css off. The whole lot. And put
in a bit of styling to see for yourself the special images?

--
dorayme

[Roy Smith]

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

Fair enough, I do understand. But if you did track it down (it
might be as simple as something over ruling the list style or -
something always to watch for with bullets - are they off to the
left where you cannot see them because you have zeroed the
margins (look at your own adjustments, especially your dangerous
"* {margin: 0;}".

Hmmm. It would appear this is indeed the problem. I don't fully
understand how margins work, but I've got another guy here who also
suspected the same thing, and when he over-rode the margins, the images did
show up. Now I just need to study up on exactly how margins work. Thanks
for getting me going in the right direction.

I really cannot see how you can live with, troubleshoot and
maintain such a complicated set of css sheets.

I inherited the style sheet. I'm just trying to tweak it.

Thanks again!

[rf]

"Roy Smith" <ro*@panix.comwrote in message
news:ro***********************@news.panix.com...

In article

I inherited the style sheet. I'm just trying to tweak it.

Unlucky.

I had a quick glance at your source and suddenly found something more
interesting elsewhere.

However, consider the relative path you are using to get to the images. The
path you specify in an external css file is relative to *that* css file, not
the html file that includes that css file. Get rid of all the drupal stuff
and cut it down to three or four line css and html files. That is, start
from the simplest you can, just to prove you can obtain the image.

Doesn't explain the 200 though, should be a 404.

--
Richard.