Div在Firefox中未显示

I have a dialog box. When I call a show on it, everything in the box shows except for the contents in the header DIV and this only happens in firefox. It shows fine in both IE and chrome. I am doing nothing fancy in the dialog box any ideas?

Also it shows up when I hover over the buttons in the dialog box and when i inspect the dialog box but if I reload the page and click show again, the header is no longer there

CSS:

.formHeader {
    padding:10px;
    background-color:#f2f2f2;
    font-size:14px;
    font-weight:bold;
}
.dialogContainerBlock .formHeader{
    background-color:#333;
    color:#fff;
    margin-left:-20px;
    padding-right:30px;
    margin-top:-40px;
    position:fixed;
    z-index:990;
    width:inherit;
}

HTML:

<div class="dialogContainerBlock" style="width:100px; background:black;">
    <div class="formHeader">Hi I work</div>
</div>

The negative margin-top seems to be the most relevant style causing this. Watch out for negative margins for hiding things, because when you want to show them you will need to remember to undo them. You might create a class like "closed" and then have that contain the negative margins, then remove that class when you want to show the div.

position:fixed is relative the body of the document, by using negative margins you are hiding the div outside the boundaries of the body.