...

View Full Version : CSS Sprite Issue



territindle
07-25-2012, 10:16 PM
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


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


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

territindle
07-26-2012, 02:52 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum