CSS hierarchy hover in wordpress

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'm ready to pull my hair out or just remove the border bottom f开发者_如何转开发rom all links at this stage :(

I figured it out, adding vertical-align:middle fixed it