Power By 专否社区

CSS Navigation Bar not Lining Up In IE and FF Correctly

Go To StackoverFlow.com

0

I'm having trouble with my CSS - Navigation Bar - it doesn't line up correctly in IE, FF and Safari. I have tried changing margins, padding, if statements for IE and !IE and it still doesn't line up right on different computer/monitors. Site is [http://www.couponallies.com][1].

Here is the code for the navigation bars - the top right, main navigation and a second sub-navigation bar.

Any solutions, suggestions are greatly appreciated!

    <!--[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>
2012-04-05 19:19
by user1316075

0

Rules for good list-based menus:

  • Reset your lists : ul, li {list-style:none;padding:0;margin:0}
  • Never style the LI (other than position, float and display)
  • Use display:block on your A-tag
  • Put all your styling on the A-tag

See my tutorial: preview.moveable.com/JM/ilovelists

2012-04-05 19:27
by Diodeus - James MacFarlane
Sorry, not sure if I follow... new to CSS. I tried that but it didn't move it to the right - user1316075 2012-04-05 21:09
Ads