CODEWITHSUNDEEP
htmlcss
Subpar Web Dev
Subpar Web Dev

Reputation: 3280

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

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.

enter image description here

enter image description here

On Chrome and Firefox it looks fine:

enter image description here

Upvotes: 1

Views: 95

Answers (1)

Karl Dawson
Karl Dawson

Reputation: 977

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>

Upvotes: 1

Related Questions