Skip navigation
Currently Being Moderated

Background Image Issue with Padding

May 7, 2013 10:01 AM

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;

}

 
Replies
  • Currently Being Moderated
    May 7, 2013 10:43 AM   in reply to kcelsi

    It is because the background image is on the <a> tag (specifically in the .leftNavBuyHome a:hover css class) not the <li>

     

    With the padding on the <li> the <a> can't "start" until after the padding. Since the <a> tag starts after the padding, so does its background.

     
    |
    Mark as:
  • Currently Being Moderated
    May 7, 2013 11:36 AM   in reply to kcelsi

    You should be able to put the padding on the <a> class instead of the <li> class and have it work the way you want.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points