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

时间：2012-04-05 19:19:02

标签： css internet-explorer firefox navigation position

我的CSS问题 - 导航栏 - 它在IE，FF和Safari中没有正确排列。我已经尝试更改边距，填充，if语句为IE和！IE，它仍然没有在不同的计算机/显示器上排队。网站是[http://www.couponallies.com] [1]。

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

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

    <!--[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:services@couponallies.com"></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>

1 个答案:

答案 0 :(得分：0)

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

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

请参阅我的教程：preview.moveable.com/JM/ilovelists

相关问题
最新问题