Reputation: 6973
Who thought that styling a list of links could be so troublesome!
First issue I would like to use an arbitrary char as the bullet. I am sure now that this is impossible but maybe you know different?
In any case I would like to control the distance between the bullet and the contents of the <li>.
I would like to control the height of the bullet (so it stays centered to the text in the <li> irrespective of fonts/sizes etc).
I would like the bullet to stay within the <div> that contains the <ul> rather than hang out the side.
I would like long items in a <li> to wrap around leaving the bullet clear of the text.
I want it to work in all browsers above IE6. with as little special pleading for IE's weirdnesses as possible! (this means I cannot use :before
)
I am tempted to use <span> and </br> rather than lists!
Upvotes: 2
Views: 501
Reputation: 5491
First of all, make sure you use a remove the paddings/margins of the list element using CSS so you will have a clean slate for all browsers. Then, if you always want the bullet image to be centered, use an image.
ul{
margin: 0;
padding: 0;
}
ul li{
padding: 0 0 0 20px; /*so text does not appear on top of bullet */
background: url(error.gif) no-repeat 0 50%; /* this will set the bullet to appear in the middle */
}
Upvotes: 2
Reputation: 6062
For an unordered list, you will have to make a graphic to display an arbitrary character. The other available values are:
list-style-type: disc | circle | square | none
To make the bullet stay within the text instead of hanging out, use
list-style-position: inside
??? Not sure what you mean about "wrap around" in your last point.
Upvotes: 1