CSS Not Sorting Layers Correctly

**Jasonpv** · 04-14-2008, 06:36 AM

I am having a bit of a problem with my css layout. Everything shows up fine in firefox but in ie my div layers are side by side, not on top of one another. Here is a copy of my style sheet:

Code:

@charset "utf-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #E4E2DC;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	
}


.renty #mainContent { 
	position: relative;
	width: 800px;
	margin: 0 0px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. */
	padding: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	z-index: 1;
	margin-left: auto;
	margin-right: auto;
	
}
.renty #Header { 
	position: absolute; /* adding position: relative allows you to position the two sidebars relative to this container */
	width: 800px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	z-index: 2;
}

and here is the html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Renty Car Rental - Not the biggest, just the best.</title>
<link href="file:///D|/Websites/Renty/Web Files/CSS/renty_page layout.css" rel="stylesheet" type="text/css">
<!--[if IE 5]>
<style type="text/css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.thrColAbs #sidebar1 { width: 180px; }
.thrColAbs #sidebar2 { width: 190px; }
</style>
<![endif]-->
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body class="renty">

<div id="container">
  
  <div id="mainContent">
    <div id="Header">
      <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','800','height','108','title','Header','src','../../flash/moveis/header_highlights_structured_diag','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','../../flash/moveis/header_highlights_structured_diag' ); //end AC code
      </script>
      <noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="108" title="Header">
        <param name="movie" value="../../flash/moveis/header_highlights_structured_diag.swf">
        <param name="quality" value="high">
        <param name="wmode" value="transparent">
        <embed src="../../flash/moveis/header_highlights_structured_diag.swf" width="800" height="108" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
      </object>
      </noscript>
    </div>
    <img src="../Images/Website_bkgrnd.png" width="800" height="600" align="left">      </div>
  <!-- end #container -->
</div>
</body>
</html>

**LadynRed** · 04-14-2008, 09:38 AM

Why do you need the positioning ?

**Jasonpv** · 02:38 PM

Not sure that I need it necessarily. I tried taking it out and now the div layers are above one another. Basically, I want both layers centered and aligned to top, and header needs to be layered hovering over the main content div. Is there any way to do this?

**LadynRed** · 04-14-2008, 02:43 PM

Do you literally want them ON TOP of one another, as in stacked like pieces of paper in a pile, or do you just want one to follow the other vertically down the page ?

**Jasonpv** · 04-15-2008, 12:12 AM

On Top of one another like a pile of paper...

**LadynRed** · 04-15-2008, 02:28 PM

Ok, then.
The margins are going to be ineffective in this case. In order to push things around where you want them, you're going to have to use top, bottom, left, and right properties. You should also use z-indexes higher than 1 and 2, I typically will do it in 10's, partly because of the way IE does z-indexing.

**Jasonpv** · 04-15-2008, 04:26 PM

Now how does that work with changing resolutions? Should I use percentages for the top, bottom, left right properties?

**LadynRed** · 04-15-2008, 06:03 PM

You actually don't need to if you want the div on top to move with the bottom div. They should move together relative to each other.

**Jasonpv** · 04-16-2008, 01:05 AM

See, that is the problem I am having. I can't get that functionality. Don't you need to have the top div tags enclosed in the bottom and set position to relative to do that?

**LadynRed** · 04-16-2008, 10:05 AM

Quote:

Don't you need to have the top div tags enclosed in the bottom and set position to relative to do that?

No, you don't. Set #header like this:

Quote:

.renty #Header {
position: absolute;
width: 400px;
text-align: left;
z-index: 20;
background: #7b68ee;
height: 50px;
left: 40px;
top: 20px;
}

I changed the width and background color so I could SEE where things were, as well as giving it a height. You can change those back to your original. You MUST have the top and left properties set. The absolutely positioned box will move around relative to is nearest positioned ancestor - in this case that is #mainContent. I test it, it works, the purple box moves with #mainContent.