Jump to content

Rollover Using Background Image - Creating A Headache!


Recommended Posts

I have created a background image to use for rollovers on my navigation menu. Sites I've looked at online suggest to combine your normal-state image and rollover image onto one image file, and in the CSS, use a <background-position: 0 -30px> on the rollover, to move the image down. Here is the image I've created to use:subnav-bckground.gifSo, the green bar with a grey border is the normal state, and when the user rollover the link, the white bar with a grey border will display.But on my page, I do not see the white bar with a grey border on the rollover. This is what I see:rollbackprob1.gifIn my CSS, I thought perhaps that the declarations I have in {.navmenu960 ul li ul li a:hover} are throwing the hover state off for my background image. So I removed the code and then this is what I see in my browser:bckgroundrollover.gifNow it looks like everything is out of wack. The background image is 251pixels, so I don't know why there is extra space on the right hand side. Furthermore, why is there white space underneath every link? There is a height declaration of 30 pixels. Any help that you can offer is very much appreciated, as you can perhaps tell I am very frustrated with this and looking for a resolution.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;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 25px;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;display: block;border: solid 1px #ccc;}.navmenu960 ul li ul{position: absolute;left: 0;display: block;visibility: hidden;padding-left: 0px;padding-top: 5px; /*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:30px; width:251px;}.navmenu960 ul li ul li a.bckground:hover{background-position: 0 -30px;}.navmenu960 ul li ul li ul li a.bckground {background-image: url('/images/v1_1/surechoice/subsubnavbckground.gif');}	.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; color: #88ac2e; width:251px;}.navmenu960 ul li ul li ul li.top {background-image: url('/images/v1_1/surechoice/sub-top1.gif'); height:33px; display:block; width:255px;}.navmenu960 ul li ul li ul li.top:hover{background-position: 0 -33px; color: #88ac2e; width:255px;}.navmenu960 ul li ul li ul li.bottom {background-image: url('/images/v1_1/surechoice/subnav-bot1.gif'); height:8px; display:block; width:251px;}.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: 251px; /*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 ul li a:hover{ /*sub menus hover style*/background: #ffffff;color: #88ac2e;height:16px;border: solid 0px #ccc;}.subnavcarrot{background-position:right;}

<div id="navmenu" class="navmenu960"><ul><li><a href="/product/payroll/" class="payroll"><strong>Payroll</strong></a>	<ul>	<li class="top"><a href="#">How it works</a></li>	<li><a href="#" class="bckground">Payroll Features</a>		<ul>		<li class="top"><div style="padding: 5px 0 0 25px;">Accounting Software Integration</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><a href="#" class="bckground">iPhone & Mobile Users</a></li>		<li class="bottom"></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"><div style="padding-left:25px;">FAQs</div></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 class="aboutus"><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>

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