Images not displaying correctly

[leighhobson89]

Hi. I have a problem with my site. I have a page of CSS, and two pages of code. One displays correctly, the other doesnt display the menu tabs at the top of the page, yet they are the same, and the images are loaded on the server, and I am positive the paths are correct. To try it, look at http://www.homecallplus.co.uk/newsite At the top should be a menu bar but it doesnt display (the text is in white but no image showing.) now try http://www.homecallplus.co.uk/newsit...s/products.htm and you ll see this is fine. I will now show the relevant code for the two pages and the css also: Please help!!

Products.htm

Code: Select all

 
<div id="head_menu">
      <ul>   
 
        <li><a href="../index.htm" title="Home" class="off">Home</a></li>  
 
        <li><a href="about.htm" title="Tenants" class="off">About</a></li>        
 
        <li><a href="works.htm" title="Landlords" class="off">How It Works</a></li>        
 
        <li><a href="products.htm" title="Property Managers" class="on">Products</a></li>        
 
        <li><a href="apply.htm" title="Commercial" class="off">Apply</a></li>        
 
        <li><a href="#" title="Media" class="off">Media</a></li>        
 
      </ul>
  </div>

index.htm

Code: Select all

<div id="head_menu">
      <ul>   
 
        <li><a href="index.htm" title="Home" class="on">Home</a></li>  
 
        <li><a href="pages/about.htm" title="Tenants" class="off">About</a></li>        
 
        <li><a href="pages/works.htm" title="Landlords" class="off">How It Works</a></li>        
 
        <li><a href="pages/products.htm" title="Property Managers" class="off">Products</a></li>        
 
        <li><a href="pages/apply.htm" title="Commercial" class="off">Apply</a></li>        
 
        <li><a href="#" title="Media" class="off">Media</a></li>        
 
      </ul>
  </div>

CSS:

Code: Select all

#head_menu{
    position: relative; 
 width: 850px;
 height: 30px;
}
#head_menu ul{
    margin: 0px 0px 0px 5px;
    padding: 0;
    list-style-type: none;
}
#head_menu li{
 width: 140px;
    text-align: center;
 vertical-align: center;
    padding: 0;
 height: 30px;
    float: left;
 border: #000000 0px solid;
 line-height: 250%;
}
a.on {
 color: #fff;
 display: block;
 width: 140px;
 height: 30px;
 text-decoration: none;
 background-image: url(../newHomeCall+Site/images/homecall_menu_on.gif);
}
a:hover.on {
 color: #fff;
 background-image: url(../newHomeCall+Site/images/homecall_menu_on.jpg);
}
 
a.off {
 color: #fff;
 display: block;
 width: 140px;
 height: 30px;
 text-decoration: none;
 background-image: url(../newHomeCall+Site/images/homecall_menu_off.jpg);
}
a:hover.off {
 color: #fff;
 background-image: url(../newHomeCall+Site/images/homecall_menu_on.jpg);
}

Lets see if theres anything that can be done here... I want index.htm to display the images.

[dab42pat]

If you look at your source code you will see this.

HTML: Select all

<link href="file://///Hcnl-server/Users MyDocuments Store/LeighH/My Documents/Tenantsafe/homecall.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="file://///Hcnl-server/Users MyDocuments Store/LeighH/My Documents/Tenantsafe/sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="file://///Hcnl-server/Users MyDocuments Store/LeighH/My Documents/Tenantsafe/sIFR-print.css" type="text/css" media="print" />
<script src="file://///Hcnl-server/Users MyDocuments Store/LeighH/My Documents/Tenantsafe/sifr.js" type="text/javascript"></script>
<script src="file://///Hcnl-server/Users MyDocuments Store/LeighH/My Documents/Tenantsafe/sifr-addons.js" type="text/javascript"></script>
<style type="text/css">

I think you might be using dreamweaver and it has changed your file locations to your local source.
change your code to<link rel="stylesheet" href="
sIFR-screen.css" type="text/css" media="screen" />

and the same for the rest.

also

background-image: url(../newHomeCall+Site/images/homecall_menu_on.jpg);

would be better as.

backgroun-image: url(images/homecall_menu_on.jpg);

[dab42pat]

The same applies to your homepage.

HTML: Select all

<div id="head_icon">
      <ul>
        <li><a href="file://///Hcnl-server/Users MyDocuments Store/LeighH/My Documents/Tenantsafe/index.html" title="Homeowners"><img src="file://///Hcnl-server/Users MyDocuments Store/LeighH/My Documents/Tenantsafe/images/homecall_icons_f01.jpg" alt="Home" width="130" height="120" border="0" /></a></li>
        <li><a href="file://///Hcnl-server/Users MyDocuments Store/LeighH/My Documents/Tenantsafe/tenants.html" title="Tenants"><img src="file://///Hcnl-server/Users MyDocuments Store/LeighH/My Documents/Tenantsafe/images/homecall_icons_f02.jpg" alt="Tenants" width="130" height="120" border="0" /></a></li>
        <li><a href="file://///Hcnl-server/Users MyDocuments Store/LeighH/My Documents/Tenantsafe/landlords.html" title="Landlords"><img src="file://///Hcnl-server/Users MyDocuments Store/LeighH/My Documents/Tenantsafe/images/homecall_icons_f03.jpg" alt="Landlords" width="130" height="120" border="0" /></a></li>
        <li><img src="file://///Hcnl-server/Users MyDocuments Store/LeighH/My Documents/Tenantsafe/images/homecall_icons_f04.jpg" alt="Property Managers" width="130" height="120" border="0" /></li>
		<li><img src="file://///Hcnl-server/Users MyDocuments Store/LeighH/My Documents/Tenantsafe/images/homecall_icons_f05.jpg" alt="Commercial" width="130" height="120" border="0" /></li>
		<li><img src="file://///Hcnl-server/Users MyDocuments Store/LeighH/My Documents/Tenantsafe/images/homecall_icons_f06.jpg" alt="Media" width="130" height="120" border="0" /></li>
      </ul>