471,605 Members | 1,397 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,605 software developers and data experts.

Space between bullet and text in li tag (unordered list)

49
Hi,

I need to be able to reduce the default space between a bullet and the text that follows it. After searching all and sundry, I came up with the following CSS, that unfortunately does not work in FireFox:

My UL tag looks like this:

Expand|Select|Wrap|Line Numbers
  1. <UL STYLE=\"padding: 0; margin: 2 0 0 0\">
My CSS looks like this:

Expand|Select|Wrap|Line Numbers
  1. ul li {
  2. list-style-type: none;
  3. padding: 2 0 0 0;
  4. _padding: 2 0 0 10;
  5. #padding: 2 0 0 10;
  6. background: url(/imgs/common/tiny_bullet.gif) no-repeat 0 7px 0 0;
  7. }
(All those paddings were to get additional left margins in IE because I was able to get the bullets there, and so the text needs to move right. Only IE reads those rogue characters - _ for IE 6 and # for IE 7.)

Does anyone know how to get this to work in FireFox? Or any alternate solution? Thank you very much for your time!
Aug 18 '07 #1
4 16147
Do you need a bullet? You can have a bullet-less unordered list if that fixes your problem.
Aug 18 '07 #2
drhowarddrfine
7,435 Expert 4TB
There are three things going on here.
We need the .gif for the button to see what's happening.

Browsers tend to have different default margins and padding for some elements which could be affecting this. It is common to set all margins/padding to zero and then set them to what you want in order to get consistency.

Are you using a proper doctype? Without one IE screws everything up.
Aug 18 '07 #3
knkk
49
Thanks, akapsycho and drhowarddrfine. The gif is merely a smaller bullet (•) than HTML produces for LI. Yes, I do need the bullets. Here is the code, if it will help:

HTML:

Expand|Select|Wrap|Line Numbers
  1. <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" CLASS="v10b">
  2. <TR>
  3. <TD>
  4. <UL STYLE="padding: 0; margin: 2 0 0 0">
  5. <!--setting paddings and margins to zero above-->
  6. <LI><B>Events</B><a href="/profile/events/3541"> Tenth Summer Camp For Children By YWCA</A></LI>
  7. <LI><B>Events</B><a href="/profile/events/3525"> Vasanthotsavam Celebrations At Shilparamam</A></LI>
  8. <LI><B>Events</B><a href="/profile/events/3624"> Summer Collection</A></LI>
  9. <LI><B>Events</B><a href="/profile/events/3525"> Celebrations At Shilparamam</A></LI>
  10. <LI><B>Events</B><a href="/profile/events/3623"> Orion - Live Rock Show</A></LI>
  11. <LI><B>Events</B><a href="/profile/events/3556"> 40-Day Summer Camp</A></LI>
  12. <LI><B>Events</B><a href="/profile/events/3483"> Painting Exhibition By Pushpa Bagrodia</A></LI>
  13. </UL>
  14. </TD>
  15. </TR>
  16. </TABLE>
  17.  
CSS:

Expand|Select|Wrap|Line Numbers
  1. ul li {
  2. list-style-type: none;
  3. padding: 2 0 0 0;
  4. _padding: 2 0 0 10;
  5. #padding: 2 0 0 10;
  6. background: url(/imgs/common/tiny_bullet.gif) no-repeat 0 7px 0 0;
  7. }
  8.  
v10b is merely Verdana font-size 10.

The problem is not in IE - it is in FF...
Aug 19 '07 #4
knkk
49
Well, I fixed the problem, and it works in both IE and FF. Turns out that the mistake was in the two extra zeros at the end that I put in my background (image) definition. This is my current stype definition:

Expand|Select|Wrap|Line Numbers
  1. ul li {
  2. list-style-type: none;
  3. padding: 2 0 0 10;
  4. background: url(/imgs/common/tiny_bullet.gif) no-repeat 0 7px; /*originally this was 0 7px 0 0, which was the mistake*/
  5. }
  6.  
Thanks everyone for your time.
Aug 19 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

7 posts views Thread by Nikolaos Giannopoulos | last post: by
8 posts views Thread by Udo Marx | last post: by
13 posts views Thread by Matt | last post: by
2 posts views Thread by Jerry | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by MichaelMortimer | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.