ホバー上の画像表示のアライメントはIE7でのみ機能しますか？

Question

テキストにマウスオーバーすると画像を表示しようとしました。それはうまく動作します。そして、イメージの終わりがコンテナにあるべきであるようにイメージのアラインメントが示されるべきです。以下のコードでは正常に動作しますが、IE7のみで動作します。すべてでは、それは切り刻まれる..ここで何が間違っていますか？

<td valign="middle" class="table_td td" style="width: 347px"> 
    <span class="feature_text" style="cursor:pointer" 
    onmouseover="ShowPicture('Style16',1)" 
     onmouseout="ShowPicture('Style16',0)" id="a16"> 
       Storefront Window Decal</span> 
    <div id="Style16" style="position:relative;height:0px;left:50%;bottom:700%; 
     visibility:hidden; border:solid 0px #CCC; padding:5px"> 
     <img src="images/window-decal-image.gif"></div> 

<script language="javascript" type="text/javascript"> 
function ShowPicture(id,Source) 
{ 
    var vis, elem; 
    if (1 == Source) 
    { 
     vis = "visible"; 
    } 
    else if (0 == Source) 
    { 
     vis = "hidden"; 
    } 
    else 
    { 
     throw new RangeError("Unknown Flag"); 
    } 

    if (elem = document.getElementById(id)) 
    { 
     elem.style.visibility = vis; 
    } 
    else 
    { 
     throw new TypeError("Element with id '"+id+"' does not exist."); 
    } 
    return vis; 
} 
</script> 

誰かが私を助けることができますか？前もって感謝します！！

Answer 1

<img>タグの代わりにbackground-imageをdivに使用することをお勧めします。background-position:right;を要件に合わせて調整してください。

完璧なものになるには、関連する他のCSSビットが必要な場合がありますが（background-repeat？）、そうすることをお勧めします。

また、そのスタイルコードをすべて別のCSS <style>要素に移動して、HTMLコードの乱雑さを軽減し、読みやすくすることをお勧めします。