3 Replies Latest reply: May 7, 2013 11:36 AM by Jon Fritz II RSS

    Background Image Issue with Padding

    kcelsi Community Member

      Hello,

      I am having an issue with padding effecting my background image.  I have an li element with a class having a left padding of 12.  The background image does not show on the left 12 pixels where the padding is.  I thought only margin effected the background image.  Could you give me some insight on why this is happening?  Thank you!

       

      URL:

      http://www.littlechisel.com/clients/GuaranteedRate/Test.html

       

      Code:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <!-- TemplateBeginEditable name="doctitle" -->

      <title>Test</title>

      <!-- TemplateEndEditable -->

      <!-- TemplateBeginEditable name="head" -->

      <!-- TemplateEndEditable -->

      <link href="css/GRateStyles.css" rel="stylesheet" type="text/css" />

      </head>

       

       

      <body>

      <div id="wrapper">

        <div id="header">

          <div id="headerBox">

            <div id="logo"><a href="Templates/index.html"><img src="images/Logo.jpg" width="200" height="129" alt="Logo" /></a>

            </div>

            <div id="headerRight">

              <div class="headerRightContactText" id="headerRightContact"><a href="Templates/Contact.html">Contact</a> NewJerseyRates.com<br />

              <span class="headerRightContactNumber">732-784-2797</span>

              </div>

              <div id="headerRightTagline">Customized, Automated Rate Quotes  <span class="redText">Accurate and Up-to-the-Minute</span>

              </div>

            </div>

          </div>

       

                <div id="navBar">

      <ul class="navBar">

      <li class="home"><a href="Templates/index.html">Home</a></li>

      <li class="faq"><a href="Templates/FAQ.html">FAQ</a></li>

      <li class="mortCalc"><a href="Templates/Mortgage-Calculators.html">Mortgage Calculators</a></li>

      <li class="aboutCredit"><a href="Templates/About-Credit.html">About Credit</a></li>

      <li class="loanProg"><a href="Templates/Loan-Programs.html">Loan Programs</a></li>

      <li class="survey"><a href="Templates/Survey.html">Survey</a></li>

      <li class="homeInspec"><a href="Templates/Home-Inspection-Kit.html">Home Inspection Kit</a></li>

      <li class="about"><a href="Templates/About.html">About NewJerseyRates.com</a></li>

      <li class="partnerLinks"><a href="Templates/Partner-Links.html">Partner Links</a></li>

      <li class="glossary"><a href="Templates/Glossary.html">Glossary</a></li>

      </ul>

                </div>    

         </div>  

      <div id="content">

      <div id="leftNav">

        <ul class="leftNav">

          <li class="leftNavBuyHome"><a href="https://www.guaranteedrate.com/buying-home">Buying a Home<img class="navArrowHome" src="images/navArrow.gif" alt="Nav Arrow" width="11" height="11"/></a></li></ul>

        </div>

      </div>

      </div>

      </body>

      </html>

       

      CSS:

      @charset "utf-8";

       

       

       

       

       

       

       

       

       

       

      a {

                color: #2A97E2;

                text-decoration:none

      }

      a:hover{text-decoration: underline;

      }

       

       

      .redText {

                color: #EE2E24;

      }

       

       

      #wrapper {

                width: 1156px;

                margin-right: auto;

                margin-left: auto;

      }

      #header {

                width: 1156px;

      }

      #headerBox {

                margin-top: 12px;

                height: 129px;

                width: 1156px;

                border-bottom-style: solid;

                border-bottom-color: #EE2E24;

                border-bottom-width: 2px;

                margin-bottom: 3px;

      }

       

       

       

       

      #logo {

                float: left;

                height: 129px;

                width: 200px;

      }

      #headerRight {

                width: 956px;

                height: 129px;

                margin-left: 200px;

      }

      #headerRightContact {

                width: 942px;

                margin-right: 14px;

                height: 65px;

      }

       

       

       

       

       

       

      .headerRightContactText {

                font-family: Arial, Helvetica, sans-serif;

                font-size: 14px;

                color: #686868;

                text-align: right;

                padding-top: 28px;

      }

      .headerRightContactNumber {

                font-family: "Arial Black", Gadget, sans-serif;

                font-size: 18px;

                color: #0F4265;

                font-style: normal;

                font-weight: normal;

      }

      #headerRightTagline {

                font-family: "Arial Black", Gadget, sans-serif;

                font-size: 20px;

                color: #0F4265;

                text-align: right;

                height: 31px;

                width: 942px;

                margin-right: 14px;

                padding-top: 5px;

                vertical-align: bottom;

      }

      #navBar {

                height: 36px;

                width: 1156px;

                margin-bottom: 12px;

      }

      .navBar {

                margin: 0;

                padding: 0;

                list-style: none;

      }

      .navBar li {

                padding:0;

                margin:0;

                height:36px;

                text-align:center;

                list-style: none;

      }

      .navBar li a, navBar li a:visited {

                display:block;

                text-decoration: none;

                height:36px;

      }

      .home {

                background-image: url(../images/NavGradient.jpg);

                background-repeat: repeat-x;

                width: 78px;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                line-height: 40px;

                color: #686868;

      }

      .home a {

                color:#686868

      }

      .home a:hover {

                background-image: url(../images/NavGradientOn.jpg);

                background-repeat: repeat-x;

                color: #686868;

      }

      .faq {

                background-image: url(../images/NavGradient.jpg);

                background-repeat: repeat-x;

                width: 56px;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                line-height: 40px;

                color: #686868;

      }

      .faq a {

                color:#686868

      }

      .faq a:hover {

                background-image: url(../images/NavGradientOn.jpg);

                background-repeat: repeat-x;

                color: #686868;

      }

      .mortCalc {

                background-image: url(../images/NavGradient.jpg);

                background-repeat: repeat-x;

                width: 153px;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                line-height: 40px;

                color: #686868;

      }

      .mortCalc a {

                color:#686868

      }

      .mortCalc a:hover {

                background-image: url(../images/NavGradientOn.jpg);

                background-repeat: repeat-x;

                color: #686868;

      }

      .aboutCredit {

                background-image: url(../images/NavGradient.jpg);

                background-repeat: repeat-x;

                width: 105px;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                line-height: 40px;

                color: #686868;

      }

      .aboutCredit a {

                color:#686868

      }

      .aboutCredit a:hover {

                background-image: url(../images/NavGradientOn.jpg);

                background-repeat: repeat-x;

                color: #686868;

      }

      .loanProg {

                background-image: url(../images/NavGradient.jpg);

                background-repeat: repeat-x;

                width: 123px;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                line-height: 40px;

                color: #686868;

      }

      .loanProg a {

                color:#686868

      }

      .loanProg a:hover {

                background-image: url(../images/NavGradientOn.jpg);

                background-repeat: repeat-x;

                color: #686868;

      }

      .survey {

                background-image: url(../images/NavGradient.jpg);

                background-repeat: repeat-x;

                width: 74px;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                line-height: 40px;

                color: #686868;

      }

      .survey a {

                color:#686868

      }

      .survey a:hover {

                background-image: url(../images/NavGradientOn.jpg);

                background-repeat: repeat-x;

                color: #686868;

      }

      .homeInspec {

                background-image: url(../images/NavGradient.jpg);

                background-repeat: repeat-x;

                width: 155px;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                line-height: 40px;

                color: #686868;

      }

      .homeInspec a {

                color:#686868

      }

      .homeInspec a:hover {

                background-image: url(../images/NavGradientOn.jpg);

                background-repeat: repeat-x;

                color: #686868;

      }

      .about {

                background-image: url(../images/NavGradient.jpg);

                background-repeat: repeat-x;

                width: 201px;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                line-height: 40px;

                color: #686868;

      }

      .about a {

                color:#686868

      }

      .about a:hover {

                background-image: url(../images/NavGradientOn.jpg);

                background-repeat: repeat-x;

                color: #686868;

      }

      .partnerLinks {

                background-image: url(../images/NavGradient.jpg);

                background-repeat: repeat-x;

                width: 109px;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                line-height: 40px;

                color: #686868;

      }

      .partnerLinks a {

                color:#686868

      }

      .partnerLinks a:hover {

                background-image: url(../images/NavGradientOn.jpg);

                background-repeat: repeat-x;

                color: #686868;

      }

      .glossary {

                background-image: url(../images/NavGradient.jpg);

                background-repeat: repeat-x;

                width: 102px;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                line-height: 40px;

                color: #686868;

      }

      .glossary a {

                color:#686868

      }

      .glossary a:hover {

                background-image: url(../images/NavGradientOn.jpg);

                background-repeat: repeat-x;

                color: #686868;

      }

      .navBar li {

                float:left;

      }

      .navBar:after {

                content: ".";

                display:block;

                height:0;

                clear:both;

                visibility:hidden;

      }

      #content {

                width: 1156px;

      }

      #leftNav {

                height: 256px;

                width: 137px;

                margin-top: 23px;

      }

      .leftNav {

                list-style: none;

                margin: 0;

                padding-top: 0;

                padding-right: 0;

                padding-bottom: 0;

                padding-left: 0px;

      }

      .leftnav li {

                padding:0;

                margin:0;

                text-align:left;

                list-style: none;

      }

      .leftNav li a, leftNav li a:visited {

                display:block;

                text-decoration: none;

      }

      .leftNavBuyHome {

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                color: #333;

                height: 38px;

                width: 123px;

                text-align: left;

                line-height: 38px;

                border: 1px solid #E9E9E9;

                border-top-right-radius: 8px;

                border-top-left-radius: 8px;

                padding-top: 0px;

                padding-right: 0px;

                padding-bottom: 0px;

                padding-left: 12px;

      }

      .leftNavBuyHome a {

                color:#333

      }

      .leftNavBuyHome a:hover {

                background-repeat: repeat-x;

                background-image: url(../images/leftNavOn.jpg);

                border-top-right-radius: 8px;

                border-top-left-radius: 8px;

      }

      .navArrowHome  {

                margin-left: 21px;

      }