[SOLVED] Purple outline around image link

[yellowepi]

      I have a purple outline or border, not sure which that I can not get rid of. I don't want any border or anything around the image.

 

      The image is a link with a rollover(javascript), I am not comfortable with javascript, but it does not seem to be the problem. It is only when I add the <a href> tag that it occurs. Heres my css, specifically .button. I posted all of them because I cant find the problem.

 

 

.sidebar	{
	position: absolute;
	width: 151px;
	height: 100%;
	top: 196px;
	bottom: 0px;
	left: 0px;
	background-color: #87c77d;
	z-index: 8;
	}
.topbar		{
	position: absolute;
	height: 200px;
	width: 100%;
	left: 0px;
	right: 0px;
	top: 0px;
	background-image: url('graphics/87c77dgradient.jpg');
	repeat: x;
	z-index: 3;
	}
.logotxt	{
	position: absolute;
	left: 200px;
	top: 0px;
	height: 200px;
	width: 400px;
	z-index: 8;
	background-image: url('graphics/everydayedentext.png');
	}
.logocontainer	{
	position: absolute;
	left: 15px;
	top: 15px;
	height: 150px;
	width: 195px;
	z-index: 4;
	background-image: url('graphics/everydayedenlogoshadow.png');
	}
.button		{
	display: block;
	width: 150px;
	height: 40px;
	z-index: 9;
	color: white;
	}
.topright	{
	height: 50px;
	width: 50px;
	position: absolute;
	right: 0px;
	top: 0px;
	background-image: url('graphics/topright.png');
	z-index: 9;
	}
.topleft	{
	height: 50px;
	width: 50px;
	position: absolute;
	left: 0px;
	top: 0px;
	background-image: url('graphics/topleft.png');
	z-index: 9;
	}
.bottomrightbanner
	{
	height: 50px;
	width: 50px;
	position: absolute;
	right: 0px;
	top: 150px;
	background-image: url('graphics/bottomright.png');
	z-index: 9;
	}
.leftcornerbody
	{
	height: 50px;
	width: 50px;
	position: absolute;
	left: 151px;
	top: 200px;
	background-image: url('graphics/leftcornerbody.png');
	z-index: 9;}
.bkgrnd		{
	height: 500px;
	width: 500px;
	z-index: 2;
	top: 130px;
	left: 75px;
	position: absolute;
	background-image: url('graphics/TinyTulipPoplarLeaf.png');
	}
.bkgrnd2	{
	height: 500px;
	width: 500px;
	z-index: 1;
	top: 250px;
	right: 2%;
	position: absolute;
	background-image: url('graphics/TinyTulipPoplarLeaf4.png');
	}
.bkgrnd3	{
	height: 500px;
	width: 500px;
	z-index: 1;
	top: 100px;
	left: 400px;
	position: absolute;
	background-image: url('graphics/TinyTulipPoplarLeaf3.png');
	}
.textabout	{
	position: absolute;
	width: 75%;
	min-width: 75px;
	height: 300px;
	top: 215px;
	left: 160px;
	color:  blue;
	z-index: 8;
	}

 

Heres the code for the <a href>

 

<div class="sidebar">
		<br />
		<a href="index.php" 
	onmouseover="document.button.src=buttonBottom.src"
	onmouseout="document.button.src=buttonTop.src"><img src="graphics/buttontophome.png" name="button"></a></div>

[yellowepi]

I just checked it in safari and it only reders this way in camino/ff. It renders correctly in safari.

[AndyB]

img { border:none;}

[yellowepi]

I had tried putting it in the html originally so i didn't think that was what it was, now I feel stupid.

 

it worked--thanks