Jump to content

Rollover State Does Not Recognize Text...


Recommended Posts

I am using a rollover nav menu with no margins. Instead, I'm using a background image for the top, rounded corner list item that has some white space at the top, giving the idea that margin/padding is being used. Here is the image that I use for the first list item:main-top1.gifNow here is how the menu should look, when the user rolls-over "Product":nav-ro3.gifThe problem is when the user rolls-over in the white space between the top nav and the sub menu. I've added a giant arrow to replicate my mouse:nav-ro1.gifAs you can see, the text "disappears," or turns white. But, when the mouse moves down a little bit, the text displays:nav-ro2.gifI'm confused on why this is happening. As you may be able to tell, the text is supposed to stay green in the 2nd screen shot, immediately when the green bar turns to white. If you need more information please do not hesitate to ask, thank you for your help.

Edited by mboehler3
Link to post
Share on other sites

Here is my HTML:

<div id="navmenu" class="navmenu960"><ul><li><a href="/product/payroll/" class="payroll"><strong>Payroll</strong></a>	<ul>	<li class="top"><div style="padding-top:20px;"><a href=#">How it works</a></div></li>	<li><a href="#" class="bckgroundarrow">Payroll Features</a>		<ul>		<li class="top"><div style="padding-top:5px;"><a href="#">Accounting Software Integration</a></div></li>		<li><a href="/product/payroll/time-clock-integration.asp" class="bckground">Time Clock Integration</a></li>		<li><a href="/product/payroll/1-clickpayroll.asp" class="bckground">1-Click™ Technology</a></li>		<li><a href="#" class="bckground">Security</a></li>		<li class="bottom"><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 class="bottom"><a href="#">FAQs</a></li>	</ul></li><li><a href="/product/"><strong>Products & Services</strong></a>	<ul>	<li class="top"><div style="padding-top:20px;"><a href="/product/401k/">401k Plans</a></div></li>	<li style="width:251px;"><a href="/product/health-insurance/" class="bckground">Health Insurance</a></li>	<li><a href="/product/workers-compensation/" class="bckground">Workers' Compensation</a></li>	<li><a href="/product/screening/" class="bckground">Pre-Employment Screening</a></li>	<li class="bottom"><a href="/product/compliance/">Compliance</a></li>	</ul></li><li><a href="https://localhost/surechoice/accountant_access.asp"><strong>Accountant Center</strong></a>	<ul>	<li class="top"><div style="padding-top:20px;"><a href="/surechoice/surechoice-refer.asp">Refer a client</a></div></li>	<li style="width:251px;"><a href="/surechoice/surechoice-resell.asp" class="bckground">Profit from Payroll</a></li>	<li><a href="/surechoice/surechoice-rewards.asp" class="bckground">Rewards Program</a></li>	<li><a href="/surechoice/what-is-surechoice.asp" class="bckground">Access Reports</a></li>	<li><a href="/surechoice/surechoice-webinars.asp" class="bckground">Payroll Webinars</a></li>	<li class="bottom"><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 class="top"><div style="padding-top:20px;"><a href="/calculator/">Payroll Calculators</a></div></li>	<li style="width:251px;"><a href="/online-payroll/default_state.asp" class="bckground">State Payroll Tax Info</a></li>	<li><a href="/spsite/resources/articles/" class="bckground">Helpful Payroll Articles</a></li>	<li><a href="/online-payroll/" class="bckground">Payroll Terms</a></li>	<li class="bottom"><a href="/video/">Small Business Videos</a></li>	</ul></li><li><a href="#"><strong>Media Center</strong></a>	<ul>	<li class="top"><div style="padding-top:20px;"><a href="/spsite/press/survey.asp">Main Street Insights</a></div></li>	<li style="width:251px;"><a href="/scorecard/" class="bckground">Small Business Scorecard</a></li>	<li><a href="/spsite/press/releases/" class="bckground">Press Releases</a></li>	<li class="bottom"><a href="/contactus/">Contact Us</a></li>	</ul></li><li class="aboutus"><a href="/spsite/company/" class="aboutus"><strong>About Us</strong></a>	<ul>	<li class="top"><div style="padding-top:20px;"><a href="/spsite/company/company-awards.asp">Awards & Recognition</a></div></li>	<li style="width:251px;"><a href="/spsite/company/testimonials.asp" class="bckground">Customer Testimonials</a></li>	<li><a href="/spsite/company/partners.asp" class="bckground">Strategic Partners</a></li>	<li><a href="/spsite/company/careers.asp" class="bckground">Careers at SurePayroll</a></li>	<li><a href="/spsite/company/meet-the-team.asp" class="bckground">Meet Our Team</a></li>	<li><a href="#" class="bckground">Security and Privacy</a></li>	<li class="bottom"><a href="/contactus/">Contact Us</a></li>	</ul></li></ul></div>

And CSS:

#navmenu {margin-right:0px;margin-left:-30px;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.aboutus {padding-left:5px; margin-right:-20px;}.navmenu960 ul li a{display: block;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 25px;font-size: 15px;text-decoration: none;}.navmenu960 ul li a.aboutus {display: block;background: #88ac2e;color: white;padding: 3px 30px 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;display: block;border: solid 1px #ccc;}.navmenu960 ul li ul{position: absolute;left: 0;display: block;visibility: hidden;padding-left: 0px;padding-top: 2px; /*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/subnav-bckground.gif'); background-repeat:no-repeat; height:25px; width:auto;}.navmenu960 ul li ul li a.bckground:hover{background-position: 0 -30px; height:25px; color:#88ac2e; width:auto;}.navmenu960 ul li ul li a.bckgroundarrow {background-image: url('/images/v1_1/surechoice/subnav-bckgroundarrow.gif'); background-repeat:no-repeat; height:25px; width:auto;}.navmenu960 ul li ul li a.bckgroundarrow:hover{background-position: 0 -30px; height:25px; color:#88ac2e; width:auto;}.navmenu960 ul li ul li ul li a.bckground {background-image: url('/images/v1_1/surechoice/subsubback.gif'); background-repeat:no-repeat; height:25px;}	.navmenu960 ul li ul li ul li a.bckground:hover{background-position: 0 -30px; height:25px;}.navmenu960 ul li ul li.bottom {background: url('/images/v1_1/surechoice/main-bot1.gif') no-repeat 0 0; font-weight:bold; font-family:Arial; font-size:13px; height:34px; display:block; width:251px;}.navmenu960 ul li ul li.bottom:hover{background-position: 0 -34px; color: #88ac2e; width:251px;}.navmenu960 ul li ul li.top {background-image: url('/images/v1_1/surechoice/main-top1.gif'); background-repeat:no-repeat; height:45px; font-size:13px; font-weight:bold; display:block; width:251px;}.navmenu960 ul li ul li.top:hover{background-position: 0 -45px; width:251px; color:#88ac2e; display:block; height:45px;}.navmenu960 ul li ul li ul li.top {background-image: url('/images/v1_1/surechoice/sub-top1.gif'); height:33px; display:block; width:265px;}.navmenu960 ul li ul li ul li.top:hover{background-position: 0 -33px; color: #88ac2e; width:265px;}.navmenu960 ul li ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/subbotback.gif'); height:32px; display:block; width:265px;}.navmenu960 ul li ul li ul li.bottom:hover{background-position: 0 -32px; color: #88ac2e; width:265px;}.navmenu960 ul li ul li a {font: normal 13px Arial;font-weight:bold;width: auto; /*width of sub menus*/margin: 0;}   .navmenu960 ul li ul li ul {position: absolute;left: 0;display: block;visibility: hidden;padding-left:0px;padding-top: 0px; }.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*/color: #88ac2e;height: auto;border: solid 0px #ccc;}.navmenu960 ul li ul li ul li a:hover{ /*sub menus hover style*/color: #88ac2e;height:auto;border: solid 0px #ccc;}.subnavcarrot{background-position:right;}

Link to post
Share on other sites
Thank you, that worked - but now a small part of the left and right borders go away when you rollover the text, as seen here:nav-ro2.gif
Hmm, it seems your <a> element and the <li> element have different background declarations.Add this to the a element that's a descencent of li.top: margin: 0 1px;
Link to post
Share on other sites
Hmm, it seems your <a> element and the <li> element have different background declarations.Add this to the a element that's a descencent of li.top: margin: 0 1px;
Like this?
.navmenu960 ul li ul li.top {background-image: url('/images/v1_1/surechoice/main-top1.gif'); background-repeat:no-repeat; height:45px; font-size:13px; font-weight:bold; display:block; width:251px; margin: 0 1px;}

Link to post
Share on other sites

No, it has to go on the <a> element within it:The width must be set to auto (to cancel out any width settings there may have been before) in order for the margin to work properly.

.navmenu960 ul li ul li.top a {  display: block;  margin: 0 1px;  width: auto;  height: ...;}

Edited by Ingolme
Link to post
Share on other sites
No, it has to go on the <a> element within it:The width must be set to auto (to cancel out any width settings there may have been before) in order for the margin to work properly.
.navmenu960 ul li ul li.top a {  display: block;  margin: 0 1px;  width: auto;  height: ...;}

Thank you for your help, now I have the same issue with the sub, sub menu. I applied the same CSS for the ul li ul li ul li... here's what I see when I rollover the top:subsubmenurollproblem.gifHere's my CSS:
.navmenu960 ul li ul li ul li.top {background-image: url('/images/v1_1/surechoice/sub-top1.gif'); height:33px; display:block; width:295px;}.navmenu960 ul li ul li ul li.top a {display: block; margin: 0 1px; width: auto;}.navmenu960 ul li ul li ul li.top:hover{background-position: 0 -33px; height:33px; color: #88ac2e; width:295px;}

Link to post
Share on other sites

UPDATE:I'm still having trouble with this sub-sub-menu. When you rollover the top and bottom, you get a break in the left gray border:subsubtop1.gifsubsubbottom1.gifAnd now the first link breaks onto two lines. But, when I change the width of ".navmenu960 ul li ul li ul li.top" from 265 to 285, I see this:subsubtop2.gifI don't get it - why does the text break? It can obviously fit onto one line. And why does the border go away on a rollover?Here is my CSS:

/* Second Level Top */.navmenu960 ul li ul li ul li.top {background-image: url('/images/v1_1/surechoice/sub-top1.gif'); background-repeat:no-repeat; height:33px; display:block; width:265px; margin: 0 1px;}.navmenu960 ul li ul li ul li.top a {display: block; margin: 0 1px; width: auto;}.navmenu960 ul li ul li ul li.top:hover{background-position: 0 -33px; display:block; height:33px; color: #88ac2e; width:265px;}/* Second Level Middle */.navmenu960 ul li ul li ul li a.bckground {background-image: url('/images/v1_1/surechoice/subsubback.gif'); background-repeat:no-repeat; height:25px; width:212px;}.navmenu960 ul li ul li ul li a.bckground:hover{background-position: 0 -30px; height:25px; width:212px;}/* Second Level Bottom */.navmenu960 ul li ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/subbotback.gif'); height:32px; display:block; width:265px;}.navmenu960 ul li ul li ul li.bottom:hover{background-position: 0 -32px; color: #88ac2e; width:265px;}.navmenu960 ul li ul li ul li.bottom a {display: block; margin: 0 1px; width: auto;}

And the HTML:

<ul><li><a href="/product/payroll/" class="payroll"><strong>Payroll</strong></a>	<ul>	<li class="top"><div style="padding-top:20px;"><a href=#">How it works</a></div></li>	<li><a href="#" class="bckgroundarrow">Payroll Features</a>		<ul>		<li class="top"><div style="padding-top:5px;"><a href="#">Accounting Software Integration</a></div></li>		<li><a href="/product/payroll/time-clock-integration.asp" class="bckground">Time Clock Integration</a></li>		<li><a href="/product/payroll/1-clickpayroll.asp" class="bckground">1-Click™ Technology</a></li>		<li><a href="#" class="bckground">Security</a></li>		<li class="bottom"><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 class="bottom"><a href="#">FAQs</a></li>	</ul></li>

Any help is appreciated!

Link to post
Share on other sites

What you'll have to do is to remove the height declaration from li.top and put a min-height one instead.Once you've done that, remove the margin from the <a> element and use a border instead:

border: 1px solid #CCCCCC;border-width: 0 1px;

Link to post
Share on other sites
What you'll have to do is to remove the height declaration from li.top and put a min-height one instead.Once you've done that, remove the margin from the <a> element and use a border instead:
border: 1px solid #CCCCCC;border-width: 0 1px;

Making these changes to the CSS:
.navmenu960 ul li ul li ul li.top {background-image: url('/images/v1_1/surechoice/sub-top1.gif'); background-repeat:no-repeat; min-height:1; display:block; width:265px; margin: 0 1px;}.navmenu960 ul li ul li ul li.top a {display: block; border: 1px solid #CCCCCC; border-width: 0 1px;width: auto;}

Rendered this:gif1.gifgif2.gifDoesn't the li.top need a height declaration, since the image is 66 pixels, and the bottom 33 are the rollover?

Link to post
Share on other sites

Right, that makes things more difficult. Because the only way to deal with wrapping text is increasing the vertical size of the container.Maybe you can find a shorter word to put there, or design the whole menu to be overall wider.

Link to post
Share on other sites
I can make the submenu wider, that is no problem. But with this new code, even when I remove the third word, it still looks funky:rolling1.gif
Just leave the code as you had it before. The new code was intended to give space for the text to wrap, but it's not necessary if the text isn't supposed to wrap.
Link to post
Share on other sites
Just leave the code as you had it before. The new code was intended to give space for the text to wrap, but it's not necessary if the text isn't supposed to wrap.
But the page doesn't look how I want it to... there is white space underneath the top link, and there is a gray border that sticks out on the left. So I want to change the code, but I don't know what's wrong.
Link to post
Share on other sites
But the page doesn't look how I want it to... there is white space underneath the top link, and there is a gray border that sticks out on the left. So I want to change the code, but I don't know what's wrong.
I found a solution, using this CSS:
/* Second Level Top */.navmenu960 ul li ul li ul li.top {background-image: url('/images/v1_1/surechoice/sub-top1.gif'); background-repeat:no-repeat; height: 33px; display:block; width:265px; margin: 0 1px; margin-left:-1px;}.navmenu960 ul li ul li ul li.top a {display: block; width: auto; margin: 0 7px;}.navmenu960 ul li ul li ul li.top:hover{background-position: 0 -33px; display:block; height:33px; color: #88ac2e; width:265px;}/* Second Level Middle */.navmenu960 ul li ul li ul li a.bckground {background-image: url('/images/v1_1/surechoice/subsubback.gif'); background-repeat:no-repeat; height:25px; width:212px; margin-left:-1px;}.navmenu960 ul li ul li ul li a.bckground:hover{background-position: 0 -30px; height:25px; width:212px;}/* Second Level Bottom */.navmenu960 ul li ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/subbotback.gif'); height:32px; display:block; width:265px; margin-left:-1px;}.navmenu960 ul li ul li ul li.bottom:hover{background-position: 0 -32px; color: #88ac2e; width:265px;}.navmenu960 ul li ul li ul li.bottom a {display: block; margin: 0 7px; width: auto;}

Thanks Ingolme for your help.

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...