Images adding extra color border!?!?

[suess0r]

Hi,

 

OK so my images are adding a blue border around them and i've been trying to resolve this now for a while and still can't figure it out. Can anyone please help?? The color that it's bordering is: #4C9ACA, very greatfull, Thanks!

 

Here's my CSS

 

html {min-height: 100%;}

 

 

 

* {

margin: 0;

padding: 0;

}

 

 

 

a {color: #4c9aca;}

 

a:hover {color: #C60;}

 

 

 

body {

background: #000 url(img2/bg.jpg) repeat-x left bottom;

color: #444;

font: normal 62.5% Tahoma,sans-serif;

}

 

.img {

padding: 0 8px 8px 0;

float: left;

}

 

.img2 {

padding: 0 0 3px 3px;

float: right;

}

 

 

 

p,code,ul {padding-bottom: 1.2em;}

 

 

 

li {list-style: none;}

 

 

 

h1 {

font: normal 1.8em Tahoma,sans-serif;

margin-bottom: 4px;

 

}

 

 

 

code {

background: #FFF;

border: 1px solid #EEE;

border-left: 6px solid #C1CAD3;

color: #666;

display: block;

font: normal 1em Tahoma,sans-serif;

line-height: 1.6em;

margin-bottom: 12px;

padding: 8px 10px;

white-space: pre;

}

 

 

blockquote {

background: url(img2/quote.gif) no-repeat;

display: block;

font-weight: bold;

padding-left: 28px;

}

 

 

 

h1,h2,h3 {padding-top: 6px;}

 

 

 

/* misc */

 

.clearer {clear: both;}

 

 

 

.left {float: left;}

 

 

 

.right {float: right;}

 

 

 

/* structure */

 

.container {

background: #FFF;

font-size: 1.2em;

margin: 0 auto;

padding: 0 10px 10px;

width: 780px;

}

 

 

 

/* header */

 

.top {

background: url(img2/topper.gif) repeat-x;

padding: 50px 10px 0;

}

 

 

 

/* title */

 

.header {

background: #FFF;

font-size: 1.2em;

height: 150px;

margin: 0 auto;

padding: 10px 10px 5px;

width: 780px;

}

 

.header .left, .header .right {

background: #A4A4A0;

color: #FFF;

height: 150px;

}

 

.header .left {

background: #B3C2C7 url(img2/header1.gif) no-repeat;

font: normal 2.8em "Trebuchet MS",sans-serif;

line-height: 150px;

text-align: center;

width: 564px;

}

 

.header .right {

overflow: auto;

background:#4592c0;

width: 212px;

}

 

.header .right p,.header .right h2 {padding: 0 16px;}

 

.header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;}

 

 

 

/* navigation */

 

.navigation {

background: #D9E1E5 url(img2/nav.gif);

border: 1px solid #DFEEF7;

border-color: #DFEEF7 #CFDEE7;

height: 41px;

}

 

.navigation a {

background: #D9E1E5 url(img2/nav.gif);

border-right: 3px solid #DFEEF7;

color: #fff;

display: block;

float: left;

font: bold 1.1em sans-serif;

line-height: 41px;

padding: 0px 20px;

text-decoration: none;

}

 

 

.navigation a:hover {background-position: left bottom; color: #5A5A43;}

 

 

 

/* main */

 

.main {

border-top: 4px solid #FFF;

background: url(img2/bgmain.gif) repeat-y;

}

 

 

 

/* sub navigation */

 

.sidenav {

float: right;

width: 210px;

background:#dbe9d5

}

 

.sidenav h2 {

color: #5A5A43;

font-size: 1em;

line-height: 30px;

margin: 0;

padding-left: 12px;

}

 

.sidenav ul {

padding: 0;

border-top: 1px solid #EAEADA;

}

 

.sidenav li {border-bottom: 1px solid #EAEADA;}

 

.sidenav li a {

font-size: 1.1em;

color: #554;

display: block;

padding: 8px 0 8px 5%;

text-decoration: none;

width: 95%;

}

 

.sidenav li a:hover {

background: #ebf6e6;

color: #654;

}

 

.sidenav .image {

width:210px;

}

.image {

width:100%;

}

 

/* content */

 

.content {

float: left;

margin: 10px 0;

padding: 0 16px;

width: 531px;

}

 

.content .descr {

color: #664;

font-size: 0.9em;

margin-bottom: 6px;

}

 

.content li {

list-style: url(img2/li.gif);

margin-left: 18px;

}

 

.content p {font-family: "Lucida Sans Unicode",sans-serif;}

 

.left { float: left;  }

.left_articles {

margin: 0 20px 15px 10px;

padding: 10px 0 0 0;

text-align: justify;

border-bottom: 1px dotted #ccc;

color: #000;

background: #fff;

}

 

.calendar { height: 50px; float: left; background: #fff url(images/calendar.gif) no-repeat; width: 50px; padding: 5px 0 0 9px;  color: #808080;}

.calendar p { padding: 0; margin: 0; }

.description { padding: 0 0 2px 0; margin: 0 10px 5px 0; border-bottom: 1px dotted #ccc; }

 

 

/* bottom thirds */

.thirds { float: left; width: 160px; background: #eee; margin: 0 12px 0 0; color: #5d5d5d; }

.smallboxtop { height: 14px; background: #fff url(img2/smallboxtop.gif) no-repeat; color: #000; }

.smallbox { background: #fff url(img2/smallbox.gif) no-repeat bottom left; color: #444; padding: 1px 10px 10px 10px;  }

.smallbox p { padding: 0; margin: 0; }

/* footer */

 

.footer {

background: url(img2/bgfooter.gif) repeat-x;

color: #FFF;

font: bold 1em sans-serif;

line-height: 39px;

text-align: center;

}

 

.footer a,.footer a:hover {color: #FFF;}

 

 

[AndyB]

add border:0; to the image declarations

[Zeon]

the border around the image appears when it's placed inside an a tag, to remove it:

a img{
   border:none;
}