Cant Get Rid Of My Purple Box Outline.... Even With A:link Etc Border 0

[Dareus]

Heyz,Well i've checked and tried but not sure why i still see a purple border. I changed the visitor, link, and hover to border 0.I'll give you some code , if you can help on this it would be great. it is on any page at Concept MontrealI tried adding background black, all borders in a few spots, so if you see that in there, thats why.

<div class="mainbody"><ul>	<li><a href="index.html"><img src="pics/homeblue.jpg" width="99" height="54" alt="home link" /></a></li>	<li><a href="portfolio.html"><img src="pics/portfolioblue.jpg" width="119" height="54" alt="portfolio link" /></a></li>	<li><a href="seo.html"><img src="pics/seoblue.jpg" width="76" height="54" alt="seo link" /></a></li>	<li><a href="fees.html"><img src="pics/feesblue.jpg" width="76" height="54" alt="fee link" /></a></li>	<li><a href="faq.html"><img src="pics/faqblue.jpg" width="76" height="54" alt="faq link" /></a></li>	<li><a href="contact.html"><img src="pics/contactblue.jpg" width="116" height="54" alt="contact link" /></a></li></ul>

My CSS

@charset "utf-8";.body {	background-color: #C5C5C5;	position: relative;	background-image: url(sitetest2/images/Template.jpg);	background-repeat: no-repeat;	background-position: center top;	z-index: 2;}.mainbody {	height: auto;	width: 750px;	margin:auto;	position: relative;	top: 100px;	color: #CCC;	background-color: #000;	z-index: 1;}.mainbody ul {	list-style-type: none;	color: #FFF;}.mainbody ul li {	display: inline;	font-family: Georgia, "Times New Roman", Times, serif;	padding-right: 9px;	border-top-width: 0px;	border-right-width: 0px;	border-bottom-width: 0px;	border-left-width: 0px;}.mainbody ul li a {	border-top-width: 0px;	border-right-width: 0px;	border-bottom-width: 0px;	border-left-width: 0px;	border-top-color: #000;	border-right-color: #000;	border-bottom-color: #000;	border-left-color: #000;}.mainbody ul li a:link {	border-top-width: 0px;	border-right-width: 0px;	border-bottom-width: 0px;	border-left-width: 0px;	border-top-color: #000;	border-right-color: #000;	border-bottom-color: #000;	border-left-color: #000;}.mainbody ul li a:visited {	border-top-width: 0px;	border-right-width: 0px;	border-bottom-width: 0px;	border-left-width: 0px;	border-top-color: #000;	border-right-color: #000;	border-bottom-color: #000;	border-left-color: #000;}

[Ajmal]

Dear,For removing img link border you must add the border property in image tag. Your correct code is :

<div class="mainbody"><ul>    <li><a href="index.html"><img src="pics/homeblue.jpg" width="99" height="54" alt="home link" border="0"/></a></li>    <li><a href="portfolio.html"><img src="pics/portfolioblue.jpg" width="119" height="54" alt="portfolio link" border="0"/></a></li>    <li><a href="seo.html"><img src="pics/seoblue.jpg" width="76" height="54" alt="seo link" border="0"/></a></li>    <li><a href="fees.html"><img src="pics/feesblue.jpg" width="76" height="54" alt="fee link" border="0"/></a></li>    <li><a href="faq.html"><img src="pics/faqblue.jpg" width="76" height="54" alt="faq link" border="0"/></a></li>    <li><a href="contact.html"><img src="pics/contactblue.jpg" width="116" height="54" alt="contact link" border="0"/></a></li></ul></div>

Wish you all the best.With Regards,Ajmal

[Ingolme]

No need to add unnecessary attributes.The way to remove borders around images is by applying the style to the image and not the link.

a img { border: 0; }

[Ajmal]

Thanks Ingolme.

[Dareus]

Thanks very much, helps alot. Will try it now :)Worked, I thought by adding border:0 to the li attribute it would take out the border, i was in the wrong spot.\Thanks very much.