hi, on most of my sites id like to now add a margin on the bottom of my wrapper so the background shows through. an example page where IE6 ignores my margin: 50px auto 25px auto; is below. any help greatly appreciated. derek
http://derekvanderven.com/liberty_co/index.html
here is the css
Code:
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
background-image: url(pattern_156.gif);
background-repeat: repeat;
}
#wrapper {
overflow: auto;
margin: 50px auto 25px auto;
width: 742px;
border: solid white 3px;
}
#header {
margin: 0 auto 0 auto;
width: 736px;
height: 264px;
background-image: url( freedom_header.jpg);
background-repeat: no-repeat;
border: solid white 3px;
}
#nav_rollovers {
float: right;
width: 450px;
height: 30px;
margin-top: 62px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#left_content {
float: left;
width: 400px;
height: 695px;
background-image: url(left_content.gif);
background-position: center top;
border: solid white 2px;
background-repeat: no-repeat;
background-color: white;
}
#left_content p {
text-indent: 20px;
padding-left: 10px;
padding-right: 10px;
}
#right_content {
float: left;
width: 334px;
height: 695px;
background-image: url(right_content.gif);
background-position: center top;
border: solid white 2px;
background-repeat: no-repeat;
background-color: white;
}
#right_content p {
text-indent: 20px;
padding-left: 10px;
}
.header_text {
margin: 75px auto 0 50px;
width: 100px;
background-color: #E46732;
color: white;
font-weight: bold;
text-align: center;
padding: 5px;
border: solid black 1px;
}
#workers {
float: left;
margin: 40px auto 0 30px;
width: 150px;
height: 99px;
background-image: url( workers.png);
background-repeat: no-repeat;
}
#keyboard {
float: left;
clear: both;
width: 150px;
height: 112px;
background-image: url( keyboard.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-right: auto;
margin-bottom: 0;
margin-left: 150px;
}
#puzzle {
float: left;
clear: both;
width: 150px;
height: 107px;
background-image: url( puzzle.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-right: auto;
margin-bottom: 0;
margin-left: 40px;
}
#lightbulb {
float: left;
clear: both;
width: 150px;
height: 220px;
background-image: url(lightbulb.png);
background-repeat: no-repeat;
margin-top: 30px;
margin-right: auto;
margin-bottom: 0;
margin-left: 150px;
}
#footer {
margin: 0 auto 0 auto;
width: 100%;
text-align: center;
color: black;
background-color: white;
text-decoration: none;
}
/******************************about code*****************************/
#about_left_content {
float: left;
width: 340px;
height: 695px;
background-image: url(left_content.gif);
background-position: center top;
border: solid white 2px;
background-repeat: no-repeat;
background-color: white;
}
#about_left_content p {
text-indent: 20px;
padding-left: 10px;
padding-right: 10px;
}
#about_right_content {
float: left;
width: 394px;
height: 695px;
border: solid white 2px;
background-color: white;
}
#about_text {
width: 300px;
color: black;
margin-top: 75px;
margin-right: auto;
margin-bottom: 0;
margin-left: 50px;
border: solid orange 3px;
padding-top: 30px;
}
#about_text p {
text-indent: 20px;
padding-left: 20px;
padding-right: 20px;
}
#about_image {
float: left;
width: 350px;
height: 247px;
background-image: url(ribbon.png);
background-repeat: no-repeat;
margin-top: 75px;
margin-right: 0;
margin-bottom: 0;
margin-left: 20px;
}
/***********************************services code*******************************/
#services_left_content {
float: left;
width: 340px;
height: 695px;
background-image: url(left_content.gif);
background-position: center top;
border: solid white 2px;
background-repeat: no-repeat;
background-color: white;
}
#services_left_content p {
text-indent: 20px;
padding-left: 10px;
padding-right: 10px;
}
#services_right_content {
float: left;
width: 394px;
height: 695px;
border: solid white 2px;
background-color: white;
}
#services_text p {
text-indent: 20px;
padding-left: 20px;
padding-right: 20px;
}
#services_image {
float: left;
width: 350px;
height: 247px;
background-image: url(mother_child.png);
background-repeat: no-repeat;
margin-top: 75px;
margin-right: 0;
margin-bottom: 0;
margin-left: 20px;
}
/***********************************staff code*******************************/
#staff_right_content {
float: left;
width: 394px;
height: 695px;
border: solid white 2px;
background-color: white;
}
#staff_image {
float: right;
width: 350px;
height: 247px;
background-image: url(staff.png);
background-repeat: no-repeat;
margin-top: 75px;
margin-right: 10px;
margin-bottom: 0;
margin-left: auto;
}
/***********************************contact code*******************************/
#contact_content {
margin: 0 auto 0 auto;
background-color: white;
width: 742px;
height: 695px;
background-image: url( about_content.gif);
background-repeat: no-repeat;
}
#contact_text {
width: 300px;
color: black;
margin-top: 75px;
margin-right: auto;
margin-bottom: 0;
margin-left: 50px;
border: solid orange 3px;
padding-top: 20px;
}
#contact_text p {
text-indent: 20px;
padding-left: 20px;
padding-right: 20px;
}
#contact_image {
float: right;
width: 350px;
height: 247px;
margin-top: 75px;
margin-right: 10px;
margin-bottom: 0;
margin-left: auto;
}
/******************************************/
and here is the html for the page
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="eagle.css" rel="stylesheet" type="text/css"/>
<title>Freedom Company Home</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images_raw/nav_on_slices/home_on.jpg','images_raw/nav_on_slices/about_on.jpg','images_raw/nav_on_slices/services_on.jpg','images_raw/nav_on_slices/staff_on.jpg','images_raw/nav_on_slices/contact_on.jpg')">
<div id="wrapper">
<div id="header">
<div id="nav_rollovers"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images_raw/nav_on_slices/home_on.jpg',1)"><img src="images_raw/nav_off_slices/home_off.jpg" name="Image1" width="79" height="30" border="0" id="Image1" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images_raw/nav_on_slices/about_on.jpg',1)"><img src="images_raw/nav_off_slices/about_off.jpg" name="Image2" width="92" height="30" border="0" id="Image2" /></a><a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images_raw/nav_on_slices/services_on.jpg',1)"><img src="images_raw/nav_off_slices/services_off.jpg" name="Image3" width="90" height="30" border="0" id="Image3" /></a><a href="staff.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images_raw/nav_on_slices/staff_on.jpg',1)"><img src="images_raw/nav_off_slices/staff_off.jpg" name="Image4" width="94" height="30" border="0" id="Image4" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images_raw/nav_on_slices/contact_on.jpg',1)"><img src="images_raw/nav_off_slices/contact_off.jpg" name="Image5" width="90" height="30" border="0" id="Image5" /></a></div>
</div><!--end div header-->
<div id="left_content">
<div class="header_text">Our Services</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus interdum accumsan. Aliquam mattis, metus at pharetra faucibus, enim mauris ullamcorper orci, ac tincidunt dui justo nec metus. Nunc eget velit purus.</p>
<div class="header_text">Our Motto</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus interdum accumsan. Aliquam mattis, metus at pharetra faucibus, enim mauris ullamcorper orci, ac tincidunt dui justo nec metus. Nunc eget velit purus.</p>
<div class="header_text">Our Focus</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus interdum accumsan. Aliquam mattis, metus at pharetra faucibus, enim mauris ullamcorper orci, ac tincidunt dui justo nec metus. Nunc eget velit purus.</p>
</div><!--end headertext-->
<div id="right_content"> <div id="workers"></div><div id="keyboard"></div>
<div id="puzzle"></div><div id="lightbulb"></div>
</div><!--end right content-->
<div id="footer"> © <a href="http://derekvanderven.com">derekvanderven.com</a> 2009 </div>
</div>
<!--end div wrapper-->
</body>
</html>
