Bullets alignment - wrong in IE :(

**oikram** · Jun 8, 2012 09:49

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.

Code HTML:

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

Code CSS:

#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

**oikram** · Jun 8, 2012 10:43

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 ?

**ralph.m** · Jun 8, 2012 16:27

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?

**oikram** · Jun 8, 2012 18:24

Originally Posted by ralph.m

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:
helpBullets.png

Thanks a lot for your reply. I'm still with no luck here.

**ralph.m** · Jun 8, 2012 20:42

How about this?

Code:

<!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>

**oikram** · Jun 9, 2012 06:42

Originally Posted by ralph.m

How about this?

Code:

<!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?

User Tag List

Thread: Bullets alignment - wrong in IE :(

Thread Tools

Display

Hybrid View

Bullets alignment - wrong in IE :(

Bookmarks

Bookmarks

Posting Permissions