What CSS is causing this effect?

[kevindosi]

Hey people,
I'm trying to customize a wordpress theme for my own personal blog, but am confused about something. Every link I have that is an image has a brown solid line underneath it and a red bar at the bottom of it when you hover over it. I've tried getting rid of this by changing the a:hover img component in the css file, but not sure what I need to do to get rid of that red bar. Any ideas?
You can see an example of what I mean at www.beforethecubicle.com/photos

 

[web_god61]

After a quick look at your code, I'd say you have a collapsed div.

looking at line 223

---
<div class="ngg-albumcontent">
<div class="ngg-thumbnail">
<a href="/photos/?album=all&gallery=3"><img class="Thumb" alt="thumbs img 7660 1 Photos" src="http://beforethecubicle.com/blog/wp-content/gallery/pre-trip-photo-fun/thumbs/thumbs_img_7660-1.jpg" title="Photos" /></a>
</div>
---

your class="ngg-thumbnail" doesnt clear the float so class="ngg-thumbnail" collapses, I'm guessing.

Check out the section about collapsed divs, http://css-tricks.com/all-about-floats/.

 

[brisbaneguy29]

It might be this

.content a:hover {
color: #422d1c;
border-bottom: 1px solid #ff8598;
background: #ff8598;
}

Change the border bottom value.

Mind you the above DIV issue is more likely to be the problem.