Z-index problem

noy1213 · November 20, 2010, 8:37pm

Hi,

i have problem with the inner div - his height most be a number (not auto)
and i want that this div will change automatic his height.
and in his bottom there is a contect-bottom div that do a 151px space i want that the text will be above this bottom

i know its hard to understand what i mean the easy way to understand, is just to look over here:
http://sware.co.il/ie/index-new.html

please help

thanks.

Rayzur · November 21, 2010, 3:00am

but witout postion relative and z index the page will be look like here
That’s what I would have assumed you were wanting.

Before that the #inner div was completely hiding your #menu and it was also hiding most of the top right image in the header.
Why do you want to drag the #inner div on top of those elements?

I guess I don’t know what you are trying to do, can you explain it a little better?

i dont want a space in the bottom (151px space) without anything

Are you talking about the footer space?
If so, then you need to drag the #inner div down not up. I don’t see that working though because your footer image will be hidden then.

Rayzur · November 21, 2010, 1:07am

Hi noy,

It’s not a z-index problem, the problem is that you have a floated right column in the #inner div.

Floats are removed from the normal page flow so you must force the parent (#inner) to enclose it’s floated children. That is normally done by using overflow:hidden. However, in your case we can’t use that because your floated right column is shifted out with a negative margin and it would get clipped off.

The way around that is to use a simple “clearfix” adaption for modern browsers and “haslayout” on #inner for IE6/7.

You don’t need to set height:auto everywhere since it is the default. Nor did you need the relative positioning and z-index on #inner. I have removed what you did not need and swapped them out with what you do need.

The changes to these selectors should get you back in order:


[B]#inner[/B] {
    [COLOR=Blue]width:100%;[/COLOR][COLOR=DarkGreen]/*haslayout IE (contain floats)*/[/COLOR]
}
[B]#inner:after[/B] { [COLOR=DarkGreen]/*Add this to contain floats without clipping*/[/COLOR]
[COLOR=Blue]    clear:both;
    display:block;
    content:"";
    font-size:0;[/COLOR]
}
[B]#inner-right1[/B] {
   [COLOR=Blue] float: right;
    width: 210px;[/COLOR]
}
#inner-right1-cat {
    width: 232px;
    height: 400px;
    margin-right: -22px;
    background: #f8f8f8;
}
[B]#inner-right1-facebook-img[/B] {
    background: url(../images/facebook-img.png) no-repeat;
    width: 173px;
    height: 51px;
    [COLOR=Blue]margin:21px 21px 30px;[/COLOR][COLOR=DarkGreen]/*need 30px bottom margin*/[/COLOR]
}

noy1213 · November 21, 2010, 1:20am

thanks again, but witout postion relative and z index the page will be look like here:
http://sware.co.il/ie/index-new.html

and what about the negative margin ? i dont want a space in the bottom (151px space) without anything

thanks alot! noy

noy1213 · November 21, 2010, 1:11pm

you can check the site now, you can see that the content-top-right is hide the facebook img
so what’s i can do with the content-bottom space? margin negative dont working well… maybe js? do you have any idea for that?

thanks.

Rayzur · November 22, 2010, 4:19am

Hi noy,

The problem with the facebook img being hidden was because #content-top-right was layering above it. Just as we had mentioned in your other thread the cure for that is to add position:relative; to your #inner div to layer it above the #content-top-right/left divs.

You are using an xhtml 1.0 transitional doctype when your page was basically coded as strict. The only thing that was failing validation as strict was the deprecated “name” attributes on your <form>s and your inputs needing to be wrapped in a block. I went ahead and fixed those two issues and set it up as xhtml 1.0 strict.

Here is your page with those corrections:
http://www.css-lab.com/test/noy1213/test.html
http://www.css-lab.com/test/noy1213/css/main2.css

I have also added a left div nested in your #inner, that will get you prepared for content on the left side of the page as you can see. The relevant changes to the css are shown below but you might want to save a copy of both html/css from those links I just gave. There were other changes in the html as I pointed out above.

Hope that helps

[B]#inner[/B] {
    width: 100%;
    [COLOR=Blue]position:relative;[/COLOR][COLOR=DarkGreen]/*layer above #content-top-left/right*/[/COLOR]
}
#inner:after {
    clear: both;
    display: block;
    content: "";
    font-size: 0;
}
#inner p {
    margin:1em;
}
[B]#inner-left[/B] {
    float: left;
    width: 790px;
}
#inner-right1 {
    float: right;
    width: 210px;
}
[B]img#inner-right1-facebook-img[/B] {
    background: url(../images/facebook-img.png) no-repeat;
    width: 173px;
    height: 51px;
    margin: 21px;
    [COLOR=Blue]vertical-align:bottom;[/COLOR]
}
[B]#inner-right1-cat[/B] {
    width: 232px;
    [COLOR=Red]/*height: 400px; /*Use min-height: if you must set a height*/[/COLOR]
    [COLOR=Blue]overflow:hidden;[/COLOR][COLOR=DarkGreen]/*uncollapse child margins*/[/COLOR]
    margin-right: -22px;
    background: #f8f8f8;
}
   [B] img#inner-right1-cat-top[/B] {
        margin-right: -22px;
        background: url(../images/category-top-background.png) no-repeat;
        width: 232px;
        height: 16px;
        [COLOR=Blue]display:block;[/COLOR]
    }
    [B]img#inner-right1-cat-bottom[/B] {
        margin-right: -22px;
        background: url(../images/category-bottom-background.png) no-repeat;
        width: 232px;
        height: 14px;
        [COLOR=Blue]display:block;[/COLOR]
    }

.inner-right1-adv {
    width: 200px;
    [COLOR=Red]/*height: 300px; /*Use min-height: if you must set a height*/[/COLOR]
    border: 2px solid #f8f8f8;
    margin: 10px 0;
    float: left;
}

noy1213 · November 22, 2010, 7:44pm

hi thanks

you have any idea about the bottom?

"
2. so what’s i can do with the content-bottom space? margin negative dont working well… maybe js? do you have any idea for that?
"

Rayzur · November 22, 2010, 8:28pm

Hi,
If you remove the overflow from #content-bottom then you can set a negative top margin on it. We will need to set a 1px height on#inner:after for it to work though.

Try this:


[B]#content-bottom[/B] {
    [COLOR=Blue]margin-top:-151px;[/COLOR]
    position: relative;
    [COLOR=Red]/*overflow:hidden; remove this*/ [/COLOR]   
    padding: 0 40px;
    background: url(../images/site-repeat-images.png) repeat-x 0 -221px;
    [COLOR=Blue]height: 151px;[/COLOR]
    width: 920px;
}
[B]#inner[/B] {
    width: 100%;
    position:relative;/*layer above #content-top-left/right*/
    [COLOR=Blue]z-index:1;[/COLOR]
}
[B]#inner:after[/B] {
    clear: both;
    display: block;
    content: "";
    [COLOR=Blue]height:1px;[/COLOR]
}

Then reduce the width here and add min-height for short pages:

[B].inner-right1-adv[/B] {
    [COLOR=Blue]width: 185px;[/COLOR] [COLOR=Red]/*200px*/[/COLOR]
    /*height: 300px; /*Use min-height: if you must set a height*/
    [COLOR=Blue]min-height:151px;[/COLOR]
    border: 2px solid #f8f8f8;
    margin: 10px 0;
    float: left;
}

Link updated with those changes:
http://www.css-lab.com/test/noy1213/test.html

That should do what you are wanting now.

Topic		Replies	Views
Content and z-index HTML & CSS	2	369	November 18, 2010
Z-index IE7 bug HTML & CSS	5	929	December 7, 2010
Floating list, tooltip and z-index issue HTML & CSS	2	495	February 24, 2010
CSS IE7 Z index issue HTML & CSS	4	548	October 8, 2014
IE 6 & 7 z-index & menu issues HTML & CSS	4	554	October 8, 2014

Z-index problem

Related topics