Sprite image and Firebug screen captures at https://i.stack.imgur.com/6In6K.jpg. Please look, lots of information there.
The site works in asp.net (now converted to php) and xampp. Not at bluehost. The CSS line background: url('../images/imgmap3.jpg'); shows "Failed to load the given url" in Firebug on bluehost but successfully loads in all other environments.
The hotspots are present on the page and work when the whole site is present. But there are no images other than that associated with #container.
It looks like some kind of permissions problem to me, but the preceding background: #fff url(../images/home2.jpg) no-repeat; statement works in all cases - same directory, same 644 permissions, same owner. I did have to add an .htaccess file to this site's root folder pointing to index.htm.
I really don't have any more hair to yank out. I'm pretty sure the problem is something simple, but I just don't see.
Ideas?
#container {
width: 760px;
height: 100%;
min-height: 500px;
border: none;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background: #fff url('../images/home2.jpg') no-repeat;
position: relative;
height: 500px;
}
#homeSpacer {
height: 236px;
width: 780px;
}
#hmMenu {
width: 523px;
height: 157px;
background-image: url('../images/imgmap3.jpg');
background-repeat: no-repeat;
margin-top: 0px;
margin-left: 167px;
margin-bottom: 10px;
padding-top: 0px;
position: relative;
}
#hmMenu li {
margin: 0px;
padding: 0px;
list-style: none;
display: block;
position: absolute;
/*border: solid 1px #000;*/
}
#hmMenu a {
display: block;
}
#hmMenu li a b {
display: none;
}
#imgWebsites {
left: 0px;
top: 60px;
width: 268px;
height: 97px;
}
#imgConsulting {
left: 76px;
top: 10px;
width: 192px;
height: 50px;
}
#imgDatabase {
left: 288px;
top: 37px;
width: 235px;
height: 83px;
}
#imgContact {
left: 332px;
top: 0px;
width: 98px;
height: 33px;
}
#imgWebsites a {
height: 97px;
}
#imgConsulting a {
height: 50px;
}
#imgDatabase a {
height: 83px;
}
#imgContact a {
height: 33px;
}
#imgWebsites a:hover {
background: transparent url('../images/imgmap3.jpg') 0px -217px no-repeat;
}
#imgConsulting a:hover {
background: transparent url('../images/imgmap3.jpg') -76px -167px no-repeat;
}
#imgDatabase a:hover {
background: transparent url('../images/imgmap3.jpg') -288px -194px no-repeat;
}
#imgContact a:hover {
background: transparent url('../images/imgmap3.jpg') -332px -157px no-repeat;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>sprite problem simplified</title>
<link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="homeSpacer"></div>
<ul id="hmMenu">
<li id="imgWebsites" title="Website Design and Construction"><a href="websites.htm"><b>Website Design and Construction</b></a>
</li>
<li id="imgDatabase" title="Microsoft SQL Server Database - Design, Code and Tune"><a href="database.htm"><b>Microsoft SQL Server Database - Design, Code and Tune</b></a>
</li>
<li id="imgConsulting" title="Consulting Services"><a href="consult.htm"><b>Consulting Services</b></a>
</li>
<li id="imgContact" title="Contact e-greymatter.com"><a href="contact.htm"><b>Contact e-greymatter.com</b></a>
</li>
</ul>
</div>
</body>
</html>
It's probably a classic ex-windows-dev error (hangs head in shame). On windows, filenames aren't case sensitive. Linux is more stringent. Fixed camel filename to all lowercase.
Original site was on IIS; test site was running on xampp - both win machines. Stupid me.