[RESOLVED] List Item Image Indentation

@phpnoviceApr 17.2006

I have the following CSS classes defined:

[code].bullet { cursor: default; list-style-image: url(bullet.gif); margin-left: 0; } .minus { cursor: pointer; list-style-image: url(minus.gif); margin-left: 0; } .plus { cursor: pointer; list-style-image: url(plus.gif); margin-left: 0; } [/code]

and the unordered list, which uses those classes, is within a DIV container with borders.
The result is that there is too much space used in the left margin to indent each level.
How do I reduce this? ?

to post a comment

CSS

10 Comments(s) _↴

@sheepo-designsApr 17.2006 — #I think I'm having the same, or similar problem.

I have a nav system that us an unordered list. My nav has sub-items and the indentation is massive and has thrown my whole page out of whack.

I've tried:

<i>
 </i>subnav ul{
 margin-left: -40px;
 }

Which seemed to be the most logical in my mind. But the indentation didn't budge.

I also made a new thred about this, failing to see yours.

BELOW THIS LINE IS EDITED
----------------------------------------------------------------------

I came across [url="http://css.maxdesign.com.au/listutorial/sub_introduction.htm"]This[/url]. It's a site that specialises in lists. Though its probably already known by everyone here, I find it very interesting and a great place to get ideas and help. Maybe it'll help you with your question, I know it did with mine!

Cheers.

@FangApr 17.2006 — #A bit difficult to see your exact problems without code, but I think the problem is to remove all gaps and have a list-style-image:

ul, li {margin:0; padding:0;} /* remove all gaps */
 ul ul {float:left;} /* nested lists */
 li {list-style-image: url(bullet.gif);}
 ul {padding-left:20px;} /* width of list-style-image */

@phpnoviceauthorApr 17.2006 — #The problem was that I was trying to control it at the LI level.

The solution was to controrl it at the UL level. Thanks, all.

Cheers.

@phpnoviceauthorApr 18.2006 — #After some additional testing, it turns out that this is still not, yet, resolved. The information provided at that link cannot be applied to my situation because it totally eliminates the "bullet" images and it apparently only handles a two-level menu structure -- where I need up to potentially nine levels deep.

Fang, I've applied something similar to what you posted and, for the most part, it works well. I had to eliminate that "float:left;" part because it was causing the following "bullet" images to be displayed at the end of the previous line. At any rate... What I have now works perfectly in IE -- but FF has some problems with the position of the "bullet" image (two close to the left border of the container and too much space between the image and the LI text).

I'm attaching two GIF images that were cut out of a snapshot of each browser's rendering of my client's page. Plus, the following is the CSS I'm using:

ul {
 list-style-type: none;
 margin: 0;
 padding: 0 0 0 16px;
 }
 li {
 margin: 0;
 padding: 0 0 0 4px;
 white-space: nowrap;
 }
 .bullet {
 cursor: default;
 list-style-image: url(bullet.gif);
 }
 .minus {
 cursor: pointer;
 list-style-image: url(minus.gif);
 }
 .plus {
 cursor: pointer;
 list-style-image: url(plus.gif);
 }
 .hilight {
 background-color: #ECE9D8;
 color: black;
 }
 .scrollable {
 border: 2px ridge #FFCCFF;
 margin: 5px;
 padding: 2px 5px;
 overflow: scroll;
 height: 250px;
 width: 150px
 }

Note that the "scrollable" class is assign to the two containers you'll see in the images. Thus, in FF's case, even the 5px padding of the container is being ignored. What is the solution for FF that won't affect IE's perfect results?

TIA

[upl-file uuid=dd891b69-5d7b-4c9f-8da4-7cee7a2bb322 size=7kB]ie-list.gif[/upl-file]

[upl-file uuid=3f1ebe1b-8077-469b-9bcb-d714b569b7a4 size=8kB]ff-list.gif[/upl-file]

@FangApr 18.2006 — #Try this method. Take all margin and padding out of lists and control the bullet positions by placing it on the background and adding padding to the li to move the text in relation to the image.

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 }
 li {
 padding: 0 0 0 15px; /* depends on backgroung image width */
 white-space: nowrap;
 }
 .bullet {
 cursor: default;
 background:transparent url(bullet.gif) no-repeat;
 }
 .minus {
 cursor: pointer;
 background:transparent url(minus.gif) no-repeat;
 }
 .plus {
 cursor: pointer;
 background:transparent url(plus.gif) no-repeat;
 }
 .hilight {
 background-color: #ECE9D8;
 color: black;
 }
 .scrollable {
 border: 2px ridge #FFCCFF;
 margin: 5px;
 padding: 2px 5px;
 overflow: scroll;
 height: 250px;
 width: 150px
 }

@phpnoviceauthorApr 18.2006 — #For that, I had to increase the size of my "bullet" images from 16x16 to 19x19 (which I don't mind, but was necessary because the hilighting was showing below the image) and used the following CSS to, again, achieve perfect results in IE. But, Firefox now doesn't display the "bullet" images at all -- not even as background images. What next? ?

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 }
 li {
 margin: 0;
 padding: 0 0 0 22px;
 white-space: nowrap;
 }
 .bullet {
 background: transparent url('bullet.gif') no-repeat fixed top left;
 cursor: default;
 }
 .minus {
 background: transparent url('minus.gif') no-repeat fixed top left;
 cursor: pointer;
 }
 .plus {
 background: transparent url('plus.gif') no-repeat fixed top left;
 cursor: pointer;
 }
 .hilight {
 background-color: #ECE9D8;
 color: black;
 }
 .scrollable {
 border: 2px ridge #FFCCFF;
 margin: 5px;
 padding: 2px 5px;
 overflow: scroll;
 height: 250px;
 width: 150px
 }

@FangApr 18.2006 — #Don't use [I]background-position:fixed;[/I] FF positions the image in relation to the body, not the <li> element.

@phpnoviceauthorApr 18.2006 — #Don't use [I]background-position:fixed;[/I] FF positions the image in relation to the body, not the <li> element.[/QUOTE]
This sounds like a bug in FF, yes? I only bring this up, because there seems to be a perception that FF can do no wrong. For example... In another thread, where things were displaying as desired in IE -- but not in FF:

http://www.webdeveloper.com/forum/showthread.php?t=103178
...eventually we will find this is a problem with IE not FF.[/QUOTE]
At any rate... Now both browsers are displaying it the same way for me. Thanks, Fang.

Cheers.

@FangApr 19.2006 — #Sorry that should have been:[I]background-attachment:fixed;[/I] should not be used.

Apparently not a bug, but the way W3C recommended. http://www.quirksmode.org/css/background.html

imho this is illogical

@phpnoviceauthorApr 19.2006 — #imho this is illogical[/QUOTE]
Amen!, brother.

Thanks.

Also in #CSS _↴

Browser Compatability Issues simple problem - centering an image Trying to get a submenu working in a dropdown menu

Success!

Help @phpnovice spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] List Item Image Indentation

10 Comments(s) _↴

BELOW THIS LINE IS EDITED
----------------------------------------------------------------------

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] List Item Image Indentation

10 Comments(s) ↴

BELOW THIS LINE IS EDITED ----------------------------------------------------------------------

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

BELOW THIS LINE IS EDITED
----------------------------------------------------------------------

Also in #CSS _↴