Search code examples
htmlcssimagemap

Imagemap works only in IE

I assume its because of positioning, padding and margins. But I really cant fit this imagemap right on element menu. Only IE shows it in good way: http://xn--wiadomesny-37b.pl/bg/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"l lang="pl">
<head>
<meta charset="utf-8">
<title>{TITLE}</title>
<meta name="keywords" content="{H1}" />
<meta name="description" content="{DESC}" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
</head>
<body>
<div class="outer_wrapper">
  <div class="content_bg">

    <div class="wrapper"><div class="promo"><img src="images/header.png" width="655" height="238" /></div>
      <div class="menu"><img src="images/menu.png" width="601" height="158" usemap="#Map" />
        <map name="Map" id="Map">
          <area shape="circle" coords="66,86,64" href="#" alt="" />
          <area shape="circle" coords="217,68,68" href="#" alt="" />
          <area shape="circle" coords="371,69,64" href="#" alt="" />
          <area shape="circle" coords="529,88,67" href="#" alt="" />
        </map>
      </div>
      <div class="content"><div class="content_text">{CONTENT}</div></div>
      <div class="sider">
        <div class="sider_top"></div>
        <div class="sider_bg">{SIDEBAR}</div>
        <div class="sider_bottom"></div>
      </div>
      <div class="footer">
        <div class="footer_left">{FOOTER}</div>
        <div class="footer_right"><strong>Wykonanie</strong>: <a href="http://www.firmowa-strona-www.pl" title="Tanie strony www firmowe">Firmowa Strona WWW</a></div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
Solution

  • The problem is being caused by the z-index in this rule:

    .content_bg {
    background-image: url("../images/bg_overlay.png");
    background-position: center 40px;
    background-repeat: no-repeat;
    height: 814px;
    margin: 0;
    padding: 40px 0 0;
    position: relative;
    width: 100%;
    z-index: -20; /* remove this line */
}