1. 首页
  2. 问答
  3. CSS导航栏没有正确排列在IE和FF中

CSS导航栏没有正确排列在IE和FF中

2012-04-05 35 views
0

我遇到了CSS-导航栏的问题 - 它在IE，FF和Safari中没有正确排列。我试图改变边缘，填充，如果IE和！IE语句，它仍然不排队在不同的计算机/显示器。网站是[http://www.couponallies.com] [1]。CSS导航栏没有正确排列在IE和FF中

下面是导航栏的代码 - 右上角，主导航和第二个子导航栏。

任何解决方案，建议非常感谢！

<!--[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

回答

0

规则良好的基于​​列表的菜单：

  • 重置您的列表：ul, li {list-style:none;padding:0;margin:0}
  • 决不风格的LI（除position，float和display）
  • 使用display:block您A -tag
  • 将所有样式放在上10 -tag

见我的教程：preview.moveable.com/JM/ilovelists

来源

2012-04-05 19:27:32

+0

对不起，不知道如果我跟着......新的CSS。我尝试过，但没有将它移到右侧。 – user1316075 2012-04-05 21:09:16

相关问题

 相关问题