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 9 of 9
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Image Links, Change Border color on Hover...quirky in IE??

    I have a page with thumbnail images, which each link to another page.

    I have applied a white border to each image, and want the border to change to orange on hover.

    Seems to work with a couple of browsers that I've tested with so far, but gets quirky in IE, especially after you click one of the images and then go back to the first page, suddenly the border for the "visited" thumbnail no longer works.

    Here's the page:

    http://bossteel.com/Materials/Materials10.html

    And here's the CSS styling that I've applied to the images:

    .matcontainer{
    position: relative;
    padding-left: 20px;
    }

    .matcontainer img {
    margin: 0 6px 6px 0;
    }

    .matcontainer p {
    margin-right: 50px;
    }

    .matcontainer a:link img, a:visited img, a:active img {border: 1px solid #ebebeb;}
    .matcontainer a:hover img {border: 1px solid #eb6e16;}


    Can anybody figure out what's going on with IE (once you click on a square and then return), and how to get around this? I'm concerned that the problem might exist with other browsers that I don't have access to, or that it's something funky with my code and not necessarily a browser problem at all. It's driving me nuts!

    EDITED TO ADD: Problem seems to be in IE6, which is what I have. Just tried it on somebody else's computer who has IE7, and there's no problem. Don't have access to IE8, but still the problem is odd and frustrating.
    Last edited by puffnstuff; 12-04-2009 at 02:47 PM.

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    IE6 is the most despised of the whole group of despised IE browsers and has always had issues with hover.

    I thought I had the answer but not. I'll check back later if no one gets to this but it has to do with the hack to make how you use hover on that image.
    Last edited by drhowarddrfine; 12-04-2009 at 04:26 PM.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello puffnstuff,
    Try being more specific for each selector instead of only the link and hover.
    Try this -
    Code:
    .matcontainer a:link img, 
    .matcontainer a:visited img, 
    .matcontainer a:active img {border: 1px solid #ebebeb;}
    .matcontainer a:hover img {border: 1px solid #eb6e16;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Yup, I had it written all out like that as well, but it didn't make any difference.

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    I was having trouble with img borders some time ago, No matter what I couldn't get IE6 to give up it's whacky ideas about what the image borders should be. That page is not online ATM and I am away from home so I can't look at the code for how I fixed it.

    I know I had to use !important though, so maybe give that a try for the visited links.

  • #6
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by linehand View Post
    I know I had to use !important though, so maybe give that a try for the visited links.
    ok, so I tried applying that to the visited, and it actually made things even wackier. Also tried applying it to the hover, same wacky effects. Some boxes turn orange on hover, some don't, some boxes retain their orange border even after I move the mouse away. Crazy.
    Last edited by puffnstuff; 12-05-2009 at 01:55 PM.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    .matcontainer a:hover {height:1%;}
    .matcontainer a:link img,.matcontainer a:visited img {border: 1px solid #ebebeb } 
    .matcontainer a:hover img ,.matcontainer a:active img{border: 1px solid #EB6E16 }
    should fix it
    Last edited by abduraooft; 12-05-2009 at 02:27 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    puffnstuff (12-05-2009)

  • #8
    New Coder
    Join Date
    Nov 2009
    Posts
    18
    Thanks
    4
    Thanked 0 Times in 0 Posts
    That height declaration did the trick! Never would have figured that one out on my own. Thank you so much!

    EDITED TO SAY: Now I'm extremely perplexed. What seemed to work yesterday, does not really work. Works better in IE, but then the hover effect does not work at all in other browsers.

    So maybe I'm back to square one. I'm thinking it might be easier to just put in a declaration or conditional for those using IE6.
    Last edited by puffnstuff; 12-06-2009 at 01:52 PM.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    puffnstuff (12-06-2009)


  •  

    Posting Permissions

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