CSS hierarchy selector problem

I’m designing a wordpress theme for general use, all text links have a border-bottom applied on the hover state. When an image is placed into the post, it inherits this state, which I obviously do not want.

This only occurs when an unaligned image is placed in the post. Aligned right, left & centered images are placed in a div, unaligned images are placed in the p tag by default.

I can’t access this unaligned image through CSS, here’s the HTML hierarchy when an image is posted….

<div class="the-post">
<p>
<a href="image.jpg">
<img class="gen-class-name" src="location">
</a>
</p>
</div>

I’ve tired accessing it through CSS by a lot of different structures, i.e.

a:hover img
p a img:hover
p img:hover
.the-post p a img.class-name:hover

and set the border to 0.
I’ve given up on the CSS as firebug is telling me the CSS is taking precedence, but it is still showing up. Is there a way of placing an unaligned image into a div without changing any core files (just theme filses)?