Div positioning problem in IE

Question

down vote favorite

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

sorry i can't get ur question.did u need a partial header.

Answer 2

try top:-10px,it will show in IE and Firefox

Answer 3

You have to set the height and width css for #broadcast

#broadcast
{ 
    height:200px;
    width:200px;
    position:relative
}

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