Loofer
Loofer

Reputation: 6973

How do I control the styling of an html unordered list?

Who thought that styling a list of links could be so troublesome!

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

Answers (3)

DLS
DLS

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

BryanH
BryanH

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

Related Questions