Internet explorer spilling content out of container

Question

I am trying to make a bar that will show up on top of sites that belong to company I work for.

I first developed it for firefox and then came in horror when saw it in IE. It's completely broken.

The bottom line problem is how to make IE spill it's content when it's height is set?

Is there a fix for this, or should I take a different approach?

Here is the code for my current bar:

#rurbar{
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:12px;
background:#111111;
color:#FFFFFF;
border-bottom:1px solid #999999;
position:absolute;
height:25px;
top:0;
left:0;
width:100%;
overflow:visible;
}

I have some dropdown menus in this bar so I can't use overflow:hidden.

Answer 1

I've been testing your CSS in IE8, and it behaves in the exact same way as Firefox does. That is; the contents of a #rurbar div who's content exceeds the given height flows over the bottom of the div, but the div remains the same.

With one exception. When the page is rendered in quirks-mode, the div will stretch.
Is the document being rendered in Quirks-mode? - To find out, press F12 in IE8 and look for the 'Document Mode'. You can change it to one of the Standard modes and see if it changes anything.

If this is the problem, then you will have to validate the HTML, so that IE won't bug out and enter Quirks-mode.

Answer 2

Also, make sure that you specify a DOCTYPE at the top of your page, i've come across some CSS/JS oddities by forgetting this.