www.webdeveloper.com
Results 1 to 11 of 11

Thread: PNG link in IE6 with negative positioning

  1. #1
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304

    PNG link in IE6 with negative positioning

    Hi y'all,

    I'm working on a single image rollover in CSS, using a PNG image. Works fine in all browsers, exept IE6 of course.
    When using the regular PNG fix for IE6, the rollover fails and the entire image shows. How can I solve this?

    And how do I get rid of the flicker again?

    Jochem


    Without IE6 fix:

    PHP Code:
    #LINK-3         {width:82px; margin-bottom:3px; cursor:hand;
                     
    background:url('_img/image.png'no-repeat 0 0}
    #LINK-3 a       {width:82px; height:36px; display:block}
    #LINK-3 a:hover {border-bottom:3px solid #de0000; background:url('_img/image.png') no-repeat 0 -36px}

    <div id="LINK-3"><a href="#"></a></div
    Including IE6 fix:

    PHP Code:
    #LINK-3         {width:82px; margin-bottom:3px; cursor:hand;
                     
    background:url('_img/image.png'no-repeat 0 0 !importantbackground:nonefilter:none !important;
                     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabeled='true'src='_img/image.png')}
    #LINK-3 a       {width:82px; height:36px; display:block}
    #LINK-3 a:hover {border-bottom:3px solid #de0000;
                     
    background:url('_img/image.png'no-repeat 0 -36px !importantbackground:nonefilter:none !important;
                     
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabeled='true'src='_img/image.png')}

    <
    div id="LINK-3"><a href="#"></a></div
    "to live = to learn"

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    IE hates negative margins. Try moving it the other way.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  3. #3
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    It works fine without the PNG fix, so the negatives don't seem to be the problem here.
    "to live = to learn"

  4. #4
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    That was something I encountered with IE -- thought it might be the same for you.
    I found it easier to stack the images and shift them vertically, rather than horizontally.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  5. #5
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    They are shifting vertically...
    "to live = to learn"

  6. #6
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Yes, you're right, and I'm wrong. I meant that my fix was horizontal. Sorry - It's been a long week!
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  7. #7
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    Yep, a few more hours and it's weekend!!
    Any solution for the PNG fix?
    "to live = to learn"

  8. #8
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    As to the flicker, it could be attributable to your browser settings. If you have IE set to "check for new versions of the page every time you visit," you'll always get that flicker. You could use javascript to preload the image, but it may not be necessary. Most people (only developers, I think) set their browser to empty the cache on each page viewing.

    I'm curious as to why you're using two background attributes in your link & rollover -- one set to a background, and another set to none. IE usually reads the first and ignores the second. Perhaps you meant background-color: none?
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  9. #9
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    I found this fix somwhere on the net and it looked good to me. I forgot where. I know there are also shorter versions with just the AlphaImageLoader line.
    "to live = to learn"

  10. #10
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    By the way, thanks for your time looking into my problem.
    "to live = to learn"

  11. #11
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    Back to my first post in this thread. Does anyone know how to solve the problem?

    Jochem
    "to live = to learn"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles