Grow your CSS skills. Land your dream job.

Transparent PNG a:hover issues in IE6

  • # June 11, 2009 at 2:58 pm

    Hi,

    I’m having difficulty getting the following to work in IE6.

    Here’s a link to the sample page: http://www.keithlogan.co.uk/howard/

    I’m using transparent PNG files to give the appearance of rollerovers in the list below. IE6 seems to be the only browser that doesn’t support that. What is the best solution to get this working in IE6?

    Thanks

    =======
    Sample code:

    and my CSS:

    Code:
    .leftcol {
    width:280px;
    min-height: 260px;
    float:left;
    margin-top: 40px;
    margin-right: 10px;
    margin-bottom: 0;
    margin-left: 10px;
    line-height: 18px;
    background-image: url(../images/services_bg.jpg);
    background-repeat: repeat-x;
    padding-top: 35px;
    display: inline;
    }
    .leftcol ul {
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    color: #2E3192;
    }
    .leftcol li {
    height: auto;
    list-style-type: none;
    margin-bottom: 5px;
    margin-left: 5px;
    }
    .leftcol li a {
    text-decoration: none;
    background-image: url(../images/rect_trans.png);
    background-repeat: no-repeat;
    display: block;
    height: 20px;
    color: #2E3192;
    padding-left: 5px;
    }
    .leftcol a:hover {
    background-image: url(../images/rect_trans_over.png);
    background-repeat: no-repeat;
    color: #FFFFFF;
    height: 20px;
    }
    # June 11, 2009 at 6:17 pm

    Sorry, forgot to mention that I’ve tried using the following but with no success: http://www.xs4all.nl/~peterned/csshover.html

    Sure there is an obvious fix for this but I’m new to this so kind of struggling.

    Thanks

    Rob
    # June 11, 2009 at 6:53 pm

    firstly – transparent 32bit and 24bit PNGs arnt supported in IE6 – 8bit are though (I think – yes im sure) but they dont render very well… Also IE6 wont support :hover on anything other than a link by default…

    ANYWAY

    There is an option here:

    http://code.google.com/p/ie7-js/

    This will fix the hover and the transparency issues. just rename your transparent pngs with "-trans.png" at the end and they will be picked up by the script.

    All the instructions are on the page just give it a read through and see how you get on :)

    # June 12, 2009 at 5:59 am

    Hi Rob,

    Issue solved, thanks very much :D

    Keith

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".