Question

So, I have something like this:

4 objects with exactly 76x76px within a 320px holder.
In Chrome, you can see above, it works just fine.
But in Firefox and IE9 I get something like this:

with the same sized <ul>

I only get it to display correctly if I resize the <li>

Why is that? The image size is actually 76×76 and Chrome renders it correctly.
Thanks in advance!

—EDIT—

So I was on my way to provide you guys with a jsFiddle and I realized that the simple code worked fine there for all browsers. So after some “removing all the code until I find the problem” I found it! haha
It was caused by these two style lines combined applied to all the sidebar:

letter-spacing: 1.6px;
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;

If I just remove one of these, it works correctly, the combination of both where the problem. So just setting font-family: Arial; (I know, weird solution, right?) to the <ul> did it!

Thanks all.

Answer 1

So I was on my way to provide you guys with a jsFiddle and I realized that the simple code worked fine there for all browsers. So after some “removing all the code until I find the problem” I found it! haha
It was caused by these two style lines combined applied to all the sidebar:

letter-spacing: 1.6px;
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;

If I just remove one of these, it works correctly, the combination of both where the problem. So just setting font-family: Arial; (I know, weird solution, right?) to the <ul> did it!

Thanks all.