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.

Not a live site, it's developed internally right now with release scheduled for October 1st... really sorry. — Lester Peabody, Aug 05 '11 at 19:16
However I did solve my own problem yet again. I setup the list element to `display: block;` and `float: left;` and it started working again. I'd post it as an answer but Stack won't let me :( Need to get that rep up! — Lester Peabody, Aug 05 '11 at 19:18
@BoltClock Please check the comment **immediately** above yours. I have to wait another 6 hours-ish before Stack will let me answer my own question because my rep is not high enough. — Lester Peabody, Aug 05 '11 at 20:06

score 8 · Answer 1 · answered Jul 07 '12 at 03:03

8

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.

answered Jul 07 '12 at 03:03

Kevin C.

2,499
1
27
41

2

Thank you a thousand times. This was driving me nuts. – Hobo Dec 12 '12 at 19:53

score 3 · Accepted Answer · answered Aug 08 '11 at 00:47

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;
}

score 1 · Answer 3 · answered Aug 05 '11 at 19:15

1

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

answered Aug 05 '11 at 19:15

Phrogz

296,393
112
651
745

That was my original thought but upon review of my CSS I never actually had a parent element with `display: table;` so I wasn't sure where to put `border-collapse: collapse;`. However my fix as noted above has everything working again. I'd post it as an answer but Stack is going to make me wait 7 more hours. – Lester Peabody Aug 05 '11 at 19:22

score 0 · Answer 4 · answered Aug 05 '11 at 19:07

0

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

answered Aug 05 '11 at 19:07

Bill Lynch

80,138
16
128
173

Well, that change would definitely have no bearing on layout. Maybe it's an issue with Safari 5.1 on Windows. Thanks for checking on it though. – Lester Peabody Aug 05 '11 at 19:30

Safari 5.1 breaks CSS table cell spacing

4 Answers4

Linked