I have been trying to get an image to sit in the background behind my
content div tag. I have nested two div's inside of another. The main
div has three images in it, one at the top, one at the bottom, and then
a tiled bg image. The tiled image sits fine in the background, but the
top image overlaps my text on IE.
www.mackenzieduncan.com/cci/preview5/main.html
The whole site works fine in Firefox and Safari on os 10.3 and 10.4. I
have also pasted the code in the window, oh and it also validates as
well.
Any help would be appreciated thanks in advance,
Mackenzie
-------CSS--------- ( those are the three divs I am having problems
with)
#div_image {
background: url('../img/middle.gif');
background-repeat:repeat-Y;
position: relative;
padding-bottom: -20px;
z-index: 2;
}
#content {
position: relative;
float: right;
padding-top: 2px;
padding-left: 5px;
padding-right: 5px;
width: 553px;
z-index: 3;
}
#leftnav {
width: 153px;
float: left;
position: relative;
z-index: 4;
}
------------ HTML -------------- ( i have put a note next to the image
causing problems)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"
/>
<title>Title in Here</title>
<style type="text/css" media="screen">
<!--
@import "css/style.css";
-->
</style>
</head>
<body>
<div class="container">
<div id="title">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash..cab#version=7,0,0,0"
width="726" height="87" id="section" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="section.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="section.swf" quality="high" bgcolor="#ffffff" width="726"
height="87" name="section" align="middle"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<div id="breadcrumbs">
<p>connections group > connections publishing > <a href="">home</a></p>
</div>
<div id="productbar">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash..cab#version=7,0,0,0"
width="718" height="175" id="sectionimage" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="sectionimage.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="sectionimage.swf" quality="high" bgcolor="#ffffff"
width="718" height="175" name="sectionimage" align="middle"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<!-- HERE IS THE BACKGROUND IMAGE DIV -->
<div id="div_image">
<img src="img/top.gif" alt="" /> <<--- FIRST IMAGE THAT SITS ON TOP
<div id="leftnav">
<p class="p_nav"><a class="nav" href="">About Us</a></p>
<p class="p_nav"><a class="nav" href="">Publications</a></p>
<p class="p_nav"><a class="nav" href="">Professional
Development</a></p>
<p class="p_nav"><a class="nav" href="">Symposium</a></p>
<p class="p_nav_sel"><img src="img/downarrow.gif" alt="" /><a
class="nav" href="">Online Journal</a></p>
<p class="p_subnav">
<img src="img/arrow.gif" alt="" /><a class="subnav" href="">Online
Journal</a><br />
<img src="img/arrow.gif" alt="" /><a class="subnav" href="">Next Link
Here</a><br />
<img src="img/arrow.gif" alt="" /><a class="subnav" href="">Third
One</a><br />
<img src="img/arrow.gif" alt="" /><a class="subnav" href="">Another
Link</a><br />
<img src="img/arrow.gif" alt="" /><a class="subnav" href="">Last
One</a><br />
</p>
</div>
<div id="content">
<h2>Publications</h2>
<p class="p_content">
Our readers tell us they appreciate how practical
our materials are while being thoroughly grounded in
current research and theory.
</p>
<p class="p_content">
Read a synopsis of each book by clicking on the book
title in either the <a href="teaching_resources/">Teaching
Resources</a> section or the <a
href="assessment_resources/">Assessment
Resources</a> section. If you think a certain book
may interest you, simply click on the "Add to Cart"
button. You can view this
shopping cart at any time by clicking on the
<a href="../view_cart">View Cart</a> link in the top right corner of
the browser.
</p>
<p class="p_content">
When you are ready to have your order processed,
click on the <a href="../view_cart">View Cart</a> link and follow the
easy
step-by-step instructions. We do not ask for any
kind of credit card number or banking details during
this process. Within a few days of sending
your order through to us, we will send you more
details about your order and a billing invoice.
</p>
<p class="p_content">
Our readers tell us they appreciate how practical
our materials are while being thoroughly grounded in
current research and theory.
</p>
<p class="p_content">
Read a synopsis of each book by clicking on the book
title in either the <a href="teaching_resources/">Teaching
Resources</a> section or the <a
href="assessment_resources/">Assessment
Resources</a> section. If you think a certain book
may interest you, simply click on the "Add to Cart"
button. You can view this
shopping cart at any time by clicking on the
<a href="../view_cart">View Cart</a> link in the top right corner of
the browser.
</p>
<p class="p_content">
When you are ready to have your order processed,
click on the <a href="../view_cart">View Cart</a> link and follow the
easy
step-by-step instructions. We do not ask for any
kind of credit card number or banking details during
this process. Within a few days of sending
your order through to us, we will send you more
details about your order and a billing invoice.
</p>
<p class="p_content">
You are also welcome to call us (toll free in North America at
1-800-603-9888, or from anywhere at 1-250-703-2920) Monday to Friday
from 8:30 A.M. to 5:00 P.M. Pacific Standard Time and place an order or
download one of the following order forms, fill it out, and mail or fax
your order to us.
</p>
</div>
<img src="img/bottom.gif" alt="" valign="bottom" />
</div>
<!-- HERE IS THE BACKGROUND IMAGE DIV -->
<div id="copyright">
copyright © 2005 Connections Group - <a href="">Privacy Policy</a> -
<a href="">FAQ</a> - <a href="">Contact</a>
</div>
</div>
</body>
</html>
