Problem in firefox vs chrome with bold text and double borders

Question

I'm working on a site and I have some problems that I hope you guys can help me with :)

1. If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.

2. In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.

Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:

This is my project.

I hope some one can help me out with this.

If you have something I better I can do, I will be glad to hear that too :)

Answer 1

Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.

Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.

You can put the code below in your css to target Firefox and bring the outline back in:

@-moz-document url-prefix() {
    #content{
        outline-offset: -11px;
    }
}

Live example: http://jsfiddle.net/tw16/n8bet/

Answer 2

@1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers

@2: remove this line from #content css:

outline: 1px solid #B9BDBE;