What CSS is causing this effect?

Discussion in 'Web Design and Development' started by kevindosi, Feb 7, 2011.

  1. kevindosi macrumors regular

    Mar 16, 2006
    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
  2. web_god61 macrumors regular


    May 14, 2004
    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>

    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/.
  3. brisbaneguy29 macrumors 6502


    Nov 27, 2007
    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.

Share This Page