3

I have a nav menu made using a table with links inside. On chrome and all other browsers, the td elements have no padding, and the inside links can have padding and fill up the whole td element. On Safari there is an added top and bottom padding that is throwing off the spacing of the inner links. How do I remove this extra padding in safari?

html-

<nav>
  <div class="container">
    <table>
        <tr>
          <td><a href="">Link 1</a></td>
          <td><a href="">Link 2</a></td>
          <td><a href="">Link 3</a></td>
          <td><a href="">Link 4</a></td>
          <td><a href="">Link 5</a></td>
          <td><a href="">Link 6</a></td>
          <td><a href="">Link 7</a></td>
          <td><a href="">Link 8</a></td>
          <td><a href="">Link 9</a></td>
        </tr>
      </table>
  </div>
</nav>

css(scss) -

.container {
  position: relative;
  display: block;
  margin: 0px auto;
  padding: 0px 20px;
  max-width: 1100px;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

nav {
  background: $modBg;
  border: 1px solid $border;
  border-left: 0px;
  border-right: 0px;
  margin-bottom: 9px;
   table {
     width: 100%;
     tr {
       td {
         text-align: center;
         a {
           padding: 15px;
           display: inline-block;
           width: 100%;
           height: 100%;
         }
       }
     }
   }
 }

and some images showing the difference-

table cell on safari

Here's a jsfiddle replicating the problem- https://jsfiddle.net/davmex/m4ea9gLr/

Teivaz
  • 5,462
  • 4
  • 37
  • 75
davmex
  • 31
  • 3
  • I'm looking at it in Safari and Chrome on Mac and it looks the same. https://jsfiddle.net/6k4gfk00/. Can you create a fiddle where it's different? Which version of Safari are you using? Are you using a reset css? – Barbara Laird Sep 22 '17 at 20:40
  • I figured out why your fiddle was different, all my styles have box-sizing: border-box, when I added that it replicated my problem, I'll add a link in my description – davmex Sep 22 '17 at 20:50
  • What version of Safari are you on? Your fiddle looks identical in both to me. – Barbara Laird Sep 22 '17 at 21:05
  • I'm using Browserstack to test it on safari 10.1, I also have a colleague with a mac that confirmed the bug on his macbook. – davmex Sep 22 '17 at 21:17
  • Can't replicate anymore on Safari Version 16.5 (17615.2.9.11.6, 17615) – Manuel Meister Jun 13 '23 at 07:54

0 Answers0