CSS background image not loading, being overridden? - css

Question

The background images for directional & navigational buttons are not loading. Firebug shows the images being overridden and states "the files are not being loaded". If I disable the "text-indent", I can see the plain old line items, but am looking for the images, so it looks nice and pretty!
I've been staring at this for too long now, can anyone help me see the problem? Thank you!
html
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li><img src="images/tah_home.jpg" alt="taylor art house home page" width="600" height="320"/>
<p class="flex-caption">Taylor Art House Home Page</p></li>
<li><img src="images/tah_blog.jpg" alt="taylor art house blog page" width="600" height="320" />
<p class="flex-caption">We created a blog that fits seemlessly into Taylor Art House's look</p></li>
<li><img src="images/tah_artwork_page.jpg" alt="taylor art house art page" width="600" height="320" />
<p class="flex-caption">One of Taylor Art House's gallery pages, using a Wordpress plugin</p></li>
<li><img src="images/tah_arch_portfolio.jpg" alt="jon taylor architecture portfolio page" width="600" height="320" />
<p class="flex-caption">We created links to toggle from TAH to Jon Taylor Architecture</p></li>
</ul>
</div><!--end flexsider-->
</div><!--end flex-container-->
header script
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
slideshow: false,
controlNav: true,
manualControls: ".flex-control-nav li a",
controlsContainer: ".flex-container"
});
});
</script>
flexslider css
/*
* jQuery FlexSlider v1.8
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {
width: 100%;
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
max-width: 100%;
display: block;
}
.flex-pauseplay span {
text-transform: capitalize;
}
/* Clearfix for the .slides element */
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides {
display: block;
}
* html .slides {
height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {
display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider {
width: 600px;
background: #fff;
border: 4px solid #999;
position: relative;
margin: 30px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px; zoom: 1;
}
.flexslider .slides {
zoom: 1;
}
.flexslider .slides > li {
position: relative;
}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {
zoom: 1;
position: relative;
margin-left:100px;
}
/* Caption style */
/* IE rgba() hack */
.flex-caption {
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
zoom: 1;
}
.flex-caption {
width: 96%;
padding: 2%;
margin: 0;
position: absolute;
left: 0;
bottom: 0;
background: rgba(0,0,0,.3);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
font-size: 14px;
line-height: 18px;
}
/* Direction Nav */
.flex-direction-nav {
height: 0;
}
.flex-direction-nav li a {
width: 52px;
height: 52px;
margin: -13px 0 0;
display: block;
background: url(theme/bg_direction_nav.png) no-repeat;
position: absolute;
top: 50%;
cursor: pointer;
text-indent: -999em;
}
.flex-direction-nav li .next {
background-position: -52px 0; right: -21px;
}
.flex-direction-nav li .prev {
left: -20px;
}
.flex-direction-nav li .disabled {
opacity: .3;
filter:alpha(opacity=30);
cursor: default;
}
/* Control Nav */
.flex-control-nav {
width: 100%;
position: absolute;
bottom: -30px;
text-align: center;
}
.flex-control-nav li {
margin: 0 0 0 5px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-nav li:first-child {
margin: 0;
}
.flex-control-nav li a {
width: 13px;
height: 13px;
display: block;
background: url(theme/bg_control_nav.png) no-repeat;
cursor: pointer;
text-indent: -999em;
}
.flex-control-nav li a:hover {
background-position: 0 -13px;
}
.flex-control-nav li a.active {
background-position: 0 -26px;
cursor: default;
}
styles.css
/* CSS Document for Kajort Designs */
/* ----- RESETS ----- */
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style-type: none;
}
h1 {
margin-bottom: 20px;
margin-top: 20px;
font-size: 20px;
color: #999;
}
h2 {
font-size: 18px;
}
/* ----- GENERAL ----- */
body {
line-height: 19px;
font-size: 12px;
text-align: center; /* centers everything in IE */
font: 16px Arial, Helvetica, sans-serif;
color: #8A8A8A;
/* background-image:url(../images/bg_kd2.jpg);
*/}
#wrapper {
width: 960px;
margin: 30px auto; /* centers wrapper in most browsers */
text-align:left; /* resets IE center hack */
background-color:rgba(255,255,255,0.8);
padding: 20px;
}
/* ----- HEADER ----- */
/*#header {
width:250px;
height: 40px;
float: left;
font-size:24px;
}
#header a:hover {
border-bottom: 2px solid #ddd;
}*/
/* ----- NAVIGATION ----- */
#navigation {
width: 430px;
height: 40px;
float: right;
margin-top: 30px;
}
#navigation a:hover {
border-bottom: 2px solid #ddd;
}
#navigation li {
display: inline;
list-style-type: none;
padding-right: 10px;
}
#navigation-items li.main-on a {
border-bottom: 2px solid #ddd;
font-size:18px;
}
/* ----- MIDDLE ----- */
#main {
width: 104%;
background: #fff;
background: -moz-linear-gradient(top, #fff, #fff);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
padding: 10px 20px;
margin-left: -40px;
margin-top: 80px;
position: relative;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
}
#main .arrow {
width: 0; height: 0;
line-height: 0;
border-left: 20px solid transparent;
border-top: 10px solid #999;
top: 100%;
left: 0;
position: absolute;
}
#homecontent {
margin: 25px 0 25px 200px;
}
#content {
width: 800px;
margin-left: 100px;
overflow: hidden;
}
#servicescontent {
width: 700px;
margin-left: 40px;
}
#tools {
background-color:#EDEBDE;
padding: 20px 0 10px 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#seo {
background-color:#EDEBDE;
padding: 20px 0 10px 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.service_list {
margin: 10px 0 15px 30px;
}
.service_list li {
padding-bottom: 10px;
list-style-type:circle;
}
#panels_nav_st {
color:#666;
font-size:16px;
border-top: 2px solid #669933;
padding-top: 10px;
margin-top: 10px;
}
#panels_nav_st a {
color:#666;
font-size:16px;
}
#panels_nav_st a:hover {
color:#669933;
font-size:16px;
}
#panels_nav_ain {
color:#666;
font-size:16px;
border-top: 2px solid #91A6C1;
padding-top: 10px;
margin-top: 10px;
}
#panels_nav_ain a {
color:#666;
font-size:16px;
}
#panels_nav_ain a:hover {
color:#91A6C1;
font-size:16px;
}
#panels_nav_bees {
color:#666;
font-size:16px;
border-top: 2px solid #FC0;
padding-top: 10px;
margin-top: 10px;
}
#panels_nav_bees a {
color:#666;
font-size:16px;
}
#panels_nav_bees a:hover {
color:#FC0;
font-size:16px;
}
#panels_nav_ptc {
color:#666;
font-size:16px;
border-top: 2px solid #a1c857;
padding-top: 10px;
margin-top: 10px;
}
#panels_nav_ptc a {
color:#666;
font-size:16px;
}
#panels_nav_ptc a:hover {
color:#a1c857;
font-size:16px;
}
#panels_nav_tah {
color:#666;
font-size:16px;
border-top: 2px solid #FF7C5F;
padding-top: 10px;
margin-top: 10px;
}
#panels_nav_tah a {
color:#666;
font-size:16px;
}
#panels_nav_tah a:hover {
color:#FF7C5F;
font-size:16px;
}
#visit {
margin: 20px 0 20px 0;
width: 600px;
float: left;
color: #666;
}
#visit a {
text-decoration:underline;
}
#visit_st a:hover {
text-decoration:none;
color: #669933;
}
#visit_ain a:hover {
text-decoration:none;
color: #91A6C1;
}
#visit_bees a:hover {
text-decoration:none;
color: #fc0;
}
#visit_ptc a:hover {
text-decoration:none;
color: #a1c857;
}
#visit_tah a:hover {
text-decoration:none;
color: #FF7C5F;
}
#thumbnails li {
display: inline;
margin: 0 40px 40px 0;
}
#thumbnails img {
border: 1px solid #666;
padding: 5px 5px 10px 5px;
}
/* ----- FOOTER ----- */
#footer {
clear: both;
height: 50px;
margin-bottom: 15px;
margin-top: 60px;
text-align: center;
font-size: small;
color: #776E6E;
/* padding-top: 15px;
border-top: 3px solid #999;
*/
}
#footer a {
text-decoration: none;
color: #776E6E;
}
#footer a:hover {
border-bottom: 2px solid #ddd;
}
/* ----- NOT USED, BUT SAVE IN CASE ----- */
/*
#sidebar {
float: left;
color: #666;
padding: 10px 0 50px 50px;
font-size: 16px;
}
#sidebar li {
/* padding-bottom: 20px;
margin: 0 5px 15px 15px;
}
#sidebar a:hover {
color: #ddd;
border-bottom: 2px solid #ddd;
}
#sidebar h3 {
margin-bottom: 30px;
color: #333;
}
*/
Thank you!

Answer 1

The flexslider css is referring to the directional & navigational images in the theme folder. See below...
.flex-direction-nav li a {
...
background: url(theme/bg_direction_nav.png) no-repeat;
...
}
.flex-control-nav li a {
...
background: url(theme/bg_control_nav.png) no-repeat;
...
}
Point the url's to the correct location of the images and it'll work.