Linked image properties

Question

I'm very new to all this web desgin, but I am very pleased with where I have gotten on my own. Can't figure this last bit out.
I am making a photo website, and I have thubnails of all my photos laid out on various pages, the plan is to have each thumbnail link to a larger image. My problem is when I make an image a link, I get a box grey box around my image which turns to blue on rollover (just like my text)
seen here:
http://www.bizz-101.com/portfolio/naderzad/Projects.html
I would like to remove the box/border, which I can't figure out how to do. Idealy, I'd like to have the thumbnail look faded on rollover, something similar to a 50% opacity white over the image. Is there anyway something like that can be done, or do I have to creatie rollover images for each and every thumbnail?
Also, I'm just starting working on this now, but I want to have the larger images link to one another (after clicking on a thumbnail) but because they are all differnt sizes I'm getting the links for previous/next all over the place, anyway I can set text to stay in one spot so I can just change the image and save it as a differnt page with the links in the same spot on every page.
Any feedback on my wip website is also welcome.
Thanks for the help.

Answer 1

Can anyone tell me why
a img { border: none; }
or
even more specifically: ( I have tested with both versions, same results)
a img {
border-top: 0px none;
border-right: 0px none;
border-bottom: 0px none;
border-left: 0px none;
would not be working? Would rollover images be different? they have the same 'img' tag?
I managed to get the border no not appear in my header by adding
.container .header p a img {
border-width: 0px;
border-style: none;
padding-left: 10px;
although i'm not sure if this is actually what is stopping the border from appearing as when I disable these rules in the CSS styles panel the border is still not appearing.
here is the page i'm having problems with:
http://www.simcockit.com.au/products.html
The logo's in the header are links and I have no border appearing, but if you scroll down to the pdf images the border (bottom gold) is appearing.
here is the code from my external css
@charset "utf-8";
body {
background: #fff url(../_images/dark-tech-digital-art-7922.jpg);
color: #004151;
font: 100%/1.4 "Century Gothic", "Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: justify;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {  padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, {
margin-top: 0;  padding-right: 15px;
padding-left: 10px; text-align: center;
p {
text-align:justify;
padding: 10px 0px 0px;
h4 {
text-align:center;
font-weight:normal;
a img {
border-top: 0px none;
border-right: 0px none;
border-bottom: 0px none;
border-left: 0px none;
a:link, a:visited {
color:#E67B19;
text-decoration:none;
font-weight: 600;
a:hover, a:active {
color: #E67B19;
border-bottom: 1px dashed #cb7d20;
font-weight: bold;
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 1050px;
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
.header {
background:  #fff;
height:240px;
text-align: right;
.container .header p {
text-align: right;
padding-right: 10px;
.container .header p a {
font-weight: normal;
color: #004151;
text-decoration: underline;
padding: 0px;
border-bottom: none;
#myoblogoimage {
float: right;
padding-bottom: 5px;
#SITCLogo {
float: left;
padding-bottom: 5px;
padding-left: 10px;
.container .header p a img {
border-width: 0px;
border-style: none;
padding-left: 10px;
.image a:hover, a:active {
border-bottom: 0px #FFF;
.container .header #NavBar {
border: 2px solid;
border-color:#666 #666 #000 #000;
text-align: left;
background-color: #333;
height:39px;
.content {
padding: 10px;
border-bottom: #FFF;
/* ~~ The footer ~~ */
.footer {
padding: 10px 10px 10px 10;
background: #222;
color:#FFF;
font-size:80%;
height: 30px;
margin: 10px;
.container .footer ul li {
display: inline;
padding: 5px;
padding-left:7px;
background: #666;
border-colour: #333 #333 #999 #999;
margin-left: 2px;
border-top: 1.5px solid #333;
border-right: 1.5px solid #CCC;
border-bottom: 1.5px solid #999;
border-left: 1.5px solid #333;
.container .footer ul li a {
color: #D6D6D6;
background:url(../_images/Gold-Ball-Bullet12p.gif);
background-position: 0px 3px;
background-repeat: no-repeat;
padding-left:15px;
.container .footer ul li a:hover, a:active{
color:#F7C519;
border-bottom: 1.99px solid #F7C519;
.fltrt {   float: right;
margin-left: 8px;
.fltlft { float: left;
margin-right: 8px;
.clearfloat { clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.SimcockITConsulting {
font-weight: bold;
.ItalicsLeftSmlSpcing {
font-style: italic;
line-height: 1.1em;
any insight would be appreciated