I’ve just had to convert a photoshop visual to a wordpress template. The designer wanted a bulleted list where the bullets themselves were very close to the list items, and were small dashes. Cross browser support for list item and bullet styling is ropey at best, and to make things perfect I’d have to resort to browser specific styles.

Solution

The solution I think I’ll be using for the rest of my ‘web’ career will be this. JUST FORGET THE BULLET ITEM, and use positioned background images instead.

In the stylesheet, add styles for both the ‘ul’ tag, and the ‘li’ tag like so (explanations inline):

ul {
margin-left:0px; /* Set the indenting back to far left. */
padding-left:0px; /* Set the indenting back to far left. */
}

ul li {
list-style-type:none; /* Switch the list bullet off altogether. */
background-image:url(dashbullet.gif); /* The replacement bullet image */
background-position:0px 4px; /* Place bullet 0px from left and 4px from top */
background-repeat:no-repeat; /* Stops bullet tiling, important */
padding-left:7px; /* separation from li txt and bullet */
}

Then just create the list as you usually would, with ‘ul’ and ‘li’ tags. Here’s what it looks like in use:

Example of image bullet in use

Here’s a bit more detail so you can get your head around the spacing. It’s incredibly simple, but still, nice to have a diagram or two sometimes.

Detail showing some dimensions and spacing

This style works perfectly (by my testing, but I’m not perfect) on:

• Internet Explorer 6, 7 & 8+
• Firefox 2.*+
• Opera 9+ (not tested 8, but bet it works!
• Google Chrome (all versions)
• Safari (Mac and PC versions)

If you need to center a div (or any another block element) over the rest of the content in a page, and you need it to be cross-browser and valid (CSS and XHTML)…

Solution

Try the following CSS in your stylesheet or page head:

#cdiv {
  position:absolute; /* important. */
  left:50%; /*important if you want it absolutely centred in window. */ 
  margin-left:-50px; /* importnant. must be half the width. */
  width:100px; /* set to your requirements, but remember left margin setting. */
  height:100px; /* not neccessary if the element needs to grow with content. */
  border:1px solid #ABF; /* not important. */
  background-color:#DDF; /* not important. */
  text-align:center; /*not important. */
}

… and now set the ID of the element you want centered to ‘cdiv’. If the item you want to centre is an image, remember to add display:block; to the style (this makes it act like a block level element).

This style works perfectly (by my testing, but I’m not perfect) on:

• Internet Explorer 6, 7 & 8+
• Firefox 2.*+
• Opera 8 & 9+
• Google Chrome (all versions)
• Safari (Mac and PC versions)
• Netscape 9 (is anyone still using this?)