Div Padding differences between Mozilla and everyone else

I have a div element with a background image that I am vertically trying to align some text in.

The text pads itself one way in IE, Chrome and Safari but one pixel differently in Firefox 3 / 4.

It's one pixel lower in Firefox and is driving me nuts. Normally it wouldn't be that big of a deal but I am vertically centering text in a caption bubble so I need it to be perfect.

Anyone know why it's different in Firefox and whether there is a workaround? Something like a -moz-padding-top would be super even though I know that doesn't exist.

The padding that's giving me issues is set below in开发者_JAVA百科 .moodInner

#content .profilePic
{
    float:right;
    width:230px;
    padding:10px 0 0 0;
    text-align:center;
}
#content .profilePic #moodOuter
{
    height:36px;
    margin-bottom:2px;
    width:100%;
    background:url('/_assets/img/mood-bubble-profile.gif') no-repeat center;
}   
#content .profilePic #moodInner
{
    padding:4px 0 0 0;
    font-size:0.85em;
}
<div class="profilePic">
     <div id="moodOuter" style="display:
            <?php if ($mood == "") { ?>none;<?php } else { ?>block;<?php } ?>">
            <div id="moodInner"><?php echo trim($mood); ?></div>
     </div>
</div>

---

I would try removing #moodInner altogether, placing the content of if into #moodOuter and setting a line height on it (only works if your text is 1 line). The line-height should be the same as the height. This will vertically center your text inside #moodOuter. (although i am not sure if it will fix your problem.)

#moodOuter {
  height: 36px
  line-height: 36px;
}

---

Have you tried setting the font-size of #moodInner to a px value instead of an em one.. calculating ems to pixels could be causing the default line-height to differ by a px across browsers

You can't have half a pixel, so when making an em conversion and the outcome equates to a partial pixel, the browsers have to "round" and they all round differently