div background not showing

**gellegbs** · 07-22-2012 04:42 AM

background not showing nor when I set a bg color to black does the background show in this contained div...I'm at my limit. The slider-wrapper is what I want to have an image in the background, right now the color is not set (since I dont want it that way and was just testing) but the color will not show even when I set it. The foreground is the nivoslider, which has given me hell all day to the early morning. I finally got the thing to work but now the background issue.

page is up here

I already did a css validation, it hated the gradient thing, border radius and box shadows but too bad. No other errors.

HTML

HTML 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" xml:lang="en" lang="en">
<head>
<title>Warped Entertainments</title>
<meta name="description" content="The best and most affordable entertainment service in the Bloomington, IN area. We are a full service DJ with over 150,000 songs spanning across different genres, professional sound equipment, lighting and FX. Catering and other services such as security are available optionally. " />
<meta name="keywords" content="local DJ, music for weddings, local music, DJ, warped entertainments, warped entertainment" />
<meta name="author" content="Silverangel" />
<link rel="stylesheet" type="text/css" media="screen" href="http://www.warpedentertainments.adklicks.info/css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://www.warpedentertainments.adklicks.info/js/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        directionNavHide: true, // Only show on hover
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        randomStart: false, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>
</head>

<body>
<div id="container">
	<div id="header">
		<div id="navigation">
		<ul>
			<li><a href="http://www.warpedentertainments.adklicks.info">
	<img src='http://www.warpedentertainments.adklicks.info/images/servicesbtninact.png' alt="button" onmouseover="this.src='http://www.warpedentertainments.adklicks.info/images/servicesbtnact.png'" onmouseout="this.src='http://www.warpedentertainments.adklicks.info/images/servicesbtninact.png'"/></a></li>
			<li><a href="http://www.warpedentertainments.adklicks.info/media.html"><img src='http://www.warpedentertainments.adklicks.info/images/mediabtninact.png' alt="button" onmouseover="this.src='http://www.warpedentertainments.adklicks.info/images/mediabtnact.png'" onmouseout="this.src='http://www.warpedentertainments.adklicks.info/images/mediabtninact.png'"/></a></li>
			<li><a href="http://www.warpedentertainments.adklicks.info/contact.html"><img src='http://www.warpedentertainments.adklicks.info/images/contactbtninact.png' alt="button" onmouseover="this.src='http://www.warpedentertainments.adklicks.info/images/contactbtnact.png'" onmouseout="this.src='http://www.warpedentertainments.adklicks.info/images/contactbtninact.png'"/></a></li>
		</ul>		
		</div>
		
	</div>
	<div id="content">
		<div id="youtube">
			<iframe width="196" height="110" src="http://www.youtube.com/embed/W1M0AOtfa-Y?rel=0" frameborder="0" allowfullscreen></iframe>
			<iframe width="196" height="110" src="http://www.youtube.com/embed/ECaigBD15GI?rel=0" frameborder="0" allowfullscreen></iframe>
			<iframe width="196" height="110" src="http://www.youtube.com/embed/B44_XgoAaRQ?rel=0" frameborder="0" allowfullscreen></iframe>
			
			</div>
		
			
		
			<div id="slider_wrapper">
				<div id="slider" class="nivoSlider">
				<img src="http://www.warpedentertainments.adklicks.info/images/walle.jpg" alt="img1" title="walle image" />
				<img src="http://www.warpedentertainments.adklicks.info/images/nemo.jpg" alt="img2" title="nemo image" />
				<img src="http://www.warpedentertainments.adklicks.info/images/up.jpg" alt="img3" title="up image" />
				</div>
			</div>
			
				
	</div>


	
</div>
</body>
</html>

css on next post

**gellegbs** · 07-22-2012 04:43 AM

CSS

Code:

/*=================================*/
/* Nivo Slider Demo
/* November 2010
/* By: Gilbert Pellegrom
/* http://dev7studios.com
/*=================================*/

/*====================*/
/*=== Reset Styles ===*/
/*====================*/

body{
background: #000000; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzkyMWNmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzE0NzhmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #000000 0%, #921cf6 50%, #1478fd 50%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#921cf6), color-stop(50%,#1478fd), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* IE10+ */
background: linear-gradient(to right,  #000000 0%,#921cf6 50%,#1478fd 50%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-8 */

}

caption, th, td {
	text-align:left;
	font-weight:normal;
}


/* HTML5 tags */
/*header, section, footer,
aside, nav, article, figure {
	display: block;
}

/*===================*/
/*=== Main Styles ===*/
/*===================*/
#container
{
	margin: 0 auto;
	width: 1023px;
	min-height:768px;
	height: 100%;
	background-image:url(http://www.warpedentertainments.adklicks.info/images/background.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	float: none;
	outline:none;
	-moz-border-radius:55px;
	border-radius:55px;
   -webkit-box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.87);
   -moz-box-shadow:    -2px 4px 3px rgba(0, 0, 0, 0.87);
   box-shadow:         -2px 4px 3px rgba(0, 0, 0, 0.87);
	
	
	
}


#header
{
	

	width: 100%;
	height:78px;
}

#header h1 {
	margin: 0; 
	
	}

/*all btn are images in place of text for nav menu*/
.btn1-hover {
display:block;
background-image:url(http://www.warpedentertainments.adklicks.info/images/servicesbtninact.png);
width:297px;
height:75px;
outline:none;
}
.btn1-hover:hover {
background-image:url(http://www.warpedentertainments.adklicks.info/images/servicesbtnact.png);
width:297px;
height:75px;
outline:none;
}

	.btn2-hover {
display:block;
background-image:url(http://www.warpedentertainments.adklicks.info/images/mediabtninact.png);
width:297px;
height:75px;
outline:none;
}
.btn2-hover:hover {
background-image:url(http://www.warpedentertainments.adklicks.info/images/mediabtnact.png);
width:297px;
height:75px;
outline:none;
}
	.btn3-hover {
display:block;
background-image:url(http://www.warpedentertainments.adklicks.info/images/contactbtninact.png);
width:297px;
height:75px;
outline:none;
}
.btn3-hover:hover {
background-image:url(http://www.warpedentertainments.adklicks.info/images/contactbtnact.png);
width:297px;
height:75px;
outline:none;
}
	.btn4-hover {
display:block;
background-image:url(http://www.warpedentertainments.adklicks.info/images/buynowinact.png);
outline:none;
}
.btn4-hover:hover {
background-image:url(http://www.warpedentertainments.adklicks.info/images/buynowact.png);
outline:none;
}

/*nav menu*/
#navigation
{
	float:inherit;
	width:895px;
	height:78px;
	outline:none;
	padding-left:55px;
	padding-top:20px;
}

#navigation ul
{
	margin: 0;
	padding: 0;
outline:none;
}

#navigation ul li
{
	list-style-type: none;
	display: inline;
outline:none;
}

#navigation li a
{
	display: block;
	float: left;
	padding:0px;
	text-decoration: none;
	outline:none;

}
#dev7link {
    position:absolute;
    top:0;
    left:50px;
    background:url(http://www.warpedentertainments.adklicks.info/images/dev7logo.png) no-repeat;
    width:60px;
    height:67px;
    border:0;
    display:block;
    text-indent:-9999px;
}
#content{
	min-height:670px;
	width:1023px;

	
	}
	/*youtube*/
#youtube{
	height:110px;
	width:618px;
	position: static;
	padding-bottom:100px;
	
}	
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider-wrapper {
	background-image: url(http://www.warpedentertainments.adklicks.info/images/slider.png);
	background-repeat:no-repeat;
    width:998px;
    height:392px;
 	 float:right;
 	
}

#slider {
	position:relative;
    width:618px;
    height:246px;
    margin-left:20%;
	background:url(http://www.warpedentertainments.adklicks.info/images/loading.gif) no-repeat 50%;
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slider a {
	border:0;
	display:block;
}
/*the nivo slider styles*/


.nivoSlider{
	position:relative;	
	}
	
	.nivoSlider img{
	position:absolute;
	top:0;
	left:0;		
		}
	/*if an image is wrapped in a link*/	
.nivoSlider a.nivo-imageLink{
		position:absolute;;
		top:0;
		left:0;
		width:100%;
		height:100%;
		border:0;
		padding:0;
		margin:0;
		z-index:6;
		display:none;	
	}
	/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.nivo-box img { display:block; }

/*caption styles*/
.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
    text-transform:uppercase;
    position:absolute;
    left:0;
    bottom:0;
    background:#000;
    color:#fff;
    opacity:0.8;
    width:100%;
    z-index:8;
    
    
}

.nivo-caption p{
	padding:5px;
	margin:0;	
	}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:none;
}
.nivo-caption a:hoover{
	color:#0066cc;
	text-decoration:underline;	
	}

.nivo-html-caption{
	display:none;	
	}
	/*Direction nav styles (prev & Nex)*/
	
	.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(http://www.warpedentertainments.adklicks.info/images/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
	position: absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
a.nivo-nextNav {
	background-position:-30px;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}

/*Control nav styles (e.g. 1,2,3...)*/
	
.nivo-controlNav a {
	display:block;
	width:22px;
	height:22px;
	background:url(http://www.warpedentertainments.adklicks.info/images/bullets.png) no-repeat;
	text-indent:-9999px;
	float:left;
	border:0;
	margin-left:5px;
	margin-top:46px;
	
}
.nivo-controlNav {
	margin-left:446px;
	
}

.nivo-controlNav a.active {
	background-position:0 -22px;
}




/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
	clear:both;
}

**gellegbs** · 07-22-2012 06:04 PM

I need to mention also that the code was written on a Linux mint 13 (with a linux moz browser for visual comparison) and bieng new to linux I was a bit blindsided about the compatability issues with windows browsers, especially IE. I am working on resolving this issue, thank you.

Thread: div background not showing

Thread Tools

Display

div background not showing

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions