IEとFFでCSSナビゲーションバーが正しく整列していません

IE、FF、Safariで正しく表示されないCSSナビゲーションバーに問題があります。私は余白、パディング、IEと！IEのためのif文を変更しようとしました、そして、それはまだ別のコンピュータ/モニタに並んでいません。サイトは[http://www.couponallies.com] [1]です。IEとFFでCSSナビゲーションバーが正しく整列していません

ナビゲーションバーのコードは、右上、メインナビゲーション、および2番目のサブナビゲーションバーです。

すべての解決策、提案は非常に高く評価されています！良いリストベースのメニューの

<!--[if IE]> 
    #smallmenuright{position: relative;} 
    #smallmenuright li{ 
     margin:0px 0px 0px 0px; 
     padding:0px 0px 0px 0px; 
     list-style:none; 
     position:absolute; 
     top:1px; 
    } 
    #smallmenuright li, #smallmenuright a{height:60px;display:block;} 

    #rss{left:943px;width:92px;} 
    #rss{background:url('http://www.couponallies.com/CPhotos/submenu3b.png') 0 0;} 
    #rss a:hover{background: url('http://www.couponallies.com/CPhotos/submenu3b.png') 0px -82px;} 

    #twitter{ 
     left:1035px; 
     width:92px; 
    } 
    #twitter{background:url('http://www.couponallies.com/CPhotos/submenu3b.png') -92px 0;} 
    #twitter a:hover{background: url('http://www.couponallies.com/CPhotos/submenu3b.png') -92px -82px;} 

    #facebook{ 
     left:1127px; 
     width:92px; 
    } 
    #facebook{background:url('http://www.couponallies.com/CPhotos/submenu3b.png') -183px 0;} 
    #facebook a:hover{background: url('http://www.couponallies.com/CPhotos/submenu3b.png') -183px -82px;} 

    #contact{ 
     left:1219px; 
     width:92px; 
    } 
    #contact{background:url('http://www.couponallies.com/CPhotos/submenu3b.png') -274px 0;} 


    #contact a:hover{background:url('http://www.couponallies.com/CPhotos/submenu3b.png') -274px -82px;} 
<![endif]--> 

<!--[if !IE]> 
#smallmenuright{position: relative;} 
#smallmenuright li{ 
    margin: 0px 0px 0px 5px; 
    padding:0px 0px 0px 0px; 
    list-style:none; 
    position:absolute; 
    top:1px; 
} 
    #smallmenuright li, #smallmenuright a{height:60px;display:block;} 

    #rss{left:943px;width:92px;} 
    #rss{background:url('http://www.couponallies.com/CPhotos/submenu3b.png') 0 0;} 
    #rss a:hover{background: url('http://www.couponallies.com/CPhotos/submenu3b.png') 0px -82px;} 

    #twitter{ 
    left:1035px; 
    width:92px; 
} 
    #twitter{background:url('http://www.couponallies.com/CPhotos/submenu3b.png') -92px 0;} 
    #twitter a:hover{background: url('http://www.couponallies.com/CPhotos/submenu3b.png') -92px -82px;} 

    #facebook{ 
    left:1127px; 
    width:92px; 
} 
    #facebook{background:url('http://www.couponallies.com/CPhotos/submenu3b.png') -183px 0;} 
    #facebook a:hover{background: url('http://www.couponallies.com/CPhotos/submenu3b.png') -183px -82px;} 

    #contact{ 
    left:1219px; 
    width:92px; 
} 
#contact{background:url('http://www.couponallies.com/CPhotos/submenu3b.png') -274px 0;} 
#contact a:hover{background: url('http://www.couponallies.com/CPhotos/submenu3b.png') -274px -82px;} 
<![endif]--> 

/*MAIN NAVIGATION BAR */ 

<!--[if IE]> 
#navlist{position:relative;top:-30px;z-index:1;padding:0px 0px 0px 0px;} 
#navlist li{ 
    margin: 0px 0px 0px 0px; 
    padding:0px 0px 0px 0px; 
    list-style:none; 
    position:absolute; 
    top:180px;} 

#navlist li, #navlist a{height:51px;display:block;} 

#home{left:31px;width:160px;} 
#home{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') 0 0;} 
#home a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') 0 -50px;} 

#what{ 
    left:191px; 
    width:160px; 
} 
#what{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') -160px 0;} 
#what a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') -160px -50px;} 

#coupons{ 
    left:351px; 
    width:160px; 
} 
#coupons{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') -320px 0;} 
#coupons a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') -320px -50px;} 

#couponcodes{ 
    left:511px; 
    width:160px; 
} 
#couponcodes{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') -480px 0;} 
#couponcodes a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') -480px -50px;} 

#dailydeals{ 
    left:671px; 
    width:160px; 
} 
#dailydeals{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') -640px 0;} 
#dailydeals a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') -640px -50px;} 

#freestuff{ 
    left:831px; 
    width:160px; 
} 
#freestuff{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') -800px 0;} 
#freestuff a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') -800px -50px;} 

#about{ 
    left:991px; 
    width:160px; 
} 
#about{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') -960px 0;} 
#about a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') -960px -50px;} 

#beginners{ 
    left:1151px; 
    width:160px; 
} 
#beginners{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') -1120px 0;} 
#beginners a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') -1120px -50px;} 
<![endif]--> 

<!--[if !IE]> 
#navlist{position:relative;top:-30px;padding:0px 0px 0px 0px;} 
#navlist li{ 
    margin: 0px 0px 0px 5px; 
    padding:0px 0px 0px 0px; 
    list-style:none; 
    position:absolute; 
    top:180px; 
} 
#navlist li, #navlist a{height:51px;display:block;} 

#home{left:31px;width:160px;} 
#home{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') 0 0;} 
#home a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') 0 -50px;} 

#what{ 
    left:191px; 
    width:160px; 
} 
#what{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') -160px 0;} 
#what a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') -160px -50px;} 

#coupons{ 
    left:351px; 
    width:160px; 
} 
#coupons{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') -320px 0;} 
#coupons a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') -320px -50px;} 

#couponcodes{ 
    left:511px; 
    width:160px; 
} 
#couponcodes{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') -480px 0;} 
#couponcodes a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') -480px -50px;} 

#dailydeals{ 
    left:671px; 
    width:160px; 
} 
#dailydeals{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') -640px 0;} 
#dailydeals a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') -640px -50px;} 

#freestuff{ 
    left:831px; 
    width:160px; 
} 
#freestuff{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') -800px 0;} 
#freestuff a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') -800px -50px;} 

#about{ 
    left:991px; 
    width:160px; 
} 
#about{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') -960px 0;} 
#about a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') -960px -50px;} 

#beginners{ 
    left:1151px; 
    width:160px; 
} 
#beginners{background:url('http://www.couponallies.com/CPhotos/sprites6.jpg') -1120px 0;} 
#beginners a:hover{background: url('http://www.couponallies.com/CPhotos/sprites6.jpg') -1120px -50px;} 
<![endif]--> 

/*CSS FOR SMALL SUBMENU - POLICIES AND TOOLBAR DOWNLOAD */ 

/*FOR INTERNET EXPLORER ONLY */ 
<!--[if IE]> 
#submenu{position:relative;height:37px;padding:0px 0px 0px 0px;} 
#submenu li{ 
    margin:0px 10px 0px 0px; 
    padding:0px 0px 0px 0px; 
    list-style:none; 
    position:absolute; 
    top:230px; 
} 
#submenu li, #submenu a{height:36px;display:block;} 

#policies{left:31px;width:139px;} 
#policies{background:url('http://www.couponallies.com/CPhotos/submenuB_new.jpg') 0 0;} 
#policies a:hover{background: url('http://www.couponallies.com/CPhotos/submenuB_new.jpg') 0px -35px;} 

#toolbar{left:170px;width:139px; 
} 
#toolbar{background:url('http://www.couponallies.com/CPhotos/submenuB_new.jpg') -414px 0;} 
#toolbar a:hover{background: url('http://www.couponallies.com/CPhotos/submenuB_new.jpg') -414px -35px;} 
<![endif]--> 

/* FOR ALL OTHER BROWSERS - POSITIONING IS DIFFERENT */ 
<!--[if !IE]> 
#submenu{position:relative;height:37px;padding:0px 0px 0px 0px;} 

#submenu li{ 
    margin: 0px 0px 0px 5px; 
    padding:0px 0px 0px 0px; 
    list-style:none; 
    position:absolute; 
    top:230px; 
} 
#submenu li, #submenu a{height:36px;display:block;} 

#policies{left:31px;width:139px;} 
#policies{background:url('http://www.couponallies.com/CPhotos/submenuB_new.jpg') 0 0;} 
#policies a:hover{background: url('http://www.couponallies.com/CPhotos/submenuB_new.jpg') 0px -35px;} 

#toolbar{left:170px;width:139px; 
} 
#toolbar{background:url('http://www.couponallies.com/CPhotos/submenuB_new.jpg') -414px 0;} 
#toolbar a:hover{background: url('http://www.couponallies.com/CPhotos/submenuB_new.jpg') -414px -35px;} 
<![endif]--> 
</style> 
</head> 

<body> 
<a class="header"></a> 

<ul id="smallmenuright"> 
    <li id="rss"><a href="http://feeds2.feedburner.com/CouponAllies"></a></li> 
    <li id="twitter"><a href="http://twitter.com/couponallies"></a></li> 
    <li id="facebook"><a href="http://www.facebook.com/couponallies/app_128953167177144"></a></li> 
    <li id="contact"><a href="mailto:[email protected]"></a></li> 
</ul> 

<ul id="navlist"> 
    <li id="home"><a href="http://www.couponallies.com"></a></li> 
    <li id="what"><a href="http://www.couponallies.com/coupon-allies/2011/03/welcome.html"></a></li> 
    <li id="coupons"><a href="http://www.couponallies.com/coupon-allies/coupon-center-printable-electronic-offers.html"></a></li> 
    <li id="couponcodes"><a href="http://www.couponallies.com/coupon-allies/coupon-codes.html"></a></li> 
    <li id="dailydeals"><a href="http://www.couponallies.com/coupon-allies/daily-deals.html "></a></li> 
    <li id="freestuff"><a href="http://www.couponallies.com/coupon-allies/free-stuff.html "></a></li> 
    <li id="about"><a href="http://www.couponallies.com/coupon-allies/about.html"></a></li> 
    <li id="beginners"><a href="http://www.couponallies.com/coupon-allies/just-for-beginners.html "></a></li> 
</ul> 

<ul id="submenu"> 
    <li id="policies"><a href="http://www.couponallies.com/coupon-allies/coupon-policies-.html"></a></li> 
    <li id="toolbar"><a href="http://couponallies.ourtoolbar.com/"></a></li> 
</ul>

出典

2012-04-05 user1316075

ルール：

あなたのリストをリセットします。ul, li {list-style:none;padding:0;margin:0}
あなたAにLI（position、floatとdisplay以外）
使用display:blockのスタイルを決して - タグ
すべてのスタイリングをA -tag

私のチュートリアルを参照してください：CSSへの新しい...私は従うかどうかわからない、preview.moveable.com/JM/ilovelists

出典

2012-04-05 19:27:32

申し訳ありません。私はそれを試みたが、それを右に動かさなかった。 – user1316075

IEとFFでCSSナビゲーションバーが正しく整列していません

答えて

関連する問題