UL list-style-image not working

  • Thread starter Thread starter Angelo
  • Start date Start date
A

Angelo

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
 
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
Click to expand...

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

Hans Kesting
 
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
 
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 <[email protected]
wrote
ut it does not show in the screen. I have tried it in a couple

Previous Posts In This Thread:

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

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

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 <[email protected]
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
 
Windows 7, Framework 3.5.

Nathan Sokalski said:
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 <[email protected]>
wrote:
ut it does not show in the screen. I have tried it in a couple

Previous Posts In This Thread:

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

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

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 <[email protected]>
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
Click to expand...
 
Back
Top