How to get icons to appear beside a link

[capnhud]

I am trying to add an icon to first link in header on this page. But it seems that no matter how I try to position the image it keeps repeating and is distorted. Is there a tutorial on how to do this.

Css

/* ---------- ---------- ---------- reset ---------- ---------- ---------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0;}
table {border-collapse:collapse; border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
q:before,q:after {content:'';}
abbr,acronym {border:0;}

/* TINY MCE RESET */
body.mceContentBody {
text-align: left;
color: #000;
 background: #ffffff url();
}


body, html {
   background: transparent url(bkgrnd.png) repeat-x scroll 0 0;
   height:100%;

}
* html #bodywrapper {
   height:100%;
}
#bodywrapper {
   min-height:100%;
   height:auto!important;
   height:100%;
   margin: 0 auto -183px;
   width:960px;
}
#header {
   height:120px;
   margin:0 0 6px;
}
/*begin header links */
#interestlinks {
background:transparent none repeat scroll 0 0;
border:medium none;
color:#f9f9f9;
line-height:1.22em;
right:350px;
padding-top:15px;
position:absolute;
}
#interestlinks li {
display:inline;
padding:10px;
}
#interestlinks a {
color:#f9f9f9;
text-decoration:none;
border-right: 1px solid #f9f9f9;
margin:0;
padding-right:5px;
}
#interestlinks li#email {
   background-image:url(mail.png);
}
#search {

}
/*begin navigation of page */
#nav {
background:transparent url(table.png) repeat scroll 0 0;
font-family:Arial, Helvetica, Sans-serif;
font-size:13px;
font-style:normal;
font-variant:normal;
font-weight:bold;
height:145px;
line-height:1.2;
margin:0 auto;
width:960px;
}
#nav ul li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
width:120px;
}
#nav ul li a {
background:transparent url(nav_image.png) repeat-x scroll -81px 100%;
border-right:1px dotted #C2C2C2;
color:#f9f9f9;
display:block;
height:26px;
padding-top:12px;
text-align:center;
text-decoration:none;
visibility:visible;
}
#nav ul li a:hover {
background:transparent url(nav_image.png) repeat-x scroll -40px 0;
}
#nav ul, #nav ul ul li {
margin:0;
padding:0;
position:relative;
z-index:100;
}
#nav ul li ul {
height:40px;
left:-999em;
position:absolute;
top:38px;
z-index:100;
}


#nav ul li:hover ul ul, #nav ul li.sfhover ul ul {
left:-999em;
}
#nav ul li:hover ul, #nav ul li.sfhover ul, #nav ul ul li:hover ul, #nav ul ul li.sfhover ul {
left:auto;
}
#nav ul ul.subhor-1item li {
width:120px;
z-index:100;
}
#nav ul ul.subhor-2items li {
width:240px;
z-index:100;
}
#nav ul ul.subhor-3items li {
width:160px;
z-index:100;
}
#nav ul ul.subhor-4items li {
width:120px;
z-index:100;
}
#nav ul ul ul li {
clear:left;
}
#nav ul li:hover a, #nav ul li.sfhover a, #nav ul li a:hover {
background:#777777 none repeat scroll 0 0;
color:#EEEEEE;
}
#nav ul li a:hover {
background:transparent url(nav_image.png) repeat-x scroll -40px 0;
}
#nav ul li ul li a:hover {
background:transparent url(subver_bg.png) repeat scroll 0 0;
color:#FFFFFF;
}
#nav li#contact {
margin-right:-10px;
}
#nav li#contact a {
border-right:0 none;
}
/* end of navigation */
/* this begins content */
#contentwrapper {
   background: transparent none repeat scroll 0 0;
   border-bottom: 1px solid #c2c2c2;
   border-left: 1px solid #c2c2c2;
   border-right: 1px solid #c2c2c2;
   height: 100%;
   padding-bottom:0;
   margin:-68px auto 0;
   width:958px;
/*    overflow:hidden; */
}
/*main promotion content */
#promowrapper {
   height:366px;
   margin-top:-68px;
   margin-bottom:5px;
   position:relative;
   top:0;
   width:960px;
   z-index:1;
}
#promowrapper h2 {
   background:#a60000;
   font:normal 18px/1.22em Arial, Helvetica, sans-serif;
   color:#f9f9f9;
   text-align:center;
}
#promoleft {
   background: #a60000 none repeat scroll 0 0;
   height:300px;
   left: 10px;
   margin: 0 auto;
   padding:0;
   position:absolute;
   top:28px;
   width:180px;
}
#promolftcontent img {
   background-color:transparent;
   height:274px;
   padding:3px 0 0 1px;
   position: relative;
   width:179px;
}
#promomain {
   background:transparent url(headshadow.png) no-repeat scroll center top;
   height:366px;
   left:180px;
   padding-top:1px;
   position:relative;
   width:596px;
   z-index:5;
}
#simplegallery {
   margin-left:8px;
   margin-top:7px;
   position:relative;
   visibility:hidden;
}
#simplegallery .gallerydesctext {
   padding:1px 5px;
   text-align:left;
}
#promoright {
   background:#a60000 none repeat scroll 0 0;
   height: 300px;
   margin:0 auto;
   padding:0;
   position:absolute;
   right:12px;
   top:26px;
   width:180px;
}
#promorightcontent img {
   background-color:transparent;
   height:274px;
   padding:3px 1px 0 0;
   position:relative;
   width:179px;
}
/*end main promo content */
/*this begins the middle content */
#middlecontent {
   height:auto;
   margin:25px 0 0;
   padding-top:0;
   width:960px;
   vertical-align:top;
   overflow:hidden;
}
#middlecontent h3 {
   background-color:transparent;
   color: #a60000;
   font:normal 20px/1.22 Arial, Helvetica, sans-serif;
   padding-bottom:5px;
}
#middlecontent h4 {
   font:bold 14px/1.0em Verdana, Corbel, Sans-serif;
   color:#404040;
   background-color:transparent;
   padding-bottom:5px;
}
#leftmidcontent h3, #rightmidcontent h3{
   height:17px;
   }
#middlecontent p {
   text-align:left;
   padding:0;
   width:220px;
   margin:0 0 -140px;
}
#leftmidcontent {
font-family:Verdana, Corbel, sans-serif;    
color:#404040;
float:left;
font-size:11px;
margin:0 5px 0 10px;
vertical-align:top;
width:340px;
height:180px;
}
#leftmidcontent img {
   float: right;
   border:1px solid #333;
}
#leftmidcontent, #mdlmdlcontent{
   display:inline;
   }
#mdlmdlcontent  {
 background: transparent;
 border-left: 1px dotted #333;
 height: 180px;
 padding: 0 0 0 30px;
    width:190px;
   float:left;
   margin-left:5px;
}
#mdlmdlcontent img {
margin: 0 auto;
padding:10px 0;
}
#rightmidcontent {
   font-family:Verdana, Corbel, sans-serif;    
   color:#404040;
   float:right;
   font-size:11px;
   border-left:1px dotted #333;
   vertical-align:top;
   width:340px;
   height:180px;
   padding:0 10px;
}
#rightmidcontent img {
   float: right;
   border:1px solid #333;
}
/*this ends middle content */
/* this begins bottom content */
.bottomctnt {
   background: transparent;
 height: 310px;
 padding:36px 0 15px;
 width:960px;

}
.bottomctnt h4 {
   background:url(h3bkgrnd.png) repeat scroll 0 0;
   height: 26px;
   color:#f9f9f9;
   font:normal 18px/1.2em Arial, Helvetica, sans-serif;
   padding:1px 0 0 5px;
   text-align:left;

}

.bottomctnt h5 {
   background:none;
   color:#940000;
   font: 600 14px/1.2 Verdana, Corbel, sans-serif;
   padding:0;
   text-align: center;
}
.bottomctnt p {
   background:transparent;
   text-align:justify;
   font:normal 11px/1.2em Verdana, Corbel, sans-serif;
   color:#404040;
   padding: 0 10px;
   margin: 0 auto;
}

#bottomfrst {
float:left;
padding-left:10px;
width:220px;
}
#bottomfrst ul .news {
   background:transparent;
   padding:5px 6px;
   width:220px;
   font:normal 11px/1.22em Verdana, Corbel, sans-serif;
   color:#404040;
}
#bottomfrst a {
   background:none;
   color:#940000;
   text-decoration:none;
   font-weight:800;;
}
#bottomscnd {
float:left;
padding-left:20px;
width:220px;
}
#bottomscnd img {

border:1px solid #333;
padding:0;
margin:10px 4px;
}
#bottomthrd {
float:left;
padding:0 20px;
width:220px;
}
#bottomthrd img {
border:1px solid #333;
padding:0;
margin:10px 4px;
}
#bottomfrth {
float:right;
width:220px;
padding-right:10px;
}
#bottomfrth img {

border:1px solid #333;
padding:0;
margin:10px 4px;
}
/* things below are for the footer */
#push {
   height:183px;
}
#footer {
   background: transparent url(footer.png) repeat scroll 0 100%;
   height:183px;
   width:100%;
}
#ftrcontent {
   background:transparent;
   font:normal 12px/1.2em Arial, Helvetica, sans-serif;
}
#ftrnav {
background:transparent none repeat scroll 0 0;
border:medium none;
color:#f9f9f9;
line-height:1.22em;
right:145px;
margin-top:-31px;
padding:15px;
position:absolute;
}
#ftrnav li {
display:inline;
padding:10px;
}
#ftrnav a {
color:#f9f9f9;
text-decoration:none;
border-right: 1px solid #f9f9f9;
margin:0;
padding-right:5px;
}

#footer p {
text-align:justify;
padding: 105px 0 0 160px;
color:#f9f9f9;
}

Edited May 25, 2009 by capnhud

[shelfimage]

Add the background to the :

 

#interestlinks a {

border-right:1px solid #F9F9F9;

padding:0 5px 6px 0;

color:#F9F9F9;

text-decoration:none;

}

 

#interestlinks li#email a {

background:transparent url(mail.png) no-repeat scroll 0 0;

padding-left:34px;

}

[capnhud]

I see I did not specify the anchor part. Amazing how a simple vowel could drive you up a wall. Thank you

Edited May 25, 2009 by capnhud