UL list-style-image not working

Discussion in 'ASP .Net' started by Angelo, Apr 23, 2008.

  1. Angelo

    Angelo Guest

    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
    Angelo, Apr 23, 2008
    #1
    1. Advertising

  2. Angelo

    Hans Kesting Guest

    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 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


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

    Hans Kesting
    Hans Kesting, Apr 24, 2008
    #2
    1. Advertising

  3. Angelo

    Angelo Guest

    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 <>
    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 -
    Angelo, Apr 25, 2008
    #3
  4. 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 trie
    it in the following ways with the same results: image just doesn'
    show

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

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

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

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

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

    Angel

    On Apr 24, 7:31=A0am, Hans Kesting <
    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 th
    ""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 m
    aspx page. I set a UL style to use a custom image as the list styl
    image but it does not show in the screen. I have tried it in a coupl
    different ways but still no go. I have tried inline styles as well a
    using a style sheet class but it just doesn't show the image on th
    <li> element. The odd thing is that it will take the rest of the U
    style but just not the image

    SPECS
    Windows XP Pro SP
    IE
    Firefox 2.
    ASP.NET 2.

    Here's the code I am using

    <asp:Content ...
    <!-- I do some binding to a dataset here that is unrelated to th
    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 squar
    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 trie
    it in the following ways with the same results: image just doesn'
    show

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

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

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

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

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

    Angel

    On Apr 24, 7:31=A0am, Hans Kesting <
    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/tutorial...free-license-of-sanddock-for-silverlight.aspx
    Nathan Sokalski, Jul 28, 2010
    #4
  5. Angelo

    Mr. X. Guest

    Re: RE:UL list-style-image not working

    Windows 7, Framework 3.5.

    "Nathan Sokalski" <> wrote in message
    news:...
    > 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 <>
    > 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 <>
    > 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/tutorial...free-license-of-sanddock-for-silverlight.aspx
    Mr. X., Oct 23, 2010
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Rob Nicholson
    Replies:
    3
    Views:
    717
    Rob Nicholson
    May 28, 2005
  2. Replies:
    1
    Views:
    785
    Bertilo Wennergren
    Nov 24, 2003
  3. Laszlo Zsolt Nagy
    Replies:
    1
    Views:
    1,278
    Kartic
    Jan 26, 2005
  4. Todd
    Replies:
    5
    Views:
    20,763
  5. Ken Varn
    Replies:
    0
    Views:
    440
    Ken Varn
    Apr 26, 2004
Loading...

Share This Page