469,934 Members | 1,974 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,934 developers. It's quick & easy.

How to format unordered list?

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?
Aug 31 '06 #1
4 8167
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)
Aug 31 '06 #2
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...

Aug 31 '06 #3
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...

Sep 4 '06 #4
>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...

Sep 5 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by simplico | last post: by
3 posts views Thread by laredotornado | last post: by
8 posts views Thread by joemacbusiness | last post: by
2 posts views Thread by asc4john | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.