IE9 & Mac CSS bug? - html

Question

I'm experiencing a very frustrating problem with my CSS and IE9 and maybe even Chrome on MacOS.
I have an ul of four images in a container #categories {width: 960px}.
Each img (li) is contained in a box .catBox {width: 220px; float: left; margin: 20px 25px 10px 0px}.
I took away the right margin on the last image with .catBox:last-child {margin-right: 0px;}.
Basically, what I am trying to do is justify the four images across the 960px width container. This renders fine in Chrome, Safari, FF, and IE9 on my local computer and Chrome, Safari and FF work fine remotely from my Windows machine.
In IE when I test remotely it pushes the last image to the next line. ALSO, when testing in Chrome on a Mac it does the same thing.
Here is my math: 220px * 4 images = 880px. 3 margins (last one removed) at 25px = 75px. 75 + 880 = 955px. This should give me a 5px "buffer" in any of these browsers. Can someone please help? Am I thinking about this incorrectly?
Thanks in advance for your help.
HTML
<div id="categories">
<ul>
<li class="catBox"><img src="img/3mmwpolytongue22mm.jpg" alt=""><div class="caption"><h2>Stone</h2></div>
</li>
<li class="catBox"><img src="img/4g5.5m12ws.JPG" alt=""><div class="caption"><h2>Wood</h2></div></li>
<li class="catBox"><img src="img/5mmsnowflakeobsidianlabretA_01.JPG" alt=""><div class="caption"><h2>Teflon & Polymer</h2></div></li>
<li class="catBox"><img src="img/13mmblueindianearrings1.jpg" alt=""><div class="caption"><h2>Custom</h2></div></li>
</ul>
</div>
CSS
#categories {
width: 960px;
height: 240px;
}
.catBox {
position: relative;
display: inline;
overflow: hidden;
width: 220px;
margin: 20px 25px 10px 0px;
float: left;
z-index: -999;
}
.catBox:last-child {
margin-right: 0px;
}
.caption {
position: absolute;
top: 190px;
width: 220px;
height: 30px;
background-color: #333;
-webkit-opacity: .5;
-moz-opacity: .5;
-ms-opacity: .5;
text-align: center;
z-index: 999;
padding: 0px;
}
.caption h2 {
color: #fff;
}

Answer 1

Remove all whitespace between tags. It can interfere with pixel-precise layouts.

Answer 2

I don't see any problem. You should use tab to do whitespaces and no the space key. Here you have the JSFiddle, tested in FF, Chrome and Safari.
http://jsfiddle.net/PwkAW/

Answer 3

I'm not exactly sure why you're seeing the behavior that you're describing - do you know for a fact that ALL your CSS is exactly the same on the remote server? If I had to guess, there is another rule that is affecting your li's. Can you share the remote server link?
Also, your markup and CSS could be greatly simplified. I'm not saying it will fix what you're seeing, but it would at least remove some variables in the situation. You could have:
<ul id="categories">
<li>
<img src="img/3mmwpolytongue22mm.jpg" alt="" />
<h2>Stone</h2>
</li>
<li>
<img src="img/4g5.5m12ws.JPG" alt="" />
<h2>Wood</h2>
</li>
<li>
<img src="img/5mmsnowflakeobsidianlabretA_01.JPG" alt="" />
<h2>Teflon & Polymer</h2>
</li>
<li>
<img src="img/13mmblueindianearrings1.jpg" alt="">
<h2>Custom</h2>
</li>
</ul>
Then your CSS could look like this:
#categories {
width: 960px;
height: 240px;
}
#categories li {
position: relative;
display: inline;
overflow: hidden;
width: 220px;
margin: 20px 25px 10px 0px;
float: left;
z-index: -999;
}
#categories li:last-child {
margin-right: 0px;
}
#categories h2 {
position: absolute;
top: 190px;
width: 220px;
height: 30px;
background-color: #333;
-webkit-opacity: .5;
-moz-opacity: .5;
-ms-opacity: .5;
text-align: center;
z-index: 999;
padding: 0px;
color: #fff;
}
Actually, in refactoring the CSS, I did notice an issue - this rule:
catBox:last-child
Will not work the way you expect. The last-child rule, at least in my experience, doesn't work when applied to classes as part of the selector. It seems to work only on straight up elements - like #categories li:last-child. So, it may not removing the right margin as you expect.