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

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 :(

2 answers

0
points

The only thing I could get to work in a couple browsers was this...

<style type="text/css">
a:hover span {
    border-bottom:3px solid red;
    }
img {
    border-bottom:none;
    }

</style>

And then...

<a href="http://google.com"><img src="Location" /></a>

<a href="http://google.com"><span>hash</span></a>

Putting the spans in is the only thing I could think of. Strange, I have never run into this problem. I am going to keep my eye out for a better answer.

Answered over 6 years ago by Tom Guthrie
  • Unfortunately wordpress handles an unaligned image like this by default, my first thought would have been to edit how an unaligned image is inserted into a post and place it in a div, but I do not think it's possible to do this without editing some core files. decimal over 6 years ago
0
points

The image is set with a class. What you're looking to edit is a class called "gen-class-name:hover". If you can't find it, or something of the sort anyway, then try the following.

div.the-post img.gen-class-name:hover {
 border-bottom-width: 0 !important;
}

When modifying pre-packaged baked goods (aka Wordpress, Joomla, Drupal, etc.), it's more-than-likely required to add !important to the value of any styling syntax in your CSS document. !important assures that it will override any styling previously declared that may be hard to find.

Consider it a temporary solution however, until you find the root of the problem. It's just bad practice to finish a product with !important marked up everywhere in your style-sheets (and can probably call for more problems later when overlooked with further re-styling attempts).

Answered over 6 years ago by Vinny Burgh
  • Just tried that, but it doesn't work. Using firebug shows me that it is taking precedence over everything else, but it's still showing up over the images. decimal over 6 years ago
  • If you've been refreshing a zillion times while modifying the style, you probably could have cached an older version of the style sheet. In Firefox, go ahead and goto Tools > Clear Recent History and make sure "Cache" is checked. Go ahead and submit. Then refresh the page and see what's up. It happens to me a lot, to this day even. Vinny Burgh over 6 years ago
  • Also, it could be possible that there may be CSS declared on the actual document as opposed to being on the style-sheet. Inline styling will always have higher priority than style-sheets. Vinny Burgh over 6 years ago
  • I use Shift+Refresh for testing (forces load without using cache), there's no inline styling in the document. Thanks anyway. decimal over 6 years ago