Question

I have an image slider (CSS based) customised to my specifications (font styles, size etc). Then I have another CSS having 6 download buttons. But when I try to combine and integrate both of them into my HTML page, why are the CAPTION’S font sizes, their styling, caption positioning etc changing?

ALSO note that in the individual DOWNLOAD BUTTON page, when I hover oved the DOWNLOAD BUTTON, the text “DOWNLOAD” still shows in WHITE colour. But after integrating both the CSSpages, when I hover over DOWNLOAD button, its colour changes from white to BLACK! Why is it happening?
Please have a look at these pages:
THE INDIVIDUAL SLIDER page: http://www.aamaodisha.org/nivoslider.html
THE INDIVIDUAL DOWNLOAD BUTTONS page: http://www.aamaodisha.org/button.html

When I integrate them both into a single page, they look like this:
http://www.aamaodisha.org/both.html

I am sorry, this might be a very silly doubt of mine but I am very new to CSS properties, I just decided to try design my own website.
I tried looking on Google on CSS chapters but couldn’t help myself out. But as far as I have grasped things about CSS, I guess it has something to do with “IDs” and “Class” for the texts. I guess if I somehow change the CAPTION class in the nivoslider to an ID, it mayn’t interfere with other settings. or may be change class of DOWNLOAD page CSS to some ID. But I am unable to find a way.
Please help me out.

This is the CSS for the SLIDER:

a, a:visited {
    color:blue;
    text-decoration:none;
}
a:hover, a:active {
    color:#000;
    text-decoration:none;
}
a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
a.nivo-prevNav {
    left:15px;
}

#slider_wrapper {
  height: 390px;
}

#slider {
    margin:0px;
    position:absolute;
    left:0px;
    top:102px;
    width: 359px;
    height: 390px;
    background: url(images/loading.gif) no-repeat 50% 50%;
}

#slider img {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
#slider a {
    border: 0;
    display: block;
}


.nivoSlider {
    position:relative;
    background:#ffffff url(loading.gif) no-repeat 50% 50%;
    margin-bottom:50px;
    -webkit-box-shadow: 0px 0px 0px 0px #4a4a4a;
    -moz-box-shadow: 0px 0px 0px 0px #4a4a4a;
    box-shadow: 0px 0px 0px 0px #4a4a4a;

}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}
/* 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:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#091023;
    color:#fff;
    opacity:0.7; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:8;
    }
.nivo-caption p {
    font:11px/1.5 Verdana;
    padding: 7px 50px;

}
.nivo-caption a {
    display:inline !important;
    color:#fff;
    border-bottom:1px dotted #fff;
}
.nivo-caption a:hover {
    color:#fff;
}
.nivo-html-caption {
    display:none;
}

/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
    display:block;
    width:30px;
    height:30px;
    background:url(arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
.nivo-controlNav {
    position:absolute;
    left:73%;
    top:7px;
    margin-right:-4px; /* Tweak this to center bullets */
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
    position:relative;
    z-index:9;
    cursor:pointer;
}
.nivo-controlNav a.active {
    background-position:0 -22px;
    font-weight:bold;
}

This is the CSS for the DOWNLOAD BUTTONS:

.button {
  width: 115px;
}

.button1 {
    position:absolute;
    left:430px;
    top:410px;

}    
.button2 {
    position:absolute;
    left:632px;
    top:410px;

}  
.button3 {
    position:absolute;
    left:833px;
    top:410px;

}    
.button4 {
    position:absolute;
    left:430px;
    top:636px;

}    
.button5 {
    position:absolute;
    left:632px;
    top:636px;

}   
.button6 {
    position:absolute;
    left:833px;
    top:636px;

}   
.button a {
  display: block;
  height: 28px;
  width: 115px;

  /*TYPE*/
  color: white;
  font: bold 11px/28px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase; 

  /*GRADIENT*/  
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

.button a, p {
    -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

p {
  background: #222;
  display: block;
  height: 25px;
  width: 105px;
  margin: -27px 0 0 5px;

  /*TYPE*/
  text-align: center;
  font: bold 10px/28px Helvetica, Verdana, sans-serif;
  color: #ffffff;

  /*POSITION*/
  position: absolute;
  z-index: -1;

  /*TRANSITION*/  
  -webkit-transition: margin 0.4s ease;
     -moz-transition: margin 0.4s ease;
       -o-transition: margin 0.4s ease;
      -ms-transition: margin 0.4s ease;
          transition: margin 0.4s ease;
}

/*HOVER*/
.button:hover .bottom {
  margin: -4px 0 0 5px;
}

.button:hover .top {
  margin: -50px 0 0 5px;
  line-height: 22px;
}

/*ACTIVE*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

}

.button:active .bottom {
  margin: -14px 0 0 5px;
}

.button:active .top {
  margin: -30px 0 0 5px;
}

Answer 1

In button.css line no 74 change the selector fro p to .button p

so instead of

 p {
    -moz-transition: margin 0.4s ease 0s;
    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    font: bold 10px/28px Helvetica,Verdana,sans-serif;
    height: 25px;
    margin: -27px 0 0 5px;
    position: absolute;
    text-align: center;
    width: 105px;
    z-index: -1;
}

it should be

.button p {
    -moz-transition: margin 0.4s ease 0s;
    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    font: bold 10px/28px Helvetica,Verdana,sans-serif;
    height: 25px;
    margin: -27px 0 0 5px;
    position: absolute;
    text-align: center;
    width: 105px;
    z-index: -1;
}