14 replies [Last post]
kira80
Offline
Enthusiast
Last seen: 15 years 6 weeks ago
Joined: 2005-04-06
Posts: 59
Points: 0

Each time I have to build a page with overlapping divs, the problem is the same : it works like a charm in FF and Opera but I always have to spend HOURS trying to make it work with IE, randomly changing this and that until I find a working solution. And when I find it eventually, I have no clue why it is working and my style sheet is full of IE hacks ( _.... ). That's every time the same nightmare.

Does somebody know exactly how IE treat the z-index property and its relations with the position property ?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index and IE : how does it exactly work ???

Can you show us an example or two of pages where you have seen the problem with IE but not with FF/Opera?

kira80
Offline
Enthusiast
Last seen: 15 years 6 weeks ago
Joined: 2005-04-06
Posts: 59
Points: 0

z-index and IE : how does it exactly work ???

I've had that problem with each site I've built so far (er...that would make like 3-4 sites ? heh) but last time I've seen it is a few hours ago when I was trying to help Jared on this topic : http://www.csscreator.com/css-forum/ftopic9429.html

Here is the sample page : http://www.culture-anime.net/sandbox/example2.html

The header is absolutely positionned, the left and right columns are in a wrapper in the flow which is overlapping the header, the wrapper and the header have the same parent, #centering-div. So if I set the z-index of #centering-div to 0, I create a z-index context where #centering-div has the z-index 0. Then I just have to set z-index:1 for #header, and z-index:2 for wrapper and it should be ok, am I right ?

Now see all the things I've had to randomly add in the css to make it work with IE...

Am I doing something wrong ?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index and IE : how does it exactly work ???

You didn't need all that stuff, see here All you needed to do was ensure IE was getting into its "hasLayout" mode for the #wrapper div, which you can do with a cross-browser safe width:100% as there are no horizontal margins, padding or borders on that div.

revised CSS

body, html
{
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: black;
}

#centering-div
{
	width: 780px;
	min-height: 100%;
	margin: 0 auto 0 auto;
	background-color: white;
	position: relative;
	z-index: 0;

	/*IE only stuffs*/
	_height: 100%;    /* as IE treats height as min-height, which it doesn't understand */
}

#header
{
	position: absolute;
	top: 0;
	left: 0;
	width: 780px;
	height: 150px;
	background-color: red;
	z-index: 1;
}

#footer
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 780px;
	height: 100px;
	background-color: blue;
	z-index: 1;
}

#wrapper
{
	position: relative;
	padding: 90px 0 100px 0;
	z-index: 2;
	width:100%;    /* to get IE into its hasLayout mode, safe for all other browsers as long as we have no padding, margins or borders */
}



#left-column
{
	float: left;
	width: 200px;
	background-color: yellow;

}

#right-column
{
	float: right;
	width: 580px;
	margin-top: 60px;
	background-color: green;
}

.clear
{
	clear: both;
	line-height: 1px;
	font-size: 1px;
}

kira80
Offline
Enthusiast
Last seen: 15 years 6 weeks ago
Joined: 2005-04-06
Posts: 59
Points: 0

z-index and IE : how does it exactly work ???

Now that I think about it, setting the width while it wasn't needed for some elements was one of the weird things that fixed the problems with z-index in IE for my other sites ! I didn't know it was related to the "haslayout" thingie...I knew it has to do with the white space bug, but not with z-index...will try to find more info about that.

Thx a lot for your help ! This forum is really useful...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index and IE : how does it exactly work ???

To force IE into "hasLayout" mode for an element you need to give it a dimension (there may be other methods). If you can give the element width:100% that will work safely across browsers. If you can't give the element a width (it has margins, borders and/or padding) then you can give the element an IE only height:1px. Since IE treats height as min-height, height:1px is pretty harmless (for IE).

Jared
Jared's picture
Offline
Enthusiast
USA
Last seen: 12 years 48 weeks ago
USA
Joined: 2005-01-09
Posts: 110
Points: 0

z-index and IE : how does it exactly work ???

Chris

Decided to revisit this issue again and used your above example; Can't for the life of me understand why you have the footer layer below the header and not below everything else in the page wrapper.

Using your model, the right column can grow beyond the footer rather than push it down. It simply over-laps it.

Jared

euio
Offline
Enthusiast
Last seen: 16 years 40 weeks ago
Timezone: GMT+8
Joined: 2005-03-03
Posts: 71
Points: 0

z-index and IE : how does it exactly work ???

oh you can also put the footer above the header if you want... in your stylesheet it doesnt matter... it's just how organised you want to be that affects how you code the styles. if you want to make it easier for you to read the codes you make, then you order it header, body, content, then footer...

but you can't do the same in html... everything has to be in order...

<div id="content"></div>
<div id="sidebar"></div>

could mean different when...

<div id="sidebar"></div>
<div id="content"></div>

well... just an example...
hope im making any sense...

thanks for listening...

Jared
Jared's picture
Offline
Enthusiast
USA
Last seen: 12 years 48 weeks ago
USA
Joined: 2005-01-09
Posts: 110
Points: 0

z-index and IE : how does it exactly work ???

Well that may be true to a point but the position of css elements on the page does matter. Nested div's and so on. I'm not bashing his layout, I'm curious why it was done. It does not make sense and I cant get it to work.

Look at the model located at www.naples-area.com notice that the text overlaps the footer.

Jared

euio
Offline
Enthusiast
Last seen: 16 years 40 weeks ago
Timezone: GMT+8
Joined: 2005-03-03
Posts: 71
Points: 0

z-index and IE : how does it exactly work ???

there must be something wrong with the footer-stick implementation... yea footer stick... he/she's trying to have the footer attach to the bottom of the page.

ill take a look at it later ....

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index and IE : how does it exactly work ???

Jared wrote:
Chris

Decided to revisit this issue again and used your above example; Can't for the life of me understand why you have the footer layer below the header and not below everything else in the page wrapper.

Using your model, the right column can grow beyond the footer rather than push it down. It simply over-laps it.

Jared

I simply took the sample page provided by Kira80 (in the third post of this thread) and solved the problem. I suspect I paid no attention to the footer and it is still in the position originally provided with the styles provided.

In most cases, it does make more sense to place the footer towards the end of the html where normal rendering flow will ensure it will appear at the bottom of the page and so obviating any requirement for complex positioning styles.

And yes, if you position any element absolutely you have to take care that other elements don't overlap or otherwise intrude on appearance you are trying to create.

Jared
Jared's picture
Offline
Enthusiast
USA
Last seen: 12 years 48 weeks ago
USA
Joined: 2005-01-09
Posts: 110
Points: 0

Interesting Generator

Thanks Chris;

Yes I see that, I haven't had a chance to do anything different with the example you provided (which is appreciated by the way) since my last post. I wanted people to see the demo in use on the link above.

I had not even considered the absolute position in solving the footer problem. I'll look into that.

Heres a question I'd like some feedback on. Look at this engine and tell me if this is all its cracked up to be.

http://www.cornerstonechurches.org.uk/ctindex.php# and his generator, http://www.cornerstonechurches.org.uk/css_variable_border_3_columned_pagemaker.php

Jared

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index and IE : how does it exactly work ???

It seems a little extreme, but then perhaps to get something to work in IE5 (mac & win) + all the modern browsers you need to be.

For all that there seems to be a 1px gap at the bottom of the screen.

There is a CSS based page creator on this site ... http://www.csscreator.com/version2/pagelayout.php

Exactly what layout are you looking for?

Jared
Jared's picture
Offline
Enthusiast
USA
Last seen: 12 years 48 weeks ago
USA
Joined: 2005-01-09
Posts: 110
Points: 0

z-index and IE : how does it exactly work ???

Chris; I thought the same thing; That generator is just a big mess with all that stuff it puts in.

I'm after a simple 2Col, left side navigation with a negative value to float above header. and footer. transparent elements all round so a background can be tiled and show through.

Problems thus far have been IE where the negative value does not match the FF version. And some text can break out of the container or page wrapper beyond the FIXED 780 width.

www.naples-area.com is where i've been testing and exploring
Jared

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

z-index and IE : how does it exactly work ???

This should really be a new topic, as we are no longer discussing Kira80's original problem.

But, something like this?

#page_wrap {
    position:relative;
    width:780px;
    margin: 0 auto;
}

#content {
    margin-top: (header_height)px;
    width: (780 - #menu_width)px;
    float:right;
}

#menu {
    margin-top: (header_height)px;
    width: (somewidth)px;
    float:left;
}

#header {
    position:absolute;
    height: (someheight)px;
    width: 100%;
}

#footer {
    clear:both;
}

<div id='page_wrap'>
  <div id='content'>blah</div>
  <div id='menu'>blah</div>
  <div id='header'>title</div>
  <div id='footer'>small print</div>
</div><!-- page_wrap -->

stick your background on #page_wrap or the body tag depending on if you want it to cover the whole screen or just your 780px wide page.