By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,238 Members | 1,659 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,238 IT Pros & Developers. It's quick & easy.

Centered bullet in .css

P: 26
Hi All,

I inserted this attribute in my .css file.
I wish to know how the centre the text after each bullet.
I also would like to make sure that there is no problem with other browsers.

Expand|Select|Wrap|Line Numbers
  1. .links ul li {
  2.     list-style-image: url(r_square.gif);
  3.         }
Thanks for your advice!

L
Jun 25 '08 #1
Share this Question
Share on Google+
15 Replies


Stang02GT
Expert 100+
P: 1,208
Hi All,

I inserted this attribute in my .css file.
I wish to know how the centre the text after each bullet.
I also would like to make sure that there is no problem with other browsers.

.links ul li {
list-style-image: url(r_square.gif);
}

Thanks for your advice!

L
Use this.

[HTML]align="center"[/HTML]
Jun 25 '08 #2

acoder
Expert Mod 15k+
P: 16,027
Rather than use an align attribute for presentation directly in the HTML, use text-align in the CSS:
Expand|Select|Wrap|Line Numbers
  1. text-align: center;
Hope that helps.
Jun 25 '08 #3

P: 26
Hi
Thanks for your reply but it works with FireFox but not for IE 6.0.

Also you suggested to have a text-align = center: where can I add this as I have a lot of text styles in the .css?
I can also do it in HTML directly. Please advice.

Thanks

L.
Jun 30 '08 #4

acoder
Expert Mod 15k+
P: 16,027
Does this not work in IE6?
Expand|Select|Wrap|Line Numbers
  1. .links ul li {
  2.     list-style-image: url(r_square.gif);
  3.     text-align:center;
  4. }
If not, post the corresponding HTML.
Jun 30 '08 #5

P: 26
Sorry, I need to clarify.

I would like the bullet (in this case a customed square) to be aligned with the text. The text is usually in aligned in the left.

As an example, you can see the "
REPLY GUIDELINES" used bulltes on the right of this page.

Thanks

Louise
Jun 30 '08 #6

acoder
Expert Mod 15k+
P: 16,027
As an example, you can see the "
REPLY GUIDELINES" used bulltes on the right of this page.
Those are left-aligned. The guidelines ul has the following CSS properties:
Expand|Select|Wrap|Line Numbers
  1. .guidelines {
  2.     list-style-image:none;
  3.     list-style-position:outside;
  4.     list-style-type:square;
  5. }
and the li:
Expand|Select|Wrap|Line Numbers
  1. .guidelines li {
  2.     font-size:9pt;
  3.     margin:0px;
  4.     padding:3px;
  5. }
Jun 30 '08 #7

P: 26
Thanks for the guidelines, but my text is centered instead of being left.

Maybe the bullet image is wrong (.gif), red square (4 by 4 pixel).

Thanks

L
Jul 2 '08 #8

acoder
Expert Mod 15k+
P: 16,027
Have you got a test page that you can show? If not, attach the image here.
Jul 2 '08 #9

P: 26
Have you got a test page that you can show? If not, attach the image here.
Thanks

Here is a similar script to Guidelines:

Expand|Select|Wrap|Line Numbers
  1. .links ul {
  2.     list-style-image:url(/images/uploaded/Image/Intranet%20pics%20for%20CH/b_d_square.gif);
  3.     list-style-position:outside;
  4.  
  5. .links li {
  6.     font-size:9pt;
  7.     margin:0px;
  8.     padding:3px;
  9. }
  10.  
[IMG[/IMG] Idon't know how to attach an image.

Louise
Jul 4 '08 #10

acoder
Expert Mod 15k+
P: 16,027
You forgot to close the ul CSS rule.

To attach an image, make a post, then edit it, or use the img tag if you've got the image online.

PS. please use [code] tags when posting code. Thanks!
Jul 4 '08 #11

P: 26
You forgot to close the ul CSS rule.

To attach an image, make a post, then edit it, or use the img tag if you've got the image online.

PS. please use code tags when posting code. Thanks!
Thanks sure.

It still does not work, the bullets are higher than the text.
Expand|Select|Wrap|Line Numbers
  1.  
  2. .links ul {
  3.     list-style-image:url(/images/uploaded/Image/Intranet%20pics%20for%20CH/b_d_square.gif);
  4.     list-style-position:outside;
  5.  }
  6. .links li {
  7.     font-size: 9pt;
  8.     margin:0px;
  9.     padding:3px;
  10. }
  11.  
Jul 4 '08 #12

P: 26
Sorry I forgot to ask, I am quite happy with the
list-style-type:square; instead. Could I change the color?

Thanks Louise
Jul 4 '08 #13

acoder
Expert Mod 15k+
P: 16,027
Yes, just add
Expand|Select|Wrap|Line Numbers
  1. color:whatevercolor;
to the style rule.
Jul 4 '08 #14

P: 26
Thank you!
This time it works

Louise
Jul 8 '08 #15

acoder
Expert Mod 15k+
P: 16,027
You're welcome. Glad it's working :)
Jul 8 '08 #16

Post your reply

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