DIV's and z-indexing in IE.

iCraig · 15 Jan 2006 at 17:27

http://test.metrix.co.uk/news.html

As you can see in Firefox, the content DIV containing my headers and text overlays perfectly.

However in IE its nowhere to be seen.

Any ideas? Any specific value that IE needs for it to display?

Mr_L · 15 Jan 2006 at 17:38

Looks exactly the same in IE as it does in FF to me, unless I'm being really thick.

OT: But I like the menu system you've got going there.

iCraig · 15 Jan 2006 at 17:47

My IE doesn't show it.

Also absolute positioning makes it static in the browser, does relative positioning or fixed or whatever stop this. E.g. at 1024x768 the DIV is in a different position to 1600x1200

Firefox:

IE:

Mr_L · 15 Jan 2006 at 17:57

With the margin for the container at auto for both left and right it should automatically stick in the middle. As long as the body margin and padding are set to 0.

EDIT: When I click your links I get a 404.

Augmented · 15 Jan 2006 at 18:02

iCraig said:
Also absolute positioning makes it static in the browser, does relative positioning or fixed or whatever stop this. E.g. at 1024x768 the DIV is in a different position to 1600x1200

Yes, position: relative; will, as long as you don't move it i.e. with any of the top, right, bottom, or left properties. It will gain the properties of a positioned element, but won't move from where it should normally be.

However, absolute positioning can be relative too, in fact it's always relative to something. Just make sure to give its containing element the positioned property, as above, and then you can position the child element relative to its edges. Otherwise the element gets positioned relative to the edge of the browser/<body>, hence why you get different results at different resolutions

.

iCraig · 15 Jan 2006 at 18:07

Mr_L said:
With the margin for the container at auto for both left and right it should automatically stick in the middle. As long as the body margin and padding are set to 0.

EDIT: When I click your links I get a 404.

The container DIV is fine, its the overlaying DIV that isn't displaying correctly. Especially in IE, where its not even displaying

The HTML:

Code:

  <div id="NewsContent">
    <h1>Header Test</h1>
    <h2>Sub header test</h2>
    <p>Text test</p>
  </div>

The CSS

Code:

DIV#NewsContent {
    z-index: 3;
    width: 637px;
    height: 312px;
    border: 12px #FFFFFF solid;
    background-color: #E0E0E0;
    position: absolute;
    left: 544px;
    bottom: 660px;    
}

Check the pics above to see the problem.

Just to repeat, the DIV displays in the correct place in Firefox at 1600x1200, but not in any other resolution.

And in IE is doesn't even display.

I can see why IE gets slated now, no support for z-indexing? I don't know

iCraig · 15 Jan 2006 at 23:18

Still having trouble, FF I can get it to go where I want, in whatever browser.

But it doesn't display at all in IE, arghh