Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

UL list-style-image not working

6 views
Skip to first unread message

Angelo

unread,
Apr 23, 2008, 3:08:53 PM4/23/08
to
Hi all,

I am having a very annoying problem when using an unordered list in my
aspx page. I set a UL style to use a custom image as the list style
image but it does not show in the screen. I have tried it in a couple
different ways but still no go. I have tried inline styles as well as
using a style sheet class but it just doesn't show the image on the
<li> element. The odd thing is that it will take the rest of the UL
style but just not the image.

SPECS:
Windows XP Pro SP2
IE 7
Firefox 2.x
ASP.NET 2.0

Here's the code I am using:

<asp:Content ...>
<!-- I do some binding to a dataset here that is unrelated to the
UL ... -->
<ul style="list-style-image:url('images/arrow.gif');list-style-
type:square;">
<li> test entry</li>
</ul>
</asp:Content>

This does not show my custom image but only shows the built-in square
list type. I know the image path is correct because I can do an <img>
tag with the same path and it displays correctly on the page.

Also, I get the same behavior on IE as FF.

Anyone seen behavior like this before?

Angelo

Hans Kesting

unread,
Apr 24, 2008, 8:31:56 AM4/24/08
to
After serious thinking Angelo wrote :

A guess: is the "list-style-type:square;" overriding the
""list-style-image:url()" setting? Try it without the "square".

Hans Kesting


Angelo

unread,
Apr 25, 2008, 11:22:10 AM4/25/08
to
Thanks for the reply, Hans. but I had already tried that. I have tried
it in the following ways with the same results: image just doesn't
show.

METHOD 1
---------------------
list-style-type:none;
list-style-image:url('images/arrow.gif');
list-style-position: outside;

METHOD 2
---------------------
list-style-type:square;
list-style-image:url('images/arrow.gif');
list-style-position: outside;

METHOD 3
---------------------
list-style: none url('images/arrow.gif') outside;

METHOD 4
---------------------
list-style: square url('images/arrow.gif') outside;


I was wondering if the asp.net order of rendering had anything to do
with it. But not sure if that would matter.

Angelo

On Apr 24, 7:31 am, Hans Kesting <invalid.han...@spamgourmet.com>
wrote:


> After serious thinking Angelo wrote :
>
>
>
>
>
> > Hi all,
>
> > I am having a very annoying problem when using an unordered list in my

> > aspx page. I set aULstyle to use a custom image as thelist style> imagebut it does not show in the screen. I have tried it in a couple


> > different ways but still no go. I have tried inline styles as well as
> > using a style sheet class but it just doesn't show the image on the
> > <li> element. The odd thing is that it will take the rest of theUL
> > style but just not the image.
>
> > SPECS:
> > Windows XP Pro SP2
> > IE 7
> > Firefox 2.x
> > ASP.NET 2.0
>
> > Here's the code I am using:
>
> > <asp:Content ...>
> > <!-- I do some binding to a dataset here that is unrelated to the
> >UL... -->

> > <ulstyle="list-style-image:url('images/arrow.gif');list-style-


> > type:square;">
> > <li> test entry</li>
> > </ul>
> > </asp:Content>
>
> > This does not show my custom image but only shows the built-in square
> > list type. I know the image path is correct because I can do an <img>
> > tag with the same path and it displays correctly on the page.
>
> > Also, I get the same behavior on IE as FF.
>
> > Anyone seen behavior like this before?
>
> > Angelo
>
> A guess: is the "list-style-type:square;" overriding the
> ""list-style-image:url()" setting? Try it without the "square".
>

> Hans Kesting- Hide quoted text -
>
> - Show quoted text -

Nathan Sokalski

unread,
Jul 28, 2010, 12:51:40 AM7/28/10
to
Here are two things I want to point out:

1. When using list-style-image, you do not use quotes
2. It is recommended that absolute URLs be used in CSS. Try using list-style:none url(/images/arrow.gif) outside;

Angelo wrote:

Thanks for the reply, Hans. but I had already tried that.

25-Apr-08

Thanks for the reply, Hans. but I had already tried that. I have tried
it in the following ways with the same results: image just doesn't
show.

METHOD 1
---------------------
list-style-type:none;
list-style-image:url('images/arrow.gif');
list-style-position: outside;

METHOD 2
---------------------
list-style-type:square;
list-style-image:url('images/arrow.gif');
list-style-position: outside;

METHOD 3
---------------------
list-style: none url('images/arrow.gif') outside;

METHOD 4
---------------------
list-style: square url('images/arrow.gif') outside;


I was wondering if the asp.net order of rendering had anything to do
with it. But not sure if that would matter.

Angelo

On Apr 24, 7:31=A0am, Hans Kesting <invalid.han...@spamgourmet.com>
wrote:


ut it does not show in the screen. I have tried it in a couple

Previous Posts In This Thread:

On Thursday, April 24, 2008 8:31 AM
Hans Kesting wrote:

Re: UL list-style-image not working


After serious thinking Angelo wrote :

A guess: is the "list-style-type:square;" overriding the


""list-style-image:url()" setting? Try it without the "square".

Hans Kesting

On Friday, April 25, 2008 11:31 PM
Angelo wrote:

UL list-style-image not working
Hi all,

I am having a very annoying problem when using an unordered list in my

aspx page. I set a UL style to use a custom image as the list style

image but it does not show in the screen. I have tried it in a couple


different ways but still no go. I have tried inline styles as well as
using a style sheet class but it just doesn't show the image on the
<li> element. The odd thing is that it will take the rest of the UL
style but just not the image.

SPECS:
Windows XP Pro SP2
IE 7
Firefox 2.x
ASP.NET 2.0

Here's the code I am using:

<asp:Content ...>
<!-- I do some binding to a dataset here that is unrelated to the

UL ... -->
<ul style="list-style-image:url('images/arrow.gif');list-style-


type:square;">
<li> test entry</li>
</ul>
</asp:Content>

This does not show my custom image but only shows the built-in square
list type. I know the image path is correct because I can do an <img>
tag with the same path and it displays correctly on the page.

Also, I get the same behavior on IE as FF.

Anyone seen behavior like this before?

Angelo

On Friday, April 25, 2008 11:33 PM
Angelo wrote:

Thanks for the reply, Hans. but I had already tried that.
Thanks for the reply, Hans. but I had already tried that. I have tried
it in the following ways with the same results: image just doesn't
show.

METHOD 1
---------------------
list-style-type:none;
list-style-image:url('images/arrow.gif');
list-style-position: outside;

METHOD 2
---------------------
list-style-type:square;
list-style-image:url('images/arrow.gif');
list-style-position: outside;

METHOD 3
---------------------
list-style: none url('images/arrow.gif') outside;

METHOD 4
---------------------
list-style: square url('images/arrow.gif') outside;


I was wondering if the asp.net order of rendering had anything to do
with it. But not sure if that would matter.

Angelo

On Apr 24, 7:31=A0am, Hans Kesting <invalid.han...@spamgourmet.com>
wrote:


ut it does not show in the screen. I have tried it in a couple


Submitted via EggHeadCafe - Software Developer Portal of Choice
Win A Free License of SandDock for Silverlight
http://www.eggheadcafe.com/tutorials/aspnet/b603164c-1365-45cf-aee7-a5df6d6cf704/win-a-free-license-of-sanddock-for-silverlight.aspx

Mr. X.

unread,
Oct 23, 2010, 8:26:58 AM10/23/10
to
Windows 7, Framework 3.5.

"Nathan Sokalski" <njsok...@hotmail.com> wrote in message
news:20107280512...@hotmail.com...

0 new messages