SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    May 2003
    Location
    Sarasota, FL
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Links are cloned when clicked

    Relative to: http://www.maedata.com/clients/arlt/

    Bug in IE:

    The transparent background of the content area (#content) is set in IE using filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...). There is a known bug with this that causes links to become unclickable inside the div that this filter is applied to. One work around for this is to set position: relative on the links, which I've done. However, now when I click one of the links (any of the four in the first line of content) the link is "cloned". What's the workaround for that?!?!

    Any other work arounds to the overall problem of using transparent PNG/background in IE is welcome.

    Thanks!
    Chris Bloom
    Web Application Developer

  2. #2
    SitePoint Zealot
    Join Date
    May 2003
    Location
    Sarasota, FL
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone? You have to click the links a few times for the bug to appear. And it seems like you have to click on the end of the links, too. It's really quirky!
    Chris Bloom
    Web Application Developer

  3. #3
    SitePoint Zealot
    Join Date
    May 2003
    Location
    Sarasota, FL
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hate to keep bumping this thread, but I'm really stuck here. I have googled for a fix for this, but none of the bugs seem to address this specific problem. Maybe I'm just not describing it correctly??? In any case, the design is complete except for this one bug and I'd really like to squash it. Has anyone come across something like this before? Please help!
    Chris Bloom
    Web Application Developer

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    HI,

    Before I look at it what exactly do you mean by cloned and what is happening when you click them. Do you mean they are ending up at the same destination?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    One thing I notice is that you are compensating for the lack of layout on #box by applying a 20px left position to the links. This may be causing you the problem you are experiencing.

    You don't need the left:20px on #content a if you fix #box to have "layout".

    e.g.
    ie only styles.
    Code:
     #content a {
      position: relative;
      }
      #box{height:1%}/* or zoom 1.0 */
    
    You should try to make sure that any containers that hold a number of precise elements (floats and inner elements with widths etc or elements with margins.) have "layout" enforced. The easiest way is to declare their width (e.g. width:100%) where possible or to use the hack as above where widths aren't suitable.

    I don't know if it will solve your problem as I have been unable to work out what was going wrong for you anyway as my system seemed ok

  6. #6
    SitePoint Zealot
    Join Date
    May 2003
    Location
    Sarasota, FL
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, thanks for responding. By cloned I mean... well, the link is duplicated on top of itself, but shifted a bit the the left. I believe they are shifted to the left by 20px since:

    • I had to add a 20px left-margin to the links
    • due to the fact that they had to be set to position:relative
    • due to the bug in IE with AlphaImageLoader that messes with links unless they are positioned relatively
    • which I had to use since IE doesn't support transparent PNGs (the PNG is just a solid color with 40% transparency, so if there is someway to do this in IE without a 24-bit PNG I'm all for it)


    It's a big mess, I know. Buy now, after clicking through the links they start to clone themselves. The links just go to "#", so you can test without actually going anywhere. Try clicking through the links in order, then in reverese, then in order again. At some point during that sequence they will start to clone themselves. It's really weird. I'm testing in IE 6 for Win.
    Chris Bloom
    Web Application Developer

  7. #7
    SitePoint Zealot
    Join Date
    May 2003
    Location
    Sarasota, FL
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    One thing I notice is that you are compensating for the lack of layout on #box by applying a 20px left position to the links. This may be causing you the problem you are experiencing.
    OMG, that was it. I had applied the zoom:1 hack to the #content layer because without it the AlphaLoader didn't work. Applying width:100% to it's parent container (#box) fixed the link shifting, and a few other problems with shifted elements (the cite tag and the logo image.)

    Thanks so much!!!!!! That hasLayout thing has bitten me too many times in the past week!
    Chris Bloom
    Web Application Developer

  8. #8
    SitePoint Zealot
    Join Date
    May 2003
    Location
    Sarasota, FL
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PS: In case anyone is interested here are some screenshots demonstrating the problem, which I was putting together before Paul answered.

    In Firefox

    In IE (original)

    In IE (cloned)

    Scrolling the text off screen and then back, or just making the IE window lose and regain focus caused the cloning to go away, but the links were still shifted. In any case, the issue is fixed now.

    Thanks again Paul!
    Chris Bloom
    Web Application Developer

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Glad you got it working

    90% of the problems with things not being where they should in IE (or jumping into position etc) are usually related to "haslayout" somewhere along the line. It doesn't have to be the immediate parent either and in fact it can be somewhere else on the page that causes the problem. You just have to find the troublesome element and apply "layout" to it


Bookmarks

Posting Permissions

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