Why is my container properties being overwritten? (Nivo Slider, CSS)

Question

I'm using the Nivo Slider for the first time on a project. My container that holds the images has a padding and background to fit the design, like so:

#slider { 
 background: #fff; 
 border: 1px solid #c1c1c1; 
 padding: 10px; 
 margin-bottom: 25px; 
 clear: left; 
}

Before adding the Nivo code, everything displays properly. Now I lose my background and padding. Here is the slider code:

/*
 * jQuery Nivo Slider v2.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2010, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */


/* The Nivo Slider styles */
.nivoSlider {
 position:relative;
}
.nivoSlider img {
 position:absolute;
 top:0px; 
 left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 border:0;
 padding:0;
 margin:0;
 z-index:60;
 display:none;
}
/* The slices in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:50;
 height:100%;
}
/* Caption styles */
.nivo-caption {
 position:absolute;
 left:0px;
 bottom:0px;
 background:#000;
 color:#fff;
 opacity:0.8; /* Overridden by captionOpacity setting */
 width:100%;
 z-index:89;
}
.nivo-caption p {
 padding:5px;
 margin:0;
}
.nivo-caption a {
 display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:99;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
 position:relative;
 z-index:99;
 cursor:pointer;
}
.nivo-controlNav a.active {
 font-weight:bold;
}

I am pretty sure it has to do with the absolute positioning and the margins, but I have spent some time tweaking it and I am unsure of how to fix this problem. I need the slider images to have full functionality and revert back to a padding with white background.

Any ideas?

Thanks in advance.

Answer 1

Hi,

I had a copy of nivo slider, so i tried it out. It seems your CSS for "#slider" is put before the nivo-slider's CSS. You just need to put your CSS for "#slider" after NivoSlider's CSS, i think it should work for you.

Answer 2

Hi,

You can make a "container div" containing the "#slider" and give the "#slider" a margin:10px. This is will create the same padding effect and for background, you can add that to the CSS of "container div". Checkout my try : http://meherranjan.com/nivo