Container background image not showing on FF

Discussion in 'CSS' started by Audiomad, Apr 18, 2008.

  1. #1
    I have a problem I think its a css problem the container image does not show at the bottom in FF but does in IE any ideas?

    
    
    #heading {
    	left:0px;
    	top:0px;
    	width:780px;
    	height:156px;
    	z-index:1;
    	float: left;
    	background-color: #FFFFFF;
    	background-image: url(new-style/top.jpg);
    	background-repeat: no-repeat;
    	overflow: hidden;
    }
    #sidebar {
    	left:0px;
    	width:125px;
    	z-index:2;
    	float: left;
    	background-color: #FFFFFF;
    }
    #header {
    	left:125px;
    	width:655px;
    	height:155px;
    	z-index:3;
    	float: right;
    	background-color: #FFFFFF;
    	background-image: url(new-style/header.jpg);
    	background-repeat: no-repeat;
    	overflow: hidden;
    }
    #content {
    	left:125px;
    	width:655px;
    	z-index:4;
    	float: right;
    	background-color: #FFFFFF;
    	background-image: url(new-style/content-bottom.jpg);
    	background-repeat: no-repeat;
    	background-position: bottom right;
    	min-height: 400px;
    	padding-bottom: 40px;
    	list-style-image: url(new-style/text.gif);
    }
    #extra-left {
    	width:325.5px;
    	z-index:5;
    	float: right;
    	min-height: 30px;
    	list-style-image:url(new-style/text.gif);
    }
    #extra-right {
    	width:325.5px;
    	z-index:6;
    	float: right;
    	min-height: 30px;
    }
    #footer {
    	left:125px;
    	width:655px;
    	z-index:7;
    	float: right;
    	background-color: #FFFFFF;
    	background-image: url(new-style/footer.jpg);
    	background-repeat: no-repeat;
    	background-position: bottom right;
    	padding-bottom: 25px;
    	padding-top: 5px;
    	margin-bottom: 5px;
    }
    #container {
    	margin:0 auto;
    	width:780px;
    	background-color: #FFFFFF;
    	background-image: url(new-style/content-back.jpg);
    	background-repeat: repeat-y;
    }	
    body,td,th {
    	color: #000000;
    	font-size: 12px;
    	font-family: Tahoma, Arial, Helvetica;
    }
    body {
    	background-color: #FFFFFF;
    	background-image: url(new-style/back.png);
    	background-repeat: repeat-x;
    	margin:0;
    }
    a:link {
    	color: #0066CC;
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #0066CC;
    }
    a:hover {
    	text-decoration: underline;
    	color: #0099CC;
    }
    a:active {
    	text-decoration: none;
    	color: #0066CC;
    }
    h1 {
    	font-size: 24px;
    	color: #FFFFFF;
    }
    h2 {
    	font-size: 18px;
    	color: #000000;
    }
    h3 {
    	font-size: 18px;
    	color: #000000;
    }
    ul#list li {
    	line-height:16px;
    	list-style-image:url(new-style/folder.gif)
    }
    
    
    Code (markup):
    The site www.dragonstardesign.com I have a back ground image to seperate the adsence from the sub menu above the footer.
     
    Audiomad, Apr 18, 2008 IP