Jump to content

mboehler3

Members
  • Content Count

    304
  • Joined

  • Last visited

Everything posted by mboehler3

  1. A lot of this makes sense to me, so now I am coding this to look right in Firefox, Chrome, et al. Running into a problem getting my two text boxes to align within the background image. For some reason it cuts off in Firefox:And in Chrome the boxes are pushed up just a little:Here is my updated CSS:.inputboxusr {border:0;background-image: url('/images/960/accountant-center/ac-user.gif');background-color:transparent; background-repeat: no-repeat; height: 34px; width: 98px; background-position: 0 -20px;}.inputboxpwd {border:0;background-image: url('/images/960/accountant-center/ac-pass.gif');background-color:transparent; background-repeat: no-repeat; height: 34px; width: 98px; background-position: 0 -20px;}.sclogin {float:right; text-align:right; background-image: url('/images/960/accountant-center/ac-loginbckgd.gif'); background-repeat:repeat-x;} Why is the image cutting off at the top?
  2. I am having a problem with viewing my website on a Mac computer. In all browsers on my PC, the footer looks fine, like this:But on a Mac, in both Safari and Firefox, a horizontal scrollbar is added to the footer, seen here:Here is my code: <div class="footerBody"> <div id="content-outer"> <div class="container_12"> <div class="grid_4 leftTextAlign"> <!-- #include virtual = "/Include/960/globals/footer_leftcolumn.asp" --> </div> <div class="grid_4 leftTextAlign margin0"> <div class="footerTitle">Quick Links</div> <div class="lineheight"> <a href="/spsite/service/faq.asp">FAQ</a><br /> <a href="/SecurityCenter/BcrhWare/">Privacy & Security</a><br /> <a href="/contactus/">Contact Us</a><br /> <a href="/sitemap.asp">Site Map</a><br /> <a href="/login/login.asp">Login</a> </div> </div> <div class="grid_4 gridBirthday"> <div class="footer_10yrs"><img src="/images/960/global/footer_10years.gif" /></div> </div> </div> </div> </div> And here is the CSS: .footerBody {background-color:#88ac2e; width:100%; font-family: Arial; color:White; overflow:auto; height: 152px;}.container_12 .grid_4{width:300px;}.grid_4{display:inline;float:left;margin-left:10px;margin-right:10px}.leftTextAlign {text-align:left;}.margin0 {margin-left:0px;}.footerTitle {font-family:Arial; font-size:14pt; font-weight:bold; color:white; margin:10px 0 5px 0;}.lineheight {line-height:20px;}.gridBirthday {text-align:left; margin-left:-10px;}.footer_10yrs img {position:absolute; z-index:5; margin-top:-10px;} I don't know if this will help, but I have the Web Developer toolbar installed on my Firefox (on PC), and when I rollover the middle grid_4, this is what I see... notice how the red box doesn't have a right side, which I think contributes to the scrollbar problem...Any help is greatly appreciated, thanks!
  3. Well it looks the same in 8 and 6. My problems are with Firefox/Safari/Chrome browsers
  4. I'm not able to validate the code because I'm testing on my server-side. I did however, separate the style that was in the code, which now looks like this: <div class="sclogin"> <form class="surechoiceLogin" name="frmMain" method="post" action="/accountant_access.asp"><input name="action" value="Edit" type="hidden"><input name="partnerCode" value="" type="hidden"> <img src="/images/clear.gif" height="5px" width="0" /> <img src="/images/ac-login.gif" height="34" type="image" width="178" style="margin-left:-5px;"> <img src="/images/clear.gif" height="1px" width="0" /> <input id="UserName" name="UserName" class="inputboxusr" size="24" maxlength="12" value="" tabindex="1"> <img src="/images/clear.gif" height="20px" width="0" /> <input id="Password" name="Password" class="inputboxpwd" size="24" maxlength="12" type="password" tabindex="2"> <span class="accountBTM"> <input src="/images/ac-loginbutton.gif" name="submit" value="Submit" height="53" type="image" width="93" tabindex="3" style="margin-bottom:-8px;"> </span> </form></div> And the updated CSS: .sclogin {float:right; text-align:right; background-image: url('/images/960/accountant-center/ac-loginbckgd.gif'); background-repeat:repeat-x; background-position: 0 11px;}
  5. Yeah that's what I did to get it to look right in IE. When I remove the negative, or change it to positive 7, everything becomes mis-aligned in IE.
  6. I am trying to style the login to my website. There is a discrepancy between Firefox and IE. IE looks great:But in FF, the two background images I've created for the login and pass do not align properly:Here is my HTML: <div style="float:right; text-align:right; background-image: url('/images/960/accenter/ac-loginbckgd.gif'); background-repeat:repeat-x; background-position: 0 11px;"> <form class="Login" name="frmMain" method="post" action="/accountant_access.asp"><input name="action" value="Edit" type="hidden"><input name="partnerCode" value="" type="hidden"> <img src="/images/clear.gif" height="5px" width="0" /> <img src="/images/960/ac-login.gif" height="34" type="image" width="178" style="margin-left:-5px;"> <img src="/images/clear.gif" height="1px" width="0" /> <input id="UserName" name="UserName" class="inputboxusr" size="24" value="" tabindex="1"> <img src="/images/clear.gif" height="20px" width="0" /> <input id="Password" name="Password" class="inputboxpwd" size="24" type="password" tabindex="2"> <span class="accountBTM"> <input src="/images/960/ac-loginbutton.gif" name="submit" value="Submit" height="53" type="image" width="93" tabindex="3" style="margin-bottom:-8px;"> </span> </form></div> And here's my CSS: .accountBTM {text-align:right;}.inputboxusr {border:0;background: transparent url('/images/960/accountant-center/ac_surechoice-user.gif') no-repeat top left;height: 34px;width: 98px; padding-top:10px; padding-left:10px; margin-bottom:-7px;}.inputboxpwd {border:0;background: transparent url('/images/960/accountant-center/ac_surechoice-pass.gif') no-repeat top left;height: 34px;width: 98px; padding-top:10px; padding-left:10px; margin-bottom:-7px;} The code is pretty straight-forward... any suggestions are welcome, thank you!
  7. thanks, you're right, I added the IE6 code and the tabs show. Thanks for the help!
  8. Thank you for the link... but I don't have overflow:visible declared anywhere in the CSS. Do I need to add it somewhere, and then add the position:relative and overflow:hidden somewhere else?
  9. Still trying to figure out why there is the bottom spacing issue on that rollover... anybody is welcome to offer their suggestion(s).........
  10. I have a tab-content system set up, and in IE6 it cuts off the top of the tab. See here, in IE8 and Firefox 3.5:And in IE6, where it cuts off the top:Here is the XHTML it uses, for the top: <div class="tabber"> <div class="tabbertab" title="Payroll"> <h3>Oklahoma Payroll</h3> <p><h2 class="state" title="Oklahoma Payroll">Oklahoma Payroll</h2> <div class="stateTabCopy">Did you know that under Oklahoma law, independent contractors are exempt from the state's minimum wage of $6.85 an hour?</div> And the CSS: .tabberlive .tabbertabhide { display:none;}.tabber {}.tabberlive { margin-top:1em;}ul.tabbernav{ padding: 0 0; margin-left:0px; margin-bottom:12px; height: 36px; background-image: url('/images/v1_1/tabber-top1.gif'); background-repeat: no-repeat; background-position: 0 0; width:625px; font: 12px Arial, sans-serif; padding-top:10px;}ul.tabbernav li{ list-style: none; margin: 0; display: inline;}ul.tabbernav li a{ padding: 10px 15px; margin-top:-26px; margin-left: 20px; margin-right: -20px; color:#747474; border: 1px solid #ccc; background: #ededed; text-decoration: none; float:left; display:inline;}ul.tabbernav li a:link { color: #65523f; }ul.tabbernav li a:visited { color: #667; }ul.tabbernav li a:hover{ border-color: #227; text-decoration: none;}ul.tabbernav li.tabberactive a{ text-decoration: none; background-color: #ffffff; border-bottom:none;}ul.tabbernav li.tabberactive a:hover{ text-decoration: none;}.tabberlive .tabbertab { width:625px; padding:5px; background-image: url(/images/v1_1/tabber-bckground.gif); background-repeat: repeat-y; border-top:0; margin-top:-36px;} Any help that anyone can offer is greatly appreciated - thank you.
  11. aha... line-height:0;Why do people still use IE6?????????????
  12. That sounds like it would work, but it doesn't.I like the idea of using an image, but it creates an unwanted break for everything below.There has to be some way to get this to work...
  13. I have a div class set up like so: .footerTopGreenBar {background-color:#556c1a; width:100%; height:1px;} However in IE6, it shows this:Obviously not 1 pixel tall. I change the CSS to 10px and it stays the same height in my browser. Has anyone noticed this before and can possibly provide a solution?
  14. Ok, I am working towards a solution, and found that the display:block needed to be removed in order to fit all of the list items on one line. However, I am having a problem on the fly-out list item. When I rollover "Payroll Features", there is about 20pixels of space underneath the background. Seen here:I can't find anything in the CSS that would cause this extra space. Here is the part in the CSS specific to the flyout menu: .navmenu960 ul li ul li a.bckgroundarrow{background-image: url('/images/960/navigation/subnav-bckgroundarrow.gif'); background-repeat:no-repeat; height:25px; width:auto; display: block; margin: 0 1px;}.navmenu960 ul li ul li a.bckgroundarrow:hover{background-position: 0 -30px; height:25px; color:#88ac2e; width:auto;} :)
  15. Hi, I have a nav menu which looks like this on IE7, IE8 and Firefox 3.5:The nav menu is a simple unordered list, styled with CSS.However, in IE6 the nav menu looks very distorted. The first list item is on its own line, and the rest of the list items break onto a new line. See below:When I rollover a list item, the rollover state extends like 800 pixels, like this:Only two of the list items have a drop-down list as well, the first ("Payroll") and last ("About Us") items. Here's what I see when I rollover Payroll:Here is the XHTML: <div class="topnav_bckground"><div class="container_12"><div class="grid_12"><div align="center"><div id="navmenu" class="navmenu960"><ul id="menunav"><li><a href="/product/payroll/" title="Payroll" class="payroll" ><strong>Payroll</strong></a> <ul> <li class="top"><div class="navpaddingtop"><a href="/product/payroll/" title="Online" >Online Payroll Advantage</a></div></li> <li><a href="#" class="bckgroundarrow" title="Payroll Features" ><div class="navpadding">Payroll Features</div></a> <ul> <li class="top"><div class="flyoutpaddingtop"><a href="#" title="Accounting Integration" >Accounting Integration</a></div></li> <li><a href="/product/payroll/1-clickpayroll.asp" class="bckground" title="Technology" ><div class="flyoutpadding">Technology</div></a></li> <li><a href="/product/payroll/mobile-applications.asp" class="bckground" title="iPhone/Mobile Apps" ><div class="flyoutpadding">iPhone/Mobile Apps</div></a></li> <li class="bottom"><div class="flyoutpaddingbottom"><a href="/product/payroll/what-you-get.asp" title="All Our Features" >View All Our Features</a></div></li> </ul> </li> <li><a href="/product/payroll/cost-of-payroll.asp" class="bckground" title="Payroll Pricing" ><div class="navpadding">Payroll Pricing</div></a></li> <li><a href="/product/payroll/payroll-services.asp" class="bckground" title="Payroll Services" ><div class="navpadding">Compare Payroll Services</div></a></li> <li><a href="/guidedtour/" class="bckground" title="Guided Tour" ><div class="navpadding">Guided Tour</div></a></li> <li class="bottom"><div class="navpaddingbottom"><a href="/enroll/" title="New Payroll Enrollment" >New Payroll Enrollment</a></div></li> </ul></li><li><a href="/product/" title="Products & Services" ><strong>Products & Services</strong></a></li><li><a href="/accountant_access.asp" title="Accountant Center" ><strong>Accountant Center</strong></a></li><li><a href="/spsite/resources/" title="Small Business Resources" ><strong>Small Business Resources</strong></a></li><li><a href="/scorecard/" title="Scorecard" ><strong>Scorecard</strong></a></li><li class="aboutus"><a href="/spsite/company/" title="About Us" class="aboutus"><strong>About Us</strong></a> <ul> <li class="top"><div class="navpaddingtop"><a href="/spsite/company/meet-the-team.asp" title="Meet Our Team">Meet Our Team</a></div></li> <li><a href="/spsite/press/" title="Media Center" class="bckground"><div class="navpadding">Media Center</div></a></li> <li><a href="/businesspartners/" title="Strategic Partners" class="bckground"><div class="navpadding">Strategic Partners</div></a></li> <li><a href="/SecurityCenter/BcrhWare/" title="Security and Privacy" class="bckground"><div class="navpadding">Security and Privacy</div></a></li> <li class="bottom"><div class="navpaddingbottom"><a href="/contactus/" title="Contact Us" >Contact Us</a></div></li> </ul></li></ul></div></div></div></div></div> And here is the CSS: .topnav_bckground {background-color: #88ac2e; height:28px; width:100%;}.container_12 {margin-left:auto;margin-right:auto;width:960px;}.grid_12 {display:inline;float:left;margin-left:10px;margin-right:10px}.container_12 .grid_12 {width:940px}.center {text-align:center;}#navmenu {margin-right:-30px; margin-left:-30px; background-color: #88ac2e; height: 28px;}.navmenu960 ul {margin: 0; padding: 0; list-style-type: none; font-size: 14px; font-family: Arial;}.navmenu960 ul li {display: inline; float: left; text-align: left; font-size: 14px; color:#ffffff;}.navmenu960 ul li.aboutus {padding-left:5px; margin-right:-40px;}.navmenu960 ul li a {display: block; color: white; padding: 2px 20px 0px; font-size: 15px; text-decoration: none;}.navmenu960 ul li a.payroll {display: block; background: #88ac2e; color: white; padding: 2px 15px 0px 25px; font-size: 15px; text-decoration: none;}.navmenu960 ul li a.aboutus {display: block; background: #88ac2e; color: white; padding: 2px 18px 0px 18px; font-size: 15px; text-decoration: none;}ul#menunav li {position:relative; z-index:100;}.topnav_bckground {background-color: #88ac2e; height:28px; width:100%;}/*IE6 hack to get sub menu links to behave correctly*/* html .navmenu960 ul li a {display: inline-block;}/*tab link background during hover state*/.navmenu960 ul li a:hover {background: #ffffff; height: 24px; color: #88ac2e; display: block; border: solid 1px #ccc; margin-right:-2px;}.navmenu960 ul li ul {position: absolute; left: 0; display: block; visibility: hidden; padding-left: 0px; padding-top: 2px;}.navmenu960 ul li ul li {display: list-item; float: none;}/*width of sub menus*/.navmenu960 ul li ul li a {font: normal 13px Arial; font-weight:bold; width: auto; margin: 0; display:block;} .navmenu960 ul li ul li ul {position: absolute; left: 0; display: block; visibility: hidden; padding-left:0px; padding-top: 0px;}/*width of sub menus*/.navmenu960 ul li ul li a.payroll {font: bold 13px Arial; width: 220px; 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;} /*sub menus hover style*/.navmenu960 ul li ul li a:hover {color: #88ac2e; height: auto; border: solid 0px #ccc;}/*sub menus hover style*/.navmenu960 ul li ul li ul li a:hover {color: #88ac2e; height:auto; border: solid 0px #ccc;}/* Top Level */.navmenu960 ul li ul li.top {background-image: url('/images/960/navigation/main-top1.gif'); background-repeat:no-repeat; height:45px; font-size:13px; font-weight:bold; display:block; width:251px; margin: 0 1px;}.navmenu960 ul li ul li.top a {display: block; margin: 0 1px; width: auto;}.navmenu960 ul li ul li.top:hover{background-position: 0 -45px; width:251px; color:#88ac2e; display:block; height:45px;}.navmenu960 ul li ul li.top:hover a{color:#88ac2e;}.navpaddingtop {padding-top:17px;}/* Middle Level */.navmenu960 ul li ul li a.bckground {background-image: url('/images/960/navigation/subnav-bckground.gif'); background-repeat:no-repeat; height:25px; width:auto; display: block; margin: 0 1px; }.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/960/navigation/subnav-bckgroundarrow.gif'); background-repeat:no-repeat; height:25px; width:auto; display: block; margin: 0 1px;}.navmenu960 ul li ul li a.bckgroundarrow:hover{background-position: 0 -30px; height:25px; color:#88ac2e; width:auto;}.navpadding {padding-top:3px;}/* Bottom Level */.navmenu960 ul li ul li.bottom {background: url('/images/960/navigation/main-bot1.gif') no-repeat 0 0; font-weight:bold; font-family:Arial; font-size:13px; height:34px; display:block; width:251px; margin-left:1px;}.navmenu960 ul li ul li.bottom a {display: block; margin: 0 1px; width: auto;}.navmenu960 ul li ul li.bottom:hover{background-position: 0 -34px; color: #88ac2e; width:251px;}.navmenu960 ul li ul li.bottom:hover a{color:#88ac2e;}.navpaddingbottom {padding-top:5px;}/* Second Level Top */.navmenu960 ul li ul li ul li.top {background-image: url('/images/960/navigation/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;}.flyoutpaddingtop {padding-top:5px;}/* Second Level Middle */.navmenu960 ul li ul li ul li a.bckground {background-image: url('/images/960/navigation/subsubback.gif'); background-repeat:no-repeat; height:25px; width:225px; margin-left:-1px;}.navmenu960 ul li ul li ul li a.bckground:hover{background-position: 0 -30px; color:#88ac2e; width:225px;}.flyoutpadding {padding-left:7px; padding-top:3px;}/* Second Level Bottom */.navmenu960 ul li ul li ul li.bottom {background-image: url('/images/960/navigation/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;} Any help that you can offer is greatly appreciated, thank you for your help.
  16. I am using a 960 grid system and have a 960px-wide image that I'm using as a "header" for my page. Instead of plopping the entire image on the page, I'd like to break it up into three pieces so I can link each piece individually. Piece 1 is 310px, piece 2 is 400px, and piece 3 is 250px, totalling 960px.My problem is that when I code each image on the page, like:<img src="1"><img src="2"><img src="3">the third image breaks onto a new line, while the first and second images have no space between them and align correctly.When I plop the entire 960px image onto the page, it fits perfectly.So what is causing the third image to break onto a new line? The single image that fits perfectly is 960px, and these three images total 960px. I don't understand why they can't all fit on one line.Thank you to anyone who can help.
  17. Hi I have created a box in Photoshop, I've cut the top and bottom images and a 2px tall image as the background. I have an image inside the box that floats left with text on the right. It seems that once the text stops, the background image does as well. In IE it is fine, in FF I see this:Here is my XHTML: <img src="/images/960/global/grid8_stageboxtop.gif" style="margin-bottom:-4px;" /> <div class="grid8_stagebox"> <div class="grid8_stagebox-copy"> <h3 title="On-Boarding Checklists">On-Boarding Checklists</h3> <p>We provide general forms and checklists for on-boarding new clients or clients' employees quickly and easily.</p> <img src="/images/960/accountant-center/ac_rc-onboardchecklist.gif" style="float:left;" /> <p><a href="#">Company Setup Guide</a> - Information to help you quickly set up a new client.</p> <p><a href="#">Employee Setup Guide</a> - A quick reference guide that helps you add new employees to your clients' payrolls.</p> <p><a href="#">On-Boarding Guide</a> - A valuable checklist for a smooth enrollment.</p> </div> </div> <img src="/images/960/global/grid8_stageboxbot.gif" /> And the corresponding CSS: .grid8_stagebox {background-image: url('/images/960/global/grid8_stageboxbckgd.gif'); background-repeat: repeat-y; width:630px;}.grid8_stagebox-copy {padding-left:40px; width:530px;} Can someone explain why the background image breaks? Thank you in advance.
  18. I am having an issue with floating an image to the left in FireFox. Here is how it looks in IE:Image floats to left while text is on right. However in FireFox the text is moved beneath the image, like this:Here is my XHTML: <div class="roundedStageBox"> <div class="roundedStageBoxImage"> <img src="/images/stage-sales-tools.gif" /> </div> <p style="width:200px;">Proven tips and suggestions to guide you in your payroll conversations.</p> </div> And the CSS: .roundedStageBoxImage {float:left; width:213px;}.roundedStageBox {background-image: url('/images/static_RoundedBox.gif'); background-repeat:no-repeat; width:470px; height:389px; padding:34px 0 0 17px;} Is there an explanation for this? I read somewhere that you have to have a width declared when floating an element, which is why I have the width of the picture (213px) delcared with the float.thank you in advance to anyone willing to explain.
  19. Thanks, this code worked. I wouldn't have thought of using <span>... thanks a lot for your help.
  20. Hi, I have a simple unordered list with my own image for the bullets. In IE, it looks like this:But in FF, it looks distorted:My CSS is very simple: ul.silverArrow {list-style-image: url('/images/960/global/silverListArrow.gif'); vertical-align:top; line-height:17px;}ul.silverArrow li {margin-bottom:20px; vertical-align:top;} What is the problem here?
  21. yea that's a cool script. My site strictly uses jQuery so this isn't an option, but thanks for submitting your link,
  22. I agree! Thank you for your help
  23. so like this?#inputwrap input[type=select] {border:0px;}
  24. I don't understand that code... like #inputwrap {input-type:select;}? That doesn't exist...
×
×
  • Create New...