Safari vs Firefox: Strange UL "padding" - html

Question

I have this HTML:
<article class="images">
<ul class="cf">
<li>
<a href="#">
<img src="http://www.placehold.it/800x600" alt="" />
</a>
</li>
</ul>
</article>
And this CSS:
* {
margin: 0;
padding: 0;
}
.images ul {
margin-left: -3%;
width: 100%;
background: red;
}
.images li {
list-style-type: none;
}
.images li img {
width: 17%;
margin-left: 3%;
margin-bottom: 3%;
float: left;
}
Still, in Safari the ul seems to have some kind of padding on the right.
In Firefox the ul is displayed correctly.
See it for yourself: http://jsfiddle.net/EdCXx/
Is there any way to fix that?
Edit: With Safari 6.0.2 on OS X 10.8.2 it looks like this:

Answer 1

I'm assuming the issue is that you're using negative margin and this is causing a problem (I don't have access to a Mac at the moment, so I can't verify).
Try changing your CSS to what's below. I also changed your clearfix to one I picked up a while ago that has had excellent cross-browser results.
http://jsfiddle.net/EdCXx/4/
CSS:
/* Reset */
* {
margin: 0;
padding: 0;
}
/* Clearfix */
.clear:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
/* Images */
.images ul {
width: 100%;
background: red;
}
.images li {
list-style: none;
overflow: hidden;
margin-right: 3%;
margin-bottom: 3%;
float: left;
width: 17%;
height: 17%;
}
.images li img {
float: left;
max-width: 100%;
max-height: 100%;
}
And tighten up your HTML (not necessary, but it's prettier):
<article class="images">
<ul class="clear">
<li> <img src="http://www.placehold.it/800x600" alt="" /></li>
<li><img src="http://www.placehold.it/800x600" alt="" /></li>
<li> <img src="http://www.placehold.it/800x600" alt="" /></li>
<li> <img src="http://www.placehold.it/800x600" alt="" /></li>
<li> <img src="http://www.placehold.it/800x600" alt="" /></li>
<li> <img src="http://www.placehold.it/800x600" alt="" /></li>
<li> <img src="http://www.placehold.it/800x600" alt="" /></li>
<li> <img src="http://www.placehold.it/800x600" alt="" /></li>
</ul>
</article>