Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Sprite Issue

    I added a new button at the top but it just shows a big blank space. I can't figure out why. Please help!

    Here's a link to the draft page I'm working on:
    http://ago.mo.gov/index[dot]php[dot]2012-06-15

    CSS
    Code:
    ul#actionButtons {}
    ul#actionButtons li a {display:block; width:215px; height:80px; text-indent:-5000em; margin-bottom:0px;}
    
    ul#actionButtons li#lcdsettlement{background: transparent url(/images/action_buttons/07252012Sprite.png); background-repeat: no-repeat; background-position:  0px 0px; height: 66px; width: 100%;}
    ul#actionButtons li#mortgageSettlement{background: transparent url(/images/action_buttons/07252012Sprite.png); background-repeat: no-repeat; background-position:  0px -70px; height: 66px; width: 100%;}
    ul#actionButtons li#stops a {background: transparent url(/images/action_buttons/07252012Sprite.png); background-repeat: no-repeat; background-position:  0px -141px; height: -141px; width: 100%;}
    ul#actionButtons li#reportWater a {background: transparent url(/images/action_buttons/07252012Sprite.png); background-repeat:  no-repeat; background-position:  0px -220px; height: 67px; width: 100%; }
    /*ul#actionButtons li#mortgageFraud a {background: transparent url(/images/action_buttons/Indiv Action Buttons/02092012Sprite.png) no-repeat; background-position:  -5px -222px; height: 71px; width: 196px;}*/
    ul#actionButtons li#consumerComplaint a {background: transparent url(/images/action_buttons/07252012Sprite.png); background-repeat:  no-repeat; background-position:  0px -287px; height: 70px; width: 100%; }
    ul#actionButtons li#caninecruelty a{background: transparent url(/images/action_buttons/07252012Sprite.png); background-repeat:  no-repeat; background-position:  0px -362px; height: 71px; width: 100%;}
    ul#actionButtons li#noCall a {background: transparent url(/images/action_buttons/07252012Sprite.png); background-repeat:  no-repeat; background-position:  0px -438px; height: 69px; width: 100%;}
    ul#actionButtons li#medicalFraud a {background: transparent url(/images/action_buttons/07252012Sprite.png); background-repeat:  no-repeat; background-position:  0px -512px; height: 70px; width: 100%;}
    ul#actionButtons li#alienWorkers a {background: transparent url(/images/action_buttons/07252012Sprite.png); background-repeat:  no-repeat; background-position:  0px -587px; height: 70px; width: 100%;}
    ul#actionButtons li#knowMO a {background: transparent url(/images/action_buttons/07252012Sprite.png); background-repeat:  no-repeat; background-position:  0px -662px; height: 71px; width: 100%;}
    ul#actionButtons li#checkCharity a {background: transparent url(/images/action_buttons/07252012Sprite.png); background-repeat:  no-repeat; background-position:  0px -738px; height: 70px; width: 100%;}
    HTML
    Code:
    <div class='content' id='action_center'>
    					<h2 class="section_head">Action Center</h2>
    					<ul id="actionButtons">
    						<li id="lcd settlement"><a href="http://www.ago.mo.gov/lcd/lcdsettlement.php" title="LCD settlement">LCD Settlement</a></li>
    						<li id="mortgageSettlement"><a href="https://www.consumer.ago.mo.gov/mortgageSettlement.php" title="Mortgage Settlement Information Form">Mortgage Settlement Information Form</a></li>
    						<li id="stops"><a href="/VehicleStops/" title="View the 2011 Vehicle Stops Report">View the 2011 Vehicle Stops Report</a></li>
    
    						<li id="reportWater"><a href="/forms/clean_water_complaints.pdf" title="Report Clean Water Complaints">Report Clean Water Complaints</a></li>
    						<!--<li id="mortgageFraud"><a href="/report_mortgage_fraud.htm" title="Report mortgage fraud">Report Mortgage Fraud</a></li>-->
    			
    						<!--<li id="consumerComplaint"><a href="/consumercomplaint.htm" title="File a consumer complaint">File a consumer complaint</a></li>-->
    						<li id="caninecruelty"><a href="http://ago.mo.gov/CanineCruelty/" title="File a Canine Cruelty Complaint">File a canine cruelty complaint</a></li>
    						<li id="noCall"><a href="/nocalllaw/nocalllaw.htm" title="Register Your Number on the Missouri No Call List">Register your number on the Missouri No Call List</a></li>
    						<li id="medicalFraud"><a href="/divisions/medicaid-fraud-control-unit-faqs.htm" title="The Medicaid Fraud Unit">Report Medicaid Fraud</a></li>
    						<li id="alienWorkers"><a href="/faqs/unauthorized-alien-workers.htm" title="File a complaint if a business employs unauthorized workers">Report unauthorized alien workers</a></li>
    						<li id="knowMO"><a href="http://www.consumer.ago.mo.gov/Know_MO/" title="Search the Know MO database">Look Up Consumer Complaints</a></li>
    						<li id="checkCharity"><a href="/checkacharity/" title="Search the Check A Charity database">Search the Check A Charity database</a></li>
    						
    
    					</ul>
                    </div>

  • #2
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I solved it! (WHEW!)

    I'm posting the solution because I'm hoping it will help someone in the future.

    My li id was different between my css and html code.

    css - li id = lcdsettlement
    html - li id = lcd settlement


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •