Bullet list indentations (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Starhugger -> Bullet list indentations (9/14/2005 1:21:05)

I have built a collapsible list in FP2003 that has two levels. What I would like to do is adjust the left margin/indentation of both levels to save width space, since the list is to fit in a 230px wide box. Using SitePoint's CSS book, I tried doing this:

quote:

li {
padding-left: 0px;
margin-left: 0px;
font-size: 8pt;
text-align: left;
margin-top:2px;
margin-bottom:2px;
}

But this doesn't bring the bullets to the left. I can increase the margin but I can't seem to decrease it. I'm using a Theme, and it is using its own default graphics for bullets; that works fine. It's just the huge indentation on the left that I can't seem to reduce. The default indentation for two levels takes up about half the box width!

What I'd like to do is to have the first level flush with the left edge margin, and the second level only about 10px in from that. Is there a way to do this? Thanks for the help.

Starhugger



womble -> RE: Bullet list indentations (9/14/2005 5:47:53)

Whether it's the 'right' way to do it, I'm not sure, but I've found with some indented lists through trial and error that it sometimes help if I specify

ul {
padding-left: 0px;
margin-left: 0px; }

as well, then I put the padding back in on the li if need be.



c1sissy -> RE: Bullet list indentations (9/14/2005 9:30:39)

Another thing to note here is that it might not be the code that you think is causing the problems. It could be something above or below what you are working on.

Use the global zeroing out of margins, paddings and borders 
* {margin: 0px; 
     padding: 0px;
     border: 0px;
    }


Also if you type in listomatic in google it will take you to a site that is loaded with different types of lists. You might be able to find something within their tons of lists that would be able to help you out,.



Starhugger -> RE: Bullet list indentations (9/14/2005 21:27:35)

Thanks Womble and C1sissy! I'll give both of those ideas a try and let you know how I make out.

Starhugger



caz -> RE: Bullet list indentations (9/14/2005 22:16:48)

You might also like to try changing your font sizing from points to other units such as %, ems or even px since points are meant for print only and browsers only approximate point sizing.



Starhugger -> RE: Bullet list indentations (9/16/2005 18:42:57)


quote:

ORIGINAL: womble

Whether it's the 'right' way to do it, I'm not sure, but I've found with some indented lists through trial and error that it sometimes help if I specify

ul {
padding-left: 0px;
margin-left: 0px; }

as well, then I put the padding back in on the li if need be.

Womble, your suggestion worked. Yay! I changed the CSS to apply to the page's UL instead of LI and it works great. Thanks! [:)]

Now I have one more problem related to the list. This is a list of shortcuts that goes in a box at the top of a series of articles that are related, to let the user hop directly to a specific section and to see what sections are in the current article. I have it set as a collapsible list, with the default mode being collapsed. The list itself is in a separate file that is pulled into each article page using FP's include page web component. That way I only have to update it once, as I add new articles in the series.

I had it working fine before I changed the list spacing, and it still works fine when I Preview the includes file directly. I can click the bullet and it expands that particular list point. But in the host page, it won't expand.

The only thing I changed (I think) was to add the UL left padding and margin. I found you need it in the host page because it won't import the layout or formatting from the include file.

Could that possibly be the source of the problem? When I load up the host page, either in Preview mode or in my browser (IE6), I can see the expanded list for a split second and then it collapses, as it should. But I can't get it to expand again, which I was able to before by clicking on the first level bullet. And yet, it works fine when I Preview the includes file directly.

Any ideas? Thanks!

Starhugger



Starhugger -> RE: Bullet list indentations (9/16/2005 18:49:01)

quote:

ORIGINAL: caz

You might also like to try changing your font sizing from points to other units such as %, ems or even px since points are meant for print only and browsers only approximate point sizing.

Thanks for the tip, Caz. I've been meaning to go through the site and really look into making it more user-friendly in terms of font sizing. ...And as soon as I find about 60 more hours in the day, I'll get to it! [:D] I've read web pages and articles about the advantages and disadvantages of each font size method, enough to realise I'd need to spend a fair bit of time experimenting with it to see what works best. But I just don't have the time right now. It doesn't seem to be affecting the list issue itself though. But I'll keep it on the agenda to look into later.

Starhugger



womble -> RE: Bullet list indentations (9/16/2005 19:32:57)

quote:

And as soon as I find about 60 more hours in the day, I'll get to it!

60!?! I could do with about 90! [:D][;)]



Starhugger -> RE: Bullet list indentations (9/16/2005 19:43:54)


quote:

ORIGINAL: womble

60!?! I could do with about 90! [:D][;)]

Hmmm... Must be the Canada/UK exchange rate. [;)][:D]

Starhugger



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125