Question

Sprite image和Firebug屏幕捕获http://imgur.com/a/JbYv9。请看那里的很多信息。

该网站适用于asp.net（现已转换为php）和xampp。不是在bluehost。 CSS行background: url('../images/imgmap3.jpg');显示＆＃34; 无法加载给定网址＆＃34;在bluehost上的Firebug中，但在所有其他环境中成功加载。

热点出现在页面上，并在整个站点存在时工作。但除#container之外没有任何图像。

它看起来像某种权限问题，但前面的background: #fff url(../images/home2.jpg) no-repeat;语句适用于所有情况 - 相同的目录，相同的644权限，相同的所有者。我必须将.htaccess文件添加到此网站的指向index.htm的根文件夹中。

我真的不再有头发了。我非常确定这个问题很简单，但我不知道。

想法？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

它可能是一个经典的ex-windows-dev错误（让人头疼）。在Windows上，文件名不区分大小写。 Linux更严格。修复了全部小写的驼峰文件名。

原始网站在IIS上;测试站点在xampp上运行 - 两者都是胜利机器。愚蠢的我。

CSS sprites不加载

1 个答案: