Background Image Issue with Padding
hello,
i having issue padding effecting background image. have li element class having left padding of 12. background image not show on left 12 pixels padding is. thought margin effected background image. give me insight on why 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 , 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 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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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 {
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;
}
it because background image on <a> tag (specifically in .leftnavbuyhome a:hover css class) not <li>
with padding on <li> <a> can't "start" until after padding. since <a> tag starts after padding, background.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment