Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts

    image border issues

    If you look at my site http://174.120.16.66/~thomasse/ you will see the area at the bottom of the page for "partners". The images look good in firefox & safari, but have black borders on the bottom & left side in IE. Any idea how I can correct this?

  • #2
    New Coder
    Join Date
    Nov 2008
    Posts
    17
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Well it should be as simple as

    Code:
    #partners a, #partners a img{ 
        outline: 0;
        border: none;
    }
    It is a common issue, IE likes to add borders to darn near every link...
    Last edited by kgscott284; 09-13-2012 at 08:27 AM.

  • #3
    New Coder
    Join Date
    Aug 2012
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Added this to my css file, no change in IE
    Last edited by cm123077; 09-13-2012 at 10:10 PM.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by cm123077 View Post
    The images look good in firefox & safari, but have black borders on the bottom & left side in IE. Any idea how I can correct this?
    Are you referring to the black borders on the left and right?

    On line 356 of style.css:

    Code:
    #twitter-title {
        height: 185px;
        border-right: 1px solid black;
        width: 100px !important;
    }
    On line 365 of style.css:

    Code:
    #partners-title {
        height: 185px;
        border-right: 1px solid black;
        width: 100px !important;
    }
    You can either delete them ^ or overwrite them by adding this to your CSS:

    Code:
    #twitter-title,
    #partners-title {
        border: 0 !important;
    }
    Last edited by Sammy12; 09-14-2012 at 09:01 PM.

  • Users who have thanked Sammy12 for this post:

    DynamicSystems (09-17-2012)

  • #5
    New Coder
    Join Date
    Sep 2012
    Location
    Dynamic Systems
    Posts
    10
    Thanks
    2
    Thanked 1 Time in 1 Post
    To aboid problems like this it is possible to set CSS to assign zero bordaer to all IMG tags, at all. Such as:

    img{border:none;}

  • #6
    New Coder
    Join Date
    Aug 2012
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    This is crazy....adding those lines to the css is not getting this done, hmmm

    Even deleted the offending lines, as suggested....nothing
    Last edited by cm123077; 10-21-2012 at 03:43 AM.

  • #7
    New Coder
    Join Date
    Aug 2012
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Can anyone please help me figure this out, please? This is very frustrating.

  • #8
    Regular Coder Custard7A's Avatar
    Join Date
    Jul 2010
    Location
    Australia
    Posts
    286
    Thanks
    32
    Thanked 33 Times in 33 Posts
    I looked in IE, and I didn't see the problem.

  • #9
    New Coder
    Join Date
    Sep 2012
    Location
    Scottish Borders
    Posts
    36
    Thanks
    1
    Thanked 9 Times in 9 Posts
    Hi, I cannot explain why since I am no expert on images and opacity but the problem is coming from
    #partners IMG and #partners IMG:hover
    If you remove the filters from these ids ie the opacity then that cures the problem of the black borders.
    Perhaps someone more with more knowledge in this area could give you an explanation of why this is so. Hope this helps. Jim
    PS. Just done some research and it appears to be a common problem using a png img with IE. Suggested solution appears to be adding filter: 0; to the anchor style, or giving the image a background color that then gets overwritten which I think would work better.
    Code:
    #partners img {
    background:#FFFFFF;
    opacity:1.0;
    filter:alpha(opacity=100);}
    Last edited by jamaks; 10-26-2012 at 01:55 PM. Reason: Additional info
    Jims Way is following a strict but simple code

  • Users who have thanked jamaks for this post:

    cm123077 (11-10-2012)

  • #10
    New Coder
    Join Date
    Aug 2012
    Posts
    83
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jamaks View Post
    Hi, I cannot explain why since I am no expert on images and opacity but the problem is coming from
    #partners IMG and #partners IMG:hover
    If you remove the filters from these ids ie the opacity then that cures the problem of the black borders.
    Perhaps someone more with more knowledge in this area could give you an explanation of why this is so. Hope this helps. Jim
    PS. Just done some research and it appears to be a common problem using a png img with IE. Suggested solution appears to be adding filter: 0; to the anchor style, or giving the image a background color that then gets overwritten which I think would work better.
    Code:
    #partners img {
    background:#FFFFFF;
    opacity:1.0;
    filter:alpha(opacity=100);}
    Thank you so much...finally the solution!!!!! This worked beautifully. You are my hero. Thanks so much.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •