CSS newbie and need help. Working with 3 background-images which includes breadcrumbs and trying stack them in a liquid format but logo will not display above (on top) in IE7…Any thoughts?
Code:
<div id=“header”></div>
<div id=“logo”></div>
<div id=“breadloaf”></div>
<div id=“crumb1”></div>
<div id=“crumb2”></div>
<div id=“crumb3”></div>
2 separate CSS for multiple dept. purposes:
Main CSS:
#header {
position:relative;
width: 85%;
float:right;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
height:100px;
background-repeat: no-repeat;
z-index:1;}
#logo {
position:relative;
background-color: no-repeat;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
height:100px;
z-index:500;}
#breadloaf a {
position:relative;
float:right;
width:175px;
height:80px;
margin-right:10px;
margin-top:-90px;
background-repeat: no-repeat;
z-index:9999;}
#crumb1 a, #crumb2 a, #crumb3 a{
position:relative;
float:right;
width:16px;
height:80px;
margin-top:-90px;
padding:0 0 0 0;
background-repeat: no-repeat;
z-index:9999;}
#crumb1 a{
margin-right:184px;}
#crumb2 a{
margin-right:200px;}
#crumb3 a{
margin-right:216px;}
DFC CSS:
#header {
background-image: url(images/DFC_Banner.png);}
#logo{
background-image: url(images/DFC_Logo.png);}
#breadloaf a.coexec{
background-image: url(images/coexec_photo_tab.png);}
#breadloaf a.dfc{
background-image: url(images/dfc_photo_tab.png);}
#breadloaf a.wchome{
background-image: url(images/wc_photo_tab.png);}
#crumb1 a.dfc, #crumb2 a.dfc, #crumb3 a.dfc{
background-image: url(images/DFC_bc_tab.png);}
#crumb1 a.coexec, #crumb2 a.coexec, #crumb3 a.coexec{
background-image: url(images/CoExec_bc_tab.png);}
#crumb1 a.wchome, #crumb2 a.wchome, #crumb3 a.wchome{
background-image: url(images/WC_bc_tab.png);}