z-index problems 1

[aaronjonmartin]

Hi,

Im currently building my site and positioning it with css. I have tried to make the nav display on top of everything by giving it a high z-index. My page so far looks fine in Mozilla however in IE the header div (which the nav is relative to) stretches for some reason? Can anybody tell me how i can rectify this?

The page is located at

http://www.stockleyevents.com/redesign

And here is my css:

html, body{
	margin:0;
	padding:10px 0 0;
	height: 100%;
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}

#pagewidth{
	width:750px;
	height: 100%;
	text-align:left;
	min-width: 500px;
	margin-left:auto;
	margin-right:auto;
} 

#header {
	width: 750px;
	height: 165px;
	padding: 0px;
	border-top: 1px solid #000000;
  	border-right: 1px solid #000000;
  	border-bottom: 1px solid #000000;
  	border-left: 1px solid #000000;
	background: #FFFFFF url(images/header.jpg) no-repeat;
}

#content {
	width: 750px;
	height: 450px;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;	
}

#footer {
	width: 750px;
	height: 23px;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
	background: #0E7CA7;
}

#nav {
	width: 206px;
	height: 414px;
	z-index: 50;
	position: relative;
	left: 12px;
	top: 105px;
	background: #FFFFFF url(images/nav.jpg) no-repeat;
}

"It's so much easier to suggest solutions when you don't know too much about the problem."
Malcolm Forbes (1919 - 1990)

 

[Vragabond]

Maybe relative positioning is not the best option in this case. The problem is, that Mozilla and Opera treat height attribute like the standards imply (element is as high as the specification, regardless of the contents), while IE renders it as min-height (expands the element when there is more content). Since you position your #nav relatively, it is causing parent element to expand in IE. To fix that, you could position #nav absolutely. Absolutely positioned elements are taken out of the flow of document and do not affect parent container. To do this, change:

#header {
    width: 750px;
    height: 165px;
    padding: 0px;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    background: #FFFFFF url([URL unfurl="true"]http://www.stockleyevents.com/redesign/images/header.jpg)[/URL] no-repeat;
    [b][COLOR=blue]position: relative;[/color][/b]
}

#nav {
    width: 206px;
    height: 414px;
    z-index: 50;
    [b][COLOR=blue]position: absolute;[/color][/b]
    left: 12px;
    top: 105px;
    background: #FFFFFF url([URL unfurl="true"]http://www.stockleyevents.com/redesign/images/nav.jpg)[/URL] no-repeat;
}

Hope it helps.

 

[aaronjonmartin]

Vragabond,

That worked a treat, thankyou very much i appreciate the help!

Aaron

"It's so much easier to suggest solutions when you don't know too much about the problem."
Malcolm Forbes (1919 - 1990)