I’ve being trying this for about 5 hours already, and I’m feeling really, really

Question

0

Editorial Team

Asked: June 5, 20262026-06-05T17:28:17+00:00 2026-06-05T17:28:17+00:00

I’ve being trying this for about 5 hours already, and I’m feeling really, really

0

I’ve being trying this for about 5 hours already, and I’m feeling really, really dummy. :s

The overall code is w3c validated.

The problematic snipped:
http://jsfiddle.net/ZnzYk/

I’ve tried making the circle bullets with css using border radius;
I’ve tried using a pseudo element.
I’ve tried using sprites.

The bullet must be (more or less) on the vertical-middle of the text, cross browser, starting from IE8.

So I give up all methods and I’m trying with a background image.

THE CSS:

#main-navigation ul li {     
   display:inline; 
}

#main-navigation ul li a {     
   font-family: 'Miso', 'Helvetica Neue',Helvetica,Arial,sans-serif;  
   display: inline-block;        /*seems to help on IE*/
   font-size: 1.25em;     
   margin-right: 6%;     
   text-align: right;     
   text-transform: uppercase;     
   background: url('http://s7.postimage.org/fvy10uk1j/bullet.png') no-repeat 100% 50%;  
   padding-right: 4%;     
   text-decoration: none; 
}   
#main-navigation ul li a:hover {     
   color: #ED1E79;     
   text-decoration: none;     
   background: url('http://s7.postimage.org/puiznbth3/bullet_Selected.png') no-repeat 100% 50%; 
}

THE HTML

<div id="main-navigation"> 
   <ul>         
       <li><a href="">item 1</a></li>         
       <li><a href="">and this is item 2</a></li>         
       <li><a href="">item 3</a></li>     
   </ul> 
</div>

I get everything but consistence. 🙁
I don’t mind if it stays more or less really, but all least, not that different as it is right now.

Update:

After Asif suggestion:
adding padding-top to 3px has made them look more or less the same on IE 8, IE9 and good browsers. But it feels like a bit hacky and still not consistent (on IE the bullet it’s more on top, on all others the bullet it’s on bottom (due to the padding-top added);

Isn’t there a better CSS code to have the bullets vertically aligned with the text, that don’t require a px by px adjustment ?

The intended result:

the intended result