Bullets alignment - wrong in IE :(

Please consider the following code:

The point is to have that thing, more or less alike cross browser land from IE8 to now.
IE is putting the bullets wrongly.

It’s better if we have the text and NOT an image.
It’s better if we allow the user to resize font size.
CSS only solutions with ::after and border-radius would fail IE8;
I recall adding a bullet image with the proper attribute would NOT be consistent cross browser.

I recall background normally did the trick, however, on the code above it seems it’s not consistent cross browser land.


<nav 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>
</nav>
#main-navigation ul li {
    display:inline;
}

#main-navigation ul li a {
    font-family: 'Miso', 'Helvetica Neue',Helvetica,Arial,sans-serif;
    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% 0;
    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% 0;
}


What am I doing wrong ?

Thanks a lot

UPDATE:

If we add:
display: inline-block; on our anchors, we get consistent results even on IE.

The only issue being that when we mouse over, it doesn’t properly displays the image.

Can I have your help to figure this out ?

Where do you actually want the bullet to appear? Could you post a screen shot of what you want? It looks weird in my browser … bullets on the right?

Please take this into consideration:

Thanks a lot for your reply. I’m still with no luck here. :frowning:

How about this?


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style media="all">

#main-navigation ul {
    list-style: none;
    overflow: hidden;
}
#main-navigation ul li {
    margin: 0;
    padding: 0;
    float: left;
}
 
#main-navigation ul li a {
    font-family: 'Miso', 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 1.25em;
    margin-right: 50px;
    text-align: right;
    text-transform: uppercase;
    background: url('http://s7.postimage.org/fvy10uk1j/bullet.png') no-repeat 100% 50%;
    padding-right: 30px;
    text-decoration: none;
    display: block;
}
 
#main-navigation ul li a:hover {
    color: #ED1E79;
    background-image: url('http://s7.postimage.org/puiznbth3/bullet_Selected.png');
}
</style>
	
</head>

<body>

<nav 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>
</nav>

</body>

</html>

Thanks. I cannot test it at the moment but i’ve notice you used float on li instead of display: inline; By doing so, we can have our anchor with display block.

If we gain consistency by having our anchors as block, then,
The same would be achieved if we use display inline on li and display inline block on anchor no?

Or, as I suspect, float does more then just place the elements side by side and allow us to have contents as a block?

I just don’t like display: inline on block elements. There are various ways to do it, though.

You can test the code above by creating a .html file on your desktop, pasting in the code and opening it in your browser.

Ralph.m I believe the issue was never an align issue. It was related with the FONT type choosen. Due to font type line-height interpretations, the alignments were not correct.
The bullet was always centered. The text with that font type wasn’t. We had more “space” at the bottom and less on the top.

I believe I must create a conditional style for IE anyway because, indeed they make a different interpretation over this font render box, even if we play with the line-height.

Again, thanks for your reply. :slight_smile:

Cheers,
mem