CSSホットスポットとセンタリングの問題

Question

私はウェブサイトの作成の途中で、修正方法がわからないという問題を抱えています。サイトには、ホットスポットが中央にある長方形のイメージがあります。 CSSコード下記 -

#image_map 
    { 
     display: block; margin-left: auto; margin-right: auto; 
     width:302px; 
     height:65px; 
     background:url(Images/ManordLogo.png) no-repeat; 
     position:relative; 
     } 
     #image_map a 
     { 
      display:block; 
      position:absolute; 
      } 

      #image_map a#link1 
      { 
       width:42px; 
       height:49px; 
       top:11%; 
       left:43%; 
       } 

最初の行は、画像を中心とし、次のコードは、ホットスポットを定義し、作成し、ページがスケール可能にすることができます。すべて正常に動作し、ホットスポット&イメージは正しい位置にとどまりますが、デザイン面では、ページ上部の現在の位置より約20px低いイメージが必要です。 私はいつもマージンやパッディング、またはポジショニングの方法を試してみます。画像はページの右上隅に飛びます。なぜ私はアイデアがありません。

私は同じ滞在すると、ホットスポットの位置に関係なく、ブラウザのウィンドウサイズの相対的なままに画像やホットスポットを必要とするが、設計のために、私は画像が20ピクセル

午前下に移動する必要があります私は間違っていると私はこれを達成する方法は？

EDIT - 私はJsFiddleバージョンを作成しました。つまり、黒は画像全体を表し、水色はホットスポットを表します。ブロック全体（黒と水色）は20ピクセル下に移動する必要があります。依然として中心に置かれ、スケール可能である。 JSFIDDLEへ

リンク - http://jsfiddle.net/cT3Eu/

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

Answer 1

私はIE7、8、9、現在のFirefoxのバージョンと現在のChromeのバージョンでそれをテストしている、と#image_mapためmargin-top: 20px;のアドオンは、私のために正常に動作します：http://jsfiddle.net/cT3Eu/1/