473,225 Members | 1,292 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,225 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 16232
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

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

Similar topics

7
by: Nikolaos Giannopoulos | last post by:
I have a paragraph and simply want a bullet image to appear at the start of the paragraph text. I tried the following html: <p><span class="dot"></span>some text</p> as seen here:...
7
by: codeslayer | last post by:
Greetings to everyone in ‘forum-land': I have a problem that has plaguing me to no end. It is a CSS-related question, and I have not seen this question posted anywhere in forums or through...
8
by: Udo Marx | last post by:
Hello to ciwas! Is there a way to change the bullet form, color, etc, of the element <li> under<ul> via css? Any reply will be appreciated. -- Freundliche Gruesse, Netzteil - Udo Marx...
13
by: Matt | last post by:
I would like to set the "list-style-type" to be a hyphen (-). How can I accomplish this in a style sheet. I tried list-style-type: hyphen; and list-style-type: dash; but neither worked. I also...
3
by: Jordan S | last post by:
I have been using the old HTML unordered list in order to have bullet-point lists. But they don't look good because there is no white space between each list item. <UL> <LI>List Item Here...
2
by: Jerry | last post by:
I've got a website that uses an external style sheet to manage several of the design elements. One of the webpages includes an unordered list. I would like for the list to not be indented at all,...
0
by: roscoedesign | last post by:
html: http://roscoecreations.com/exitpro/ css: http://roscoecreations.com/exitpro/css/style.css js: http://roscoecreations.com/exitpro/javascript/main.js Recently, I have had some big problems...
1
by: nitinpatel1117 | last post by:
i am using an unordered list to display my horizontal navigation. i am using something link <ul> <li>link 1</li> <li>link 2</li> </ul>
2
by: torweb | last post by:
I'm using an image for an unordered list, which works fine. The problem is, the image is also appearing in my numbered "ordered list." Here is my code for the unordered list:...and thanks in...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.