Safari 5.1 breaks CSS table cell spacing

Question

My site was working fine across all major browsers right up until the update to Safari 5.1. Now, the primary navigation is busted up. I was using display:table-cell on the anchor element within the list element and was also using the font-size:0 hack to remove the spacing in between menu elements. Has anyone else encountered this issue and have a solution they could offer up?

Before:

After:

CSS:

#navigation {
  padding-top: 7px;
}

#navigation ul.links, /* Main menu and secondary menu links */
#navigation .content ul /* Menu block links */ {
  margin: 0;
  padding: 0;
  display: block;
  font-size: 0; /* this is a hack so that the spacing between the menu buttons disappear
                   since they are inline-block elements, this should be unneccessary when
                   CSS3 is approved */
}

#navigation ul.links li, /* A simple method to get navigation links to appear in one line. */
#navigation .content li {
  display: inline-block;
  padding-right: 0;
  padding-left: 0;
  margin: 0;

  /* below is a fix for IE7 to get the main navigation items lined up correctly
   * in one row
   */
  zoom: 1;
  *display: inline;
}
#main-menu ul {
  width: 100%;
}
#main-menu li {
  width: 108px;
  text-align: center;
  padding-bottom: 7px;
  font-size: 11pt;
}
#main-menu a {
  display: table-cell;
  width: inherit;
  text-decoration: none;
  font-size: 0.9em;
  color: #035B9A;
  background-color: white;
  height: 30px;
  vertical-align: middle;
}

HTML:

<div id="navigation">
    <div class="section">
        <h2 class="element-invisible">Main menu</h2>
        <ul id="main-menu" class="links inline clearfix">
            <li class="menu-379 first"><a href="/about-scrubbed">About Us</a></li>
            <li class="menu-401"><a href="/" title="">Research</a></li>
            <li class="menu-385"><a href="/education">Education</a></li>
            <li class="menu-402"><a href="/" title="">Outreach</a></li>
            <li class="menu-403 active-trail active"><a href="/news" title="" class="active-trail active">News &amp; Events</a></li>
            <li class="menu-439"><a href="/people">People</a></li>
            <li class="menu-405"><a href="/" title="">Resources</a></li>
            <li class="menu-406"><a href="/" title="">Publications</a></li>
            <li class="menu-415 last"><a href="/partners">Partners</a></li>
        </ul>
    </div>
</div>

Thanks.

Just a note, this is a Drupal 7 site.

Also I freely and humbly admit I am not the very best at CSS markup. I'm learning a lot right now and am just trying to scrape through.

Answer 1

Solved by making the list elements display as block and float them to the left.

#navigation ul.links li, /* A simple method to get navigation links to appear in one line. */
#navigation .content li {
  display: block;
  float: left;
  padding-right: 0;
  padding-left: 0;
  margin: 0;

  /* below is a fix for IE7 to get the main navigation items lined up correctly
   * in one row
   */
  zoom: 1;
  *display: inline;
}

Answer 2

You want border-collapse:collapse on the display:table element to remove cell spacing.

Answer 3

I took your css and html, and added to the css

body {
    background-color: gray;
}

and I got the following, which looks correct.

This was run under lion, which has Safari 5.1

Answer 4

For those having trouble with Safari and dimensions for elements set to display:table; I was able to fix my problems by removing the padding and adding padding to a child element set to display:table-cell;

Apparently Safari does not like it when you try to add padding to an element set to display:table; In retrospect, this makes sense.