Ok so I want to do a mouse over where the border color around a pic. changes. I don't know how to do this with valid xhtml. Ok if I didn't need it valid it would be simple but look at the code I have and please explain.

<a href="/Blue/index.php">
    <img src="Images/bluethum.jpg" class="thum" alt="Click for working version" />
    </a>  
    <p class="paragraph">This is an example of a template I can code and design. This template sold for 100 dollars, so that is an example of a one page layout price range, however prices can go down and up depending on many factors. As you can see it is very clean and simple enough to look good for any type of website.</p>
    <hr />
    <br />

.thum {

  border: 3px solid #ec851f;

}

.thum a:hover {

  border: 3px solid #793f00;

}

Because the link surrounds the image and is not a part of it it gets screwed up when I put the class .thum in the <a> but the border doesn't change colors now.

what i would do is

 img 
{border: none;
}
img a
{border: 3px solid #ec851f;
}
img a:hover
{border: 3px solid #793f00;
}

of course that would make all imgs inside a link surrounded by those borders, and the hover effect as well.

however, the way you have it now would work just remove the class="thum" from the img, put it in the <a> tag, and it should work, but make sure you still have this in your css

 img 
 {border: none;
 }

Regards,
Cy.