I was debugging css today, and I ran across some strange behavior with our pagination links. Occasionally the number of pages would wrap around, which is normal, but I noticed that in Safari the right side of the last element in each row was getting chopped off.

Here’s a picture in Safari (and Webkit):

Here’s the same page (what it’s supposed to look like) in Firefox:

Here’s the HTML:

<div id="pagination-links"><strong>Pages: </strong>
  <ul>
    <li class="selected"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li><a href="#">13</a></li>
    <li><a href="#">14</a></li>
    <li><a href="#">15</a></li>
    <li><a href="#">16</a></li>
    <li><a href="#">17</a></li>
    <li><a href="#">18</a></li>
    <li><a href="#">19</a></li>
    <li><a href="#">20</a></li>
    <li><a href="#">21</a></li>
    <li><a href="#">&#8594;</a></li>
  </ul> of 21 total pages
</div>

And the CSS:

#pagination-links {
  color: #404040;
  line-height: 25px;
  margin: 0 15px 15px 15px;
  font-size: 12px;
  width: 300px;
}
#pagination-links strong {
  padding-right: 10px;
}
#pagination-links ul {
  display: inline;
}
#pagination-links ul li {
  display: inline;
}
#pagination-links ul li a {
  background-color: #fff;
  border: #c5c0c0 1px solid;
  color: #5b969f;
  padding: 2px 6px;
  text-decoration: none;
}
#pagination-links ul li a:hover {
  border-color: #404040;
  color: #404040;
}
#pagination-links ul li.selected a {
  background-color: transparent;
  border: 0;
}

This display behavior only appears in Safari. It looks correct in Firefox (2 and 3), as well as IE 6.

Safari version: 3.1 (5525.13) Webkit revision: r31388

At first blush, this looks like a browser bug. But before I get too much farther in tracking this down, has anyone else encountered this? Any insight would be appreciated!

Update:

Here’s a zipped file with everything you need to reproduce the bug: cut-off-test.zip (86k)