Jump to content

Unexpected Break In-between List Items


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 post
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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...