What CSS is causing this effect?

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

  1. kevindosi macrumors regular

    Joined:
    Mar 16, 2006
    #1
    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

    web_god61

    Joined:
    May 14, 2004
    #2
    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/.
     
  3. brisbaneguy29 macrumors 6502

    brisbaneguy29

    Joined:
    Nov 27, 2007
    Location:
    Brisbane
    #3
    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