Search code examples
htmlcssinternet-explorer-7

Missing top and bottom border in IE7

I have a problem with border in IE7. For some reason the border shows only from the left and the right side:

IE7, renders incorectly:

alt text

FF, renders correctly:

alt text

Using this CSS:

.tags a {
  background:#fff;
  border:1px solid #D8DFEA;
  padding:5px;
  margin-left:5px;
  color:#3B5998;
  font-size:14px;
}

What am I doing wrong?

Solution

  • Most likely the borders are clipped by the height of the .tags container. The css for .tags a itself looks OK.

    Note that since <a> is an inline element you can't set it's height (unless you set it to display:block). The height difference is most likely caused by the fonts being rendered differently by different browsers. Also watch out for Safari which tends to render fonts fatter (taking up more pixels) than all other browsers.