Why isn't my table cell the same height as it's contained text?

Question

Makes no sense. I have

<td valign="top" style="border-right: 1px solid #E84135; padding: 0 5px;" class="width-33pct-on-mobile">
  <a href="..." style='color:#666666;text-decoration:none;font-family:Helvetica,Arial,sans-serif;font-size:8pt;margin:0;line-height:8pt;'>EVENTS</a>
</td>
<td valign="top" style="border-right: 1px solid #E84135; padding: 0 5px;" class="width-33pct-on-mobile">
  <a href="..." style='color:#666666;text-decoration:none;font-family:Helvetica,Arial,sans-serif;font-size:8pt;margin:0;line-height:8pt;'>SOLUTIONS</a>
</td>
<td valign="top" style="padding: 0 5px;" class="width-33pct-on-mobile">
  <a href="..." style='color:#666666;text-decoration:none;font-family:Helvetica,Arial,sans-serif;font-size:8pt;margin:0;line-height:8pt;'>CONTACT</a>
</td>

which means there's no padding on the cell; no fixed height on the cell; no margin, border or padding on it's contained element; line-height equal to font-size.

By the way, this only happens on Internet Explorer.

On Chrome and Firefox it looks fine:

Welcome to the weirdness of the internet. On your TABLE command do you have "cellspacing='0' cellpadding='0'"? Also, your TD command has "padding:0px" but it doesn't have "margin:0px". You may want to check those out. Possible duplicate of http://stackoverflow.com/questions/4795803/padding-table-with-css-doesnt-work-on-ie and http://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css — Mark Manning, Jan 29 '16 at 17:32

score 1 · Answer 1 · answered Jan 29 '16 at 17:33

Not that you should be using tables for layout in 2016 but try this:

td {
  border-right: 1px solid #E84135;
  padding: 0 5px;
  line-height: 8pt;
}

a {
  padding: 0 5px;
  color: #666666;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 8pt;
  margin: 0;  
}

<table>
  <tr>
    <td valign="top" class="width-33pct-on-mobile">
      <a href="...">EVENTS</a>
    </td>
    <td valign="top" class="width-33pct-on-mobile">
      <a href="...">SOLUTIONS</a>
    </td>
    <td valign="top" class="width-33pct-on-mobile">
      <a href="...">CONTACT</a>
    </td>
  </tr>
</table>

Why isn't my table cell the same height as it's contained text?

1 Answers1