Jump to content

Rollover Using Background Image - Creating A Headache!


mboehler3

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...