ポジショニングデザインビューではあるがライブビューでは動作しません

Question

デザインビューのナビゲーションバーの背景位置が正確に表示されますが、ライブビューに移動すると、ナビゲーションバーの背景位置に移動します各リンクに対して0px 0px。

編集：

ここに画像があります。

デザインビュー：http://postimage.org/image/now197ryt/

ライブビュー：http://postimage.org/image/fyan6wpg5/

ここでは、コードです。

HTML：

は

<div id="topnav"> 
     <ul> 
     <li id="nav-home"><a href="index.html"><span>Feature Product</span></a></li> 
     <li id="nav-all"><a href="shop_owners.html"><span>All Products</span></a></li> 
     <li id="nav-how"><a href="all_products.html"><span>How It Works</span></a></li> 

    </ul> 

CSSは：

#topnav{ 
    position:relative; left:100px; top:100px; margin:0; padding:0; height:50px; 
    } 
#topnav ul{list-style-type:none; text-align:center; line-height:50px} 

#topnav ul li{float:left;} 

#topnav ul li {background:url(../nav-bar-3.png); 
background-repeat:none;} 

#topnav ul li a{display:block; 
height:50px; 
position:relative;} 

li#nav-home{width:200px;} 
li#nav-all{width:200px; background-position:-200px 0px} 
li#nav-how{width:200px; background-position:-400px 0px} 

#topnav ul li span {background:url(../nav-bar-3.png) no-repeat scroll bottom left; 
display:none; 
position:absolute; 
top:0; 
left:0; 
height:50px; 
width:100%; 
z-index:100;} 

#topnav li a span:hover {cursor:pointer;} 

#nav-home span {background-position:0px -50px} 

#nav-all span{background-position:-200px -50px;} 

#nav-how span{background-position:-400px -50px;} 
     </div> 

Answer 1

あなたが追加してみることができます。これはデフォルトの無視をオーバーライド適用されるCSSを強制

{background:url(../nav-bar-3.png) !important; 
background-repeat:none !important;} 

、他には注意してください将来的にそうするcss。

また、試すことができます。

float: none !important;margin: 0 auto !important;