Missing top and bottom border in IE7

Question

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:

FF, renders correctly:

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?

Answer 1

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.

Answer 2

I just had the same problem in IE. I think this was cause by me setting the font-size within this div.

I set the line-height to match my font-size, and this works in IE, FF, Chrome, Opera, Safari - yeah!