Already wrote about increasing everything in Mozilla. The problem with this decided, set the height and line-height. But now the next problem arose. The text "test" looks normal everywhere, but for some reason in Mozilla Firefox it is shifted 2 pixels down ...

#box_head { overflow: hidden; background: url('../images/box/box_head_bg.png') #3d3d3d; border-top: 1px solid #868686; border-bottom: 1px solid #3d3d3d; padding: 10px; color: #fff; font-size: 12px; font-weight: bold; height: 15px !important; line-height: 15px !important; } <div id="box_head">test</div>

    2 answers 2

    these two pixels are your top and bottom frame. make sure of this by reducing padding by 2px , or element height by 2px .

    • @ LeD4eG, why is everything okay in chrome then? - ModaL
    • Yes, I also encountered a similar problem. when creating the button, it was necessary to specify the height and the "jumps" began: in chrome, it was normal, in the brain - two pixels lower. Caused by height difference in these browsers. - LeD4eG

    To solve this problem, you need to set the line-height not for the #box_head block, but for its parent. Then everything will look the same in all browsers.

    • and if he has no parent? - ModaL
    • Did not quite understand the question. If not, then you can set =) - psyсho_Octopus