Question

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>

Answer 1

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