Safari Inline Elements Bug?

March 28th, 2008

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)


2 Responses to “Safari Inline Elements Bug?”

  1. Ryan Heneise Says:

    I’m not really sure why this is the case, but Safari really wants the <li> elements above to be display: inline-block instead of display: inline.

    I discovered the inline-block trick randomly here: http://trac.symfony-project.com/ticket/1673

    Unfortunately, the only other browser that I tested that supports inline-block is Firefox 3. IE, Firefox 2, and others don’t understand inline-block and turn the page numbers back into a list. So I resorted to targeting Safari:

    /* Show this style only to Safari */
    body:not(:root:root) #pagination-links ul li { display: inline-block; }
    Source: http://thomas.tanreisoftware.com/safari.html

    Here’s another alternative: http://www.ruzee.com/blog/2007/05/align-list-items-horizontally-with-css/

  2. Sebastian Says:

    Nice! :)

Sorry, comments are closed for this article.