html - Debugging a popup that doesn't display correctly in IE9

Question

I've asked this in another question where we could not solve it

Filling the top part of this window?

and now I've got the faulty code in a fiddle that we can debug: http://jsfiddle.net/qffh5/6/

In internet explorer 9 the top of the window is not filling all the way. I suspect that CSS is being overridden so I looked in IE with the developer tools but couldn't find what was wrong:

Answer 1

When I pinpoint your issue I noticed that the styles are not correctly inherited. So i have cleaned up your fiddle so that only the "problem" existed.

html

<div id="topBar">
    <span class="pusher TB_nb">
        <h2>Some text</h2>
    </span>
    <span id="close">
       <a href="#todo" onclick="#do something">X</a>
    </span>
</div>

Your CSS

#topBar {width:100%; background-color:#EFEFDC;}
#close {position:absolute; right:5px;}

*Fiddle with only this part: http://jsfiddle.net/qffh5/30/*

Corrected CSS

#topBar {width:100%; background-color:#EFEFDC; display:inline-block;}
#topBar h2 {float:left}
#close {position:relative; float:right;}​

fiddle can be found here : http://jsfiddle.net/qffh5/28/