Div relative positioning issue in Internet Explorer

Question

The HTML:

<div id="broadcast">
    <div id="broadcast_header">
        Neighbourhood Broadcast
    </div>
</div>

The CSS:

#broadcast_header
{
 background-color: #A0522D;
 width: 100%;
 height: 20px;
 position: relative;
 top: -20px;
 font-weight: bold;
}

Firefox: All fine, header appears 20px above the div, its cool.
IE: Refuses to show div(broadcast_header)!

Overflow: visible
doctype definition: Given

My input: Suppose change top to - top: -5px; It shows the div(header) partially. Thank you :].

Answer 1

But here i can see broadcast_header in IE

Answer 2

Add body { margin:0 } in your CSS.

Answer 3

This works differently. The surrounding element (#broadcast) has to have the position: relative; property. Then you can position (#broadcast_header) relative to this one by using position: absolute;

#broadcast_header
{
    background-color: #A0522D;
    width: 100%;
    height: 20px;
    position: absolute;
    top: -20px;
    font-weight: bold;
}

#broadcast
{
     position: relative;
}

Answer 4

I'm not sure what is going wrong with your current code. But here is a jsFiddle sample I made to reproduce the error. But it looks good in both Firefox and IE (8 and 8-compatiblity).