Forum Moderators: not2easy
Basically, I am using a simple diamond image as a background image bullet for my inline list. However, it seems impossible to get the spacing right between the bullet and the list item in IE7. This is of course, due to the zoom function of IE7 and the need to set haslayout to the list to ensure it does not misalign when zooming.
Here is a sample of my code:
<html>
<head>
<style type="text/css">
ul
{
text-align: center;
margin: 0;
padding: 0;
}
li
{
display: inline;
}
li.bullet{ display: inline-block; } /* apply haslayout */
li.bullet
{
display: inline;
background: url("bullet.jpg") no-repeat center left;
padding-left: 10px;
}
</style>
</head>
<body>
<ul>
<li>item1</li>
<li class="bullet">item2</li>
<li class="bullet">item3</li>
<li class="bullet">item4</li>
</ul>
</body>
</html>
So as you can see, I only want the bullet in between the inline list items.
However, since I applied haslayout to the li bullet class, there is no longer a space between items 2-4 and the corresponding bullet in IE7. Also, the zooming function in IE7 still doesn't behave as expected, it still creates some weird spacing between the bullets and the list items when zooming in/out.
Can anyone please offer some help?
Everything looks fine in Firefox... why must IE be so difficult :(
I think most that use zoom have abandoned IE7 long ago, but I might be mistaken.
