Image link css bug in FireFox

Discussion in 'Web Design and Development' started by Darran, Apr 11, 2008.

  1. Darran macrumors member

    Joined:
    Mar 31, 2008
    Location:
    Singapore
    #1
    I have a problem in a site I am creating.

    I have styled my post content <a> links in the following way.

    Code:
    #post-content a {
    	background-color: #bf6f3c;
    	color: #fff;
    	padding: 2px 2px 1px 2px;
    	border-bottom: 1px solid #7f4926;
    }
    
    #post-content a:hover {
    	color: #f5fac7;
    }
    And when I insert an link image like so: <a href=""><img src="" /></a>

    There seems to be an extra border inherited from my #post-content a style. I have attached the screenshot to show the problem.

    This was how my link image should look like:

    Code:
    #post-content a img {
    	background-color: #bf6f3c;
    	padding: 5px;
    	border-bottom: 1px solid #7f4926;
    	border-right: 1px solid #7f4926;
    }
    Can anyone guide me as to how I can fix this problem?

    My site URL is here
     

    Attached Files:

  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Well, it's not just Firefox, and also not a bug. It's behaving correctly. I see you've put a class name on the surrounding link tag for that image. Given that you can add the following CSS.

    Code:
    #post-content a.test {
     padding: 0;
     background: #fff;
     border: none;
    }
    This'll simply undo the other CSS for links. Not sure there's another way to get around it. I've run into the same type of thing before.
     
  3. Darran thread starter macrumors member

    Joined:
    Mar 31, 2008
    Location:
    Singapore
    #3
    I have done what you said.

    But take a look.

    I added this

    Code:
    #post-content img {
    	padding: 5px 5px 4px 5px;
    	border-bottom: 1px solid #7f4926;
    	background-color: #bf6f3c;
    }
    It works fine, but I want the background to change when I hover, and it is not possible to do it using the previous class. Any workarounds?

    Crash that, I fixed it. Thanks for your help!
     
  4. Darran thread starter macrumors member

    Joined:
    Mar 31, 2008
    Location:
    Singapore
    #4
    I have made some changes, and it is looking good.

    But there seems to be an extra pixel below the border, such that hovering it, will change the background color, when there is nothing there. I wonder is it just me or is there really a pixel there?
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    I only see the pixel border that you have define with the CSS in the previous post that's one pixel tall.
     
  6. Darran thread starter macrumors member

    Joined:
    Mar 31, 2008
    Location:
    Singapore
    #6
    Thank you for your help, I am almost done with my WordPress theme, just some stupid fixes for IE6 left to be done.
     
  7. Photomax macrumors regular

    Joined:
    Nov 26, 2007
    Location:
    Seattle
    #7
    Sometimes you will get an unwanted border around images. One of the things I do before adding any specific CSS to my html code structure is to starting with a CSS declaration of:

    fieldset,img { border : 0; }
     

Share This Page