mboehler3 Posted August 28, 2009 Share Posted August 28, 2009 I am working on the navigation menu for my website, using <li> for the drop-down menu. In order to create a rounded-box effect, I am using an image as the last item. However for some reason in both IE and Firefox, a 5-10px margin is displaying between the last and second-to-last item, seen here:After looking through my code I cannot explain why this is happening. Will someone please offer some advice? #navmenu {background-color: #88ac2e;height: 30px;}.navmenu960 ul{margin: 0;padding: 0;list-style-type: none; font-size: 14px;font-family: Arial;z-index:4;}.navmenu960 ul li{position: relative;display: inline;float: left;text-align: left;font-size: 14px;color:#ffffff;z-index:15;}.navmenu960 ul li a{display: block;background: #88ac2e;color: white;padding: 3px 27px 0px;font-size: 15px;text-decoration: none;}.navmenu960 ul li a.payroll {display: block;background: #88ac2e;color: white;padding: 3px 20px 0px 0px;font-size: 15px;text-decoration: none;}.navmenu960 ul li a.aboutus {display: block;background: #88ac2e;color: white;padding: 3px 10px 0px 40px;font-size: 15px;text-decoration: none;}* html .navmenu960 ul li a{ /*IE6 hack to get sub menu links to behave correctly*/display: inline-block;}.navmenu960 ul li a:hover{background: #ffffff; /*tab link background during hover state*/height: 25px;color: #88ac2e;}.navmenu960 ul li ul{position: absolute;left: 0;display: block;visibility: hidden;padding-left: 0px;padding-top: 0px; /*margin between li and drop-down menu*/}.navmenu960 ul li ul li{display: list-item;float: none;}.navmenu960 ul li ul li a.bckground {background-image: url('/images/v1_1/surechoice/subnavbckground.gif');} .navmenu960 ul li ul li a{font: normal 13px Arial;font-weight:bold;width: 220px; /*width of sub menus*/padding: 5px;margin: 0;padding-left:25px;} .navmenu960 ul li ul li ul {position: absolute;left: 0;display: block;visibility: hidden;padding-left: 0px;padding-top: 0px; /*margin between li and drop-down menu*/}.navmenu960 ul li ul li a.payroll {font: bold 13px Arial;width: 220px; /*width of sub menus*/padding: 5px;margin: 0;border-top-width: 0;padding-left:25px;background-image:url('/images/960/global/header-carrot-right.gif');background-repeat:no-repeat;background-position:right;} .navmenu960 ul li ul li a:hover{ /*sub menus hover style*/background: #ffffff;color: #88ac2e;height:16px;border: solid 0px #ccc;}.subnavcarrot{background-position:right;} And my HTML: <div id="navmenu" class="navmenu960"><ul><li><a href="/product/payroll/" class="payroll"><strong>Payroll</strong></a> <ul> <li><div style="margin-bottom:-5px;"><img src="/images/v1_1/surechoice/topsubbar1.gif" /></div><a href="#">How it works</a></li> <li><a href="#" class="bckground">Payroll Features</a> <ul> <li><a href="#">Accounting Software Integration</a></li> <li><a href="/product/payroll/time-clock-integration.asp">Time Clock Integration</a></li> <li><a href="/product/payroll/1-clickpayroll.asp">1-Click™ Technology</a></li> <li><a href="#">Security</a></li> <li><a href="#">iPhone & Mobile Users</a></li> </ul> </li> <li><a href="#" class="bckground">Payroll Pricing</a></li> <li><a href="/product/payroll/payroll-services.asp" class="bckground">Compare Payroll Services</a></li> <li><a href="/product/payroll/clergy-payroll.asp" class="bckground">Clergy Payroll</a></li> <li><a href="/guidedtour/" class="bckground">Guided Tour</a></li> <li><a href="/enroll/StartAccount.asp" class="bckground">New Payroll Enrollment</a></li> <li><a href="/login/login.asp" class="bckground">Customer Login</a></li> <li><a href="/spsite/service/faq.asp" class="bckground">FAQs</a></li> <li><img src="/images/v1_1/surechoice/botsubbar1.gif" /></li> </ul></li><li><a href="/product/"><strong>Products & Services</strong></a> <ul> <li><a href="/product/401k/">401k Plans</a></li> <li><a href="/product/health-insurance/">Health Insurance</a></li> <li><a href="/product/workers-compensation/">Workers' Compensation</a></li> <li><a href="/product/screening/">Pre-Employment Screening</a></li> <li><a href="/product/compliance/">Compliance</a></li> </ul></li><li><a href="https://<%= Request.ServerVariables("SERVER_NAME") %>/surechoice/accountant_access.asp"><strong>Accountant Center</strong></a> <ul> <li><a href="/surechoice/surechoice-refer.asp">Refer a client</a></li> <li><a href="/surechoice/surechoice-resell.asp">Profit from Payroll</a></li> <li><a href="/surechoice/surechoice-rewards.asp">Rewards Program</a></li> <li><a href="/surechoice/what-is-surechoice.asp">Access Reports</a></li> <li><a href="/surechoice/surechoice-webinars.asp">Payroll Webinars</a></li> <li><a href="/surechoice/surechoice-resourcecenter.asp">Resource Center</a></li> </ul></li><li><a href="/spsite/resources/"><strong>Small Business Tools</strong></a> <ul> <li><a href="/calculator/">Payroll Calculators</a></li> <li><a href="/online-payroll/default_state.asp">State Payroll Tax Info</a></li> <li><a href="/spsite/resources/articles/">Helpful Payroll Articles</a></li> <li><a href="/online-payroll/">Payroll Terms</a></li> <li><a href="/video/">Small Business Videos</a></li> </ul></li><li><a href="#"><strong>Media Center</strong></a> <ul> <li><a href="/spsite/press/survey.asp">Main Street Insights</a></li> <li><a href="/scorecard/">Small Business Scorecard</a></li> <li><a href="/spsite/press/releases/">Press Releases</a></li> <li><a href="/contactus/">Contact Us</a></li> </ul></li><li><a href="/spsite/company/" class="aboutus"><strong>About Us</strong></a> <ul> <li><a href="/spsite/company/company-awards.asp">Awards & Recognition</a></li> <li><a href="/spsite/company/testimonials.asp">Customer Testimonials</a></li> <li><a href="/spsite/company/partners.asp">Strategic Partners</a></li> <li><a href="/spsite/company/careers.asp">Careers at SurePayroll</a></li> <li><a href="/spsite/company/meet-the-team.asp">Meet Our Team</a></li> <li><a href="#">Security and Privacy</a></li> <li><a href="/contactus/">Contact Us</a></li> </ul></li></ul></div> Thank you in advance, Link to comment Share on other sites More sharing options...
Ingolme Posted August 28, 2009 Share Posted August 28, 2009 If you have some for of DOM inspector, look at what CSS is being applied to this line: <li><img src="/images/v1_1/surechoice/botsubbar1.gif" /></li> Either the <li> element has padding, the <img> element has margin or the line-height is making the image go down.Instead of an <img> element I do recommend an empty <li> element with a background image instead, give it a fixed width and height. Link to comment Share on other sites More sharing options...
mboehler3 Posted August 28, 2009 Author Share Posted August 28, 2009 If you have some for of DOM inspector, look at what CSS is being applied to this line:<li><img src="/images/v1_1/surechoice/botsubbar1.gif" /></li> Either the <li> element has padding, the <img> element has margin or the line-height is making the image go down.Instead of an <img> element I do recommend an empty <li> element with a background image instead, give it a fixed width and height. I created a new class:.navmenu960 ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/botsubbar1.gif'); height:9px} And gave this to the last li: <li class="bottom"></li> And it looks good in Firefox, but not IE. Am I doing this right? Link to comment Share on other sites More sharing options...
Ingolme Posted August 28, 2009 Share Posted August 28, 2009 I created a new class:.navmenu960 ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/botsubbar1.gif'); height:9px} And gave this to the last li: <li class="bottom"></li> And it looks good in Firefox, but not IE. Am I doing this right? Try giving it a width too. Make is just as wide as the image should be. In fact, you should assign "display: block" to it because previous declarations seem to have made your <li> elements inline. Link to comment Share on other sites More sharing options...
chibineku Posted August 28, 2009 Share Posted August 28, 2009 .navmenu960 ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/botsubbar1.gif'); height:9px ; } Link to comment Share on other sites More sharing options...
Ingolme Posted August 28, 2009 Share Posted August 28, 2009 .navmenu960 ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/botsubbar1.gif'); height:9px ; }A semi-colon isn't required in the last delcaration of a CSS rule. The closing brace is enough to indicate the end of the property declaration. Link to comment Share on other sites More sharing options...
mboehler3 Posted August 28, 2009 Author Share Posted August 28, 2009 Try giving it a width too. Make is just as wide as the image should be. In fact, you should assign "display: block" to it because previous declarations seem to have made your <li> elements inline.I've added the display:block and a width, and I still see this in my IE browser:Here is the exact code from my CSS:.navmenu960 ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/botsubbar1.gif'); height:9px; display:block; width:251px;} In Firefox is looks like this: Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.