I should mention that NONE of the css code I put in is working.
This is my CSS if you need to see it:
.carousel .item {
line-height: 300px;
overflow: hidden;
max-height: 700px;
}
body {
background: none repeat scroll 0 0 #FAFAFA;
color: #4682B4;
padding-bottom: 0;
}
.carousel-inner > .active {
left: 0;
/* Fix slider in IE */
z-index: 9;
}
.carousel-caption {
background-color: transparent9;
/* IE8 and below */
background: rgba(0, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#33000000′, endColorstr=’#33000000′, GradientType=0);
/* IE6-9 */
max-width: 60%;
padding: 5%;
line-height: 14px;
vertical-align: middle;
/* fix for IE to align the grey box to center */
top: 25%;
display: inline-block;
position: relative;
margin-left: 11%;
/*display:inline; IE7 and below */
}
.btn.btn-primary.fp-button {
display: none;
}
/*Make Carousel fade. Delay between slides needs(?) to be > 7000ms for this to work well*/
.carousel-inner > .item {
-webkit-transition: 2s ease-in-out opacity;
-moz-transition: 2s ease-in-out opacity;
-ms-transition: 2s ease-in-out opacity;
-o-transition: 2s ease-in-out opacity;
transition: 2s ease-in-out opacity;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
opacity: 1;
z-index: 1;
left: 0;
}
.carousel-inner > .active.left {
opacity: 0;
z-index: 2;
left: 0/* Remove icon */
#main-wrapper .format-icon:before {
content: none;
}
/* Center Title */
.page #main-wrapper h1.format-icon:before {content: none;}
.page h1.entry-title {
text-align: center;
}
April, just as I pointed out here, your CSS is not working because your .carousel-inner > .active.left is not closed (after left:0).
You need to insert:
;
}
between left: 0 and /* Remove icon */, on line 54 of that code.
And please put your code in code window, by adding above and below the code a line with a single backtick in it.