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 from all links at this stage :(