z-index problem ie only

by 2 replies
3
I am trying to get my header and footer image too span the entire page. But also have a wrapper container for the rest of my content. I have it close my text will show on my header but not on my footer. What can I do?

Code:
body{
    background:#036;
    text-align: center;
    z-index: 0;
}
html, body {
    margin: 0px;
    padding: 0px;
}
#wrapper {
    background: #FFF;
    width: 1000px;
    text-align: left;
    margin: 0px auto;
    position: relative;
}
#header {
    height: 111px;
    width: 1000px;
    color: #FFF;
    background: url(images/bgHeader.gif) repeat;
}
#headerBg {
    background: url(images/bgHeader.gif) repeat;
    height: 111px;
    width: 100%;
    position: absolute;
    z-index: 0;
    top: 0px;
    left: 0px;
}

#mainNav {
    background: #00F;
    height: 100px;
    width: 1000px;
}
#contentText {
    height: 50px;
    width: 1000px;
    background: #0CF;
}

#mainContent {
    background: #CCF;
    height: 300px;
    width: 1000px;
    float: right;
}
#sideBar {
    background: #cc2;
    height: 600px;
    width: 200px;
    float: left;
}
#clearFooter {
    clear: both;
    height: 1px;
    width: 1000px;
    position: relative;
    z-index: 0;
    background: #9F0;
    margin: 0px;
    padding: 0px;
}

#footer {
    height: 84px;
    width: 1000px;
    color: #FFF;
    z-index: 1;
    top: 581px;
    position: absolute;
}
#footerBg {
    background: url(images/bgFooter.gif) repeat;
    width: 100%;
    position: absolute;
    z-index: 0;
    left: 0px;
    height: 84px;
    clear: none;
}
HTML Code:
<body>
<!-------- Body Header Backround -------->
<div id="headerBg"></div>

<!-------- Wrapper Tag Start -------->
<div id="wrapper">

  <!-------- Begin Header -------->
  <div id="header">Content for  id "header" Goes Here
  <!--- End Header --->
  </div>
  
  <!------- Begin Main Navigation ------->
  <div id="mainNav">Content for  id "mainNav" Goes Here
    <!--- End Main Navigation --->
  </div>
  
  <!------- Begin Content Text ------->
  <div id="contentText">Content for  id "contentText" Goes Here
  <!--- End Content Text --->
  </div>
  
  <!-------- Begin Main Navigation -------->
  <div id="mainContent">Content for  id "mainContent" Goes Here
  <!--- Main Content --->
  </div>
  
  <!------- Clear Footer (Used for absolute positioning for footer) ------->
  <div id="clearFooter"></div>

  <!-------- Begin Footer -------->
  <div id="footer">Content for  id "footer" Goes Here
  <!--- End Footer --->
  </div>
 
<!--- End Wrapper --->
</div>

<!-------- Body Footer Backround -------->
<div id="footerBg"></div>
</body>
#website design #css #iexplorer #problem #zindex
  • I am not quite sure as to why you need to z index this layout. I think that may be where you are getting tripped up. Perhaps you could explain a little more. Here is a down and dirty css you can play with.

    Code:
    <style type="text/css">
<!--
body,div { margin:0 0 0 0;}
body {
	background-color: #036;

}
#header {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
	height: auto;
}
#headbox {
	height: auto;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#nav {
	height: auto;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#body {
	height: auto;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#footer {
	height: auto;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background-color: #FF0000;
}
#footbox {
	height: auto;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
}
    Here is your html

    Code:
    <body>
<div id="header">
  <div id="headbox">Content for  id "headbox" Goes Here</div>
</div>

<div id="nav">Content for  id "nav" Goes Here</div>

<div id="body">Content for  id "body" Goes Here</div>

<div id="footer">
  <div id="footbox">Content for  id "footbox" Goes Here</div>
</div>
</body>
    The divs I am sure you will want to rename and do however
    • [ 1 ] Thanks
  • Wow that you for that code!! I was having a hard time because I had a wrapper tag and if I finally fixed the text then I would have a problem with the height

    Is there any way that you can ensure the footer will be at the bottom of the screen even if the content does not push it down that far?
Join the discussion

Next Topics on Trending Feed

  • 3

    z-index problem ie only

    I am trying to get my header and footer image too span the entire page. But also have a wrapper container for the rest of my content. I have it close my text will show on my header but not on my footer. What can I do? Code: body{ background:#036; text-align: center; z-index: 0; } html, body { margin: 0px; padding: 0px; } #wrapper { background: #FFF; width: 1000px; text-align: left; margin: 0px auto; position: relative; } #header { height: 111px; width: 1000px; color: #FFF; background: url(images/bgHeader.gif) repeat; } #headerBg { background: url(images/bgHeader.gif) repeat; height: 111px; width: 100%; position: absolute; z-index: 0; top: 0px; left: 0px; } #mainNav { background: #00F; height: 100px; width: 1000px; } #contentText { height: 50px; width: 1000px; background: #0CF; } #mainContent { background: #CCF; height: 300px; width: 1000px; float: right; } #sideBar { background: #cc2; height: 600px; width: 200px; float: left; } #clearFooter { clear: both; height: 1px; width: 1000px; position: relative; z-index: 0; background: #9F0; margin: 0px; padding: 0px; } #footer { height: 84px; width: 1000px; color: #FFF; z-index: 1; top: 581px; position: absolute; } #footerBg { background: url(images/bgFooter.gif) repeat; width: 100%; position: absolute; z-index: 0; left: 0px; height: 84px; clear: none; } HTML Code: <body> <!-------- Body Header Backround --------> <div id="headerBg"></div> <!-------- Wrapper Tag Start --------> <div id="wrapper"> <!-------- Begin Header --------> <div id="header">Content for id "header" Goes Here <!--- End Header ---> </div> <!------- Begin Main Navigation -------> <div id="mainNav">Content for id "mainNav" Goes Here <!--- End Main Navigation ---> </div> <!------- Begin Content Text -------> <div id="contentText">Content for id "contentText" Goes Here <!--- End Content Text ---> </div> <!-------- Begin Main Navigation --------> <div id="mainContent">Content for id "mainContent" Goes Here <!--- Main Content ---> </div> <!------- Clear Footer (Used for absolute positioning for footer) -------> <div id="clearFooter"></div> <!-------- Begin Footer --------> <div id="footer">Content for id "footer" Goes Here <!--- End Footer ---> </div> <!--- End Wrapper ---> </div> <!-------- Body Footer Backround --------> <div id="footerBg"></div> </body>