Div relative positioning issue in Internet Explorer

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 di开发者_如何学JAVAv(broadcast_header)!

Overflow: visible

doctype definition: Given

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

---

Add body { margin:0 } in your CSS.

---

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;
}