Question

I’m working on a site design and I’m stuck with tabs that aren’t working properly across all browsers. The site is here:
http://www.designmeditations.com/stc4-1/

In the current version of Chrome it looks good. In FF, it’s hanging one pixel low. If I move it one pixel up, then it looks good in FF and you see a 1 pixel line along the bottom in Chrome when you hover.

Suggestions? I typically do these transitions with images on unordered list elements, but I didn’t figure I needed to use images at all in this particular case.

Thanks.

Answer 1

I can’t see the difference that you’re talking about, but good practice with tabs is to state the line-height in pixels. Try adding line-height: 20px and adjust from there. It will most likely fix the discrepancy.

#mainnav a {
  background: transparent;
  padding: 6px;
  border: #0A4F91 solid 1px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  color: white;
  text-decoration: none;
  margin-right: 10px;
  line-height: 20px;
}