CSSの背景イメージが読み込まれず、上書きされていますか？

Question

方向性の&ナビゲーションボタンの背景イメージがロードされていません。 Firebugは、イメージが上書きされていることを示し、「ファイルがロードされていません」と表示します。 「text-indent」を無効にすると、普通の古い広告申込情報が表示されますが、画像を探しているので見栄えがよくなります。

私はこれをあまりにも長く見てきました。誰も私が問題を見るのを助けることができますか？ありがとうございました！

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--> 

ヘッダスクリプト

<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; 
} 
*/ 

ありがとうございました！

Answer 1

flexsliderのCSSはthemeフォルダ内指向&ナビゲーション画像を参照しています。下記を参照してください...

.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; 
    ... 
} 

画像の正しい場所にURLをポイントすると機能します。