How can I align bullets and list items

[ryy705]

Hello,
I am trying align bullets with the bottom of the text in the li tags. I used different font sizes for text and bullets because that's what the design calls for. But since list items and anchor tags are inline elements I can't use top and bottom margin to align them with the bullets. Please advice. Any help is appreciated.

Here is my HTML:

<ul id="nav">
  <li><a href="">Buyers</a></li>
  <li><a href="">Sellers</a></li>
  <li

Here's my CSS:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.0/build/cssreset/reset-min.css">
  <style>
    ul#nav li{color:#FDD458;list-style-type:square;list-style-position:inside;font-size:26px;}
    ul#nav li a{color:#666;text-decoration:none;font-size:16px;}
  </style>

[macneato]

What i would suggest is using a background image (of a square) instead. This will help with the positioning. Sure you can find a whole bunch online

Here is one

Oh, by the way.

<ul id="nav">
  <li><a href="">Buyers</a></li>
  <li><a href="">Sellers</a></li>
</ul>

[Veneficae]

Using an image to replace the bullets is your best shot.

The following code will achieve just that.

#nav li {
list-style-image: url(imagepath/filename.gif); /* I used .gif to suit my reply; any format can be used. */
}

If you want bullets, simply make a file in Photoshop or another graphics editor, make sure the image is the height of the list item and then make a black circle in the lower portion, seeing as how you want it at the bottom of the list item. Save it with your preferred file format (I'd save it as a GIF as a bullet is a small image with limited colour range), then link it up in the code above.

Replace 'imagepath' with the... image path, and 'filename' with the correct one, and that'll replace the bullets. The good thing about this method is that if the image was ever misplaced or deleted the list item image downscales to the original bullet points, so your visitors will still know they're looking at list items, rather than organised text.

[ryy705]

Switching to an image did the trick. I didn't even mess with the margin. Thanks.

[RyanMoster]

I think this code is simply describing that how to create a list not the alignment of the list.

[JohnRackon]

You can do the amendment in the code by just giving the alignment option instead of picking mistake.