While wrapping up the CSS for the new version of Theia, I wanted to go over a few "issues" I had spotted. One of which was an inconsistency with the absolute positioned tool-tip tail image. After seeing it working fine on Firefox, and overlapping on Chrome, I had just intuitively assumed it was a Chrome issue.

 

I looked into it more today and found that it is in fact an issue with how Firefox positions elements (absolutely) when the parent element (relative) has a border. Well, at least I suspect it is the border that is causing the inconsistency since I am noticing a 2 pixel gap (1 pixel width on two sides is 2 pixels).

 

The attached image shows screen captures from all 5 of the big browsers. As you can see, both Chrome and Safari render the area nearly identical (since they are both webkit browsers). IE and Opera also both position the "tail" image for the tooltip at the proper position, though you can see neither of which currently support the corner-radius property. Firefox, however, positions the tail two pixels too high - unlike any of the other big guys.

 

So which browser is doing it right according to the specifications? I'd love a confirmation, since right now I have just gone with what the other four do, especially since (even though I don't like the browser) I know that Opera renders things correctly most often (being the only one to pass the acid3 test). If you have any insight into a work around for Firefox, let me know. I've tried prepending -moz- to the top property to see if that would work as an override, but no dice.