css-position

This is an IE-only problem. You can see the problem here (dead link) with IE (wait for the page to load, and hover the NY Times icon in the bottom left toolbar. Then try to select a new option). The Layout: .toolTip becomes visible when it's parent div is hovered over. Inside of .toolTip is a select box. When the user opens the select box to make a selection, the parent element gets hidden. Why is IE thinking that when I hover over the Select box, I am not over the parent div anymore? Here is some relevant code (pared down for clarity): #toolBar .toolTip { position: absolute; display:none;

I have a layer with an image inside: <div id="foo"><img src="url" /></div> and it is fixed positioned: #foo { position: fixed; } but I also want the layer to be horizontally centered in the page. So I've tried: http://jsfiddle.net/2BG9X/ #foo { position: fixed; margin: auto } and http://jsfiddle.net/2BG9X/1/ #foo { position: fixed; left: auto; } but doesn't work. Any idea of how to achieve it? When you position an element to fixed , it gets out of the document flow, where even margin: auto; won't work, if you want, nest an element inside that fixed positioned element and than use margin: auto;

I am working on a site with two absolutely positioned divs... the logo and the menu (navbar) IE is burying them both, even after multiple tries of z-index manipulation. Why can't IE work as well as Firefox or even Opera for God's sake? UPDATE....... I forgot to mention that these divs are positioned over a flash movie. How could I possibly have left that out?! If your flash movie is burying your other content you may have luck by adding an additional param element to your embedded object: <param name="wmode" value="opaque" /> For a longer answer you can see this blog post about stacking

All, I have a page which is suppose to take up only the available screen space in the browser. I have a 'top bar' and a 'bottom bar', both of which are fixed positioned at the top and bottom of the page. I want to have a div which will consume (take up) the remaining of the space inbetween the two bars mentioned above. Its crucial that the middle div is not overlapped by the top and bottom bars. Is this at all possible with CSS or do I need to make use of js. Also, if I do go with js, considering the browser loads up the CSS first before the js code, how is the above work out using js for

JSFiddle Demo I have a div for a header and a div for a content wrap. For some reason, I can't have a margin on the bottom of the header that forces the content wrap to push down. It just ignores it completely and I have no idea why. Does anyone know what is going on with this? It doesn't do this when I take away the position: fixed; attribute on the header, but I want it to be fixed at the top so when scrolling the header is always in view. Hoping someone can explain why this happens or at least what it is called so I can google it. body { margin: 0; padding: 0; font-family: arial; background

I'd like to make a menubar, which is fixed on the top of the page while scrolling. Something like the top menu in Facebook. Also, I want a div holding the logo float at the left of menubar, and a nav float at the right of the menubar. This should get you started <div class="menuBar"> <img class="logo" src="logo.jpg"/> <div class="nav"> <ul> <li>Menu1</li> <li>Menu 2</li> <li>Menu 3</li> </ul> </div> </div> body{ margin-top:50px;} .menuBar{ width:100%; height:50px; display:block; position:absolute; top:0; left:0; } .logo{ float:left; } .nav{ float:right; margin-right:10px;} .nav ul li{ list