Jump to content

Unexpected Break In-between List Items


mboehler3
 Share

Recommended Posts

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:payroll-break-subnav.gifAfter 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

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

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

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

.navmenu960 ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/botsubbar1.gif'); height:9px ; }

Edited by chibineku
Link to comment
Share on other sites

.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

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:iesubnavss.gifHere 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:ffsubnavss.gif

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...