Mystery 1px border in WebKit

Question

I have a mystery 1px bottom border showing up in Safari and Chrome (I guess a WebKit thing). Firefox displays it fine.

The button below should sit flush with the tealy bar beneath. There should not be that 1px line separating them.

I've played around with height, border, position, padding and margin but haven't been able to figure this one out.

Changing bottom: 0 to bottom: -5px in Web Inspector still produces the line.

There are quite a lot of styles going into it, so I'll try and amalgamate the cascade.

#tell-a-friend {
  background-repeat:no-repeat;
  display:block;
  height:33px;
  margin-right:0;
  position:absolute;
  float:right;
  font-size:1.2em;
  margin-right:0.8em; 
  background-position:right 0;
  bottom:0;
  height:35px !important;
  left:682px;
  width:82px;
}

Then again, I may be better off linking to the site.

The CSS is minified, so use Web Inspector to view the CSS.

I've tried everything I can think of right now, so I'm going to see if you guys can help me :)

Many thanks!

Answer 1

Edit: it's your <div id="header">'s absolute height. Try making it one pixel shorter.

It's not a black outline, it's the gray background... the background image has a 1px transparent row on the bottom, and the gray background shows through.