Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Transparent PNG a:hover issues in IE6

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #25132
    keithybhoy
    Member

    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;
    }
    #59004
    keithybhoy
    Member

    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

    #59005
    Rob MacKay
    Participant

    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 :)

    #59015
    keithybhoy
    Member

    Hi Rob,

    Issue solved, thanks very much :D

    Keith

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.