How to format unordered list?

[deko]

There's a pretty good tutorial here:

http://www.mediacollege.com/internet/css/ul-list.html

but the problem is *none of the directive seem to be doing anything* for me.

What I want is a) no indentation, and b) an image as a marker.

From what I've read, the CSS should look something like this:

#sidebar ul {

list-style-image: url("/images/arrow.gif");
list-style-position: inside;

}

one joker in the pack is I have a class nested in an id:

<div id="sidebar">
<div class="sidebartext">
[php-generated lists here]
</div>
</div>

Should the CSS look like this:

#sidebar .sidebartext ul {

list-style-position:inside;
list-style-image:url(("/images/arrow.gif")

}

Other suggestions or examples?

Why can't I format my ul?

[Chris F.A. Johnson]

On 2006-08-31, deko wrote:

There's a pretty good tutorial here:

http://www.mediacollege.com/internet/css/ul-list.html

but the problem is *none of the directive seem to be doing anything* for me.

What I want is a) no indentation, and b) an image as a marker.

From what I've read, the CSS should look something like this:

#sidebar ul {

list-style-image: url("/images/arrow.gif");
list-style-position: inside;

}

one joker in the pack is I have a class nested in an id:

<div id="sidebar">
<div class="sidebartext">
[php-generated lists here]
</div>
</div>

Should the CSS look like this:

#sidebar .sidebartext ul {

list-style-position:inside;
list-style-image:url(("/images/arrow.gif")

}

Other suggestions or examples?

Why can't I format my ul?

What is not working? Do you have a URL? (It works for me:
<http://cfaj.freeshell.org/testing/list.html>.)

Are you sure that the URL for the image is correct?

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

[deko]

What is not working? Do you have a URL? (It works for me:

<http://cfaj.freeshell.org/testing/list.html>.)

Are you sure that the URL for the image is correct?

Thanks for the reply.

I figured it out -

.sidebartext ul {
list-style-type:none;
list-style-position:inside;
padding:0 0 0 0;
margin:0 0 0 0;
list-style-image:url(/images/bullet.gif)
}

Padding was causing the indentation that I thought was ineffectual
list-style-positioning...

[Wieland]

deko wrote:

Padding was causing the indentation that I thought was ineffectual
list-style-positioning...

Removing unwanted indents can be a pain if you're not aware that Opera
and IE add /margins/, while Firefox (Mozilla, Netscape) add /padding/
to list items. Be sure to set both margin *and* padding to 0 (as you
have). Just one of those things...

[deko]

>Padding was causing the indentation that I thought was ineffectual

>list-style-positioning...

Removing unwanted indents can be a pain if you're not aware that Opera
and IE add /margins/, while Firefox (Mozilla, Netscape) add /padding/
to list items. Be sure to set both margin *and* padding to 0 (as you
have). Just one of those things...

thanks for the tip. cross-browser compatibility is the bane of web
programming...