Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    345
    Rep Power
    19

    Internet Explorer problem with opacity


    Hi guys and gals.
    I am having issue with setting opacity in Internet Explorer so all browsers that understand opacity get -
    PHP Code:
    background-color:blue;opacity:0.1.... 
    and Internet Explorer gets -
    PHP Code:
    [....continued....]filteralpha(opacity=50);width:100%;height:100
    The height is set via JavaScript but it wasn't working so I set it as a constant and yeah it still isn't working.

    The width and height are both set so to trigger the filter.

    However it doesn't appear to be working and in Internet Explorer 7 the whole div is still a dark blue. However in both FireFox3 and Safari it is see through, so can anyone spot my issue?

    All contributions are welcome and thank you in advance.
    Jaz
  2. #2
  3. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Simply setting the filter/opacity value in IE isn’t enough. Turns out that IE requires an element to be positioned in order for filter/opacity to work. If your element doesn’t have a position you can work around this by adding ‘zoom: 1‘ to your CSS. There are other hacks to deal with this, zoom was the one I picked and it seems to work well enough.

    In JavaScript you can find out if an element in IE has a position component by checking element.currentStyle.hasLayout. If hasLayout is false then the element has no CSS positioning.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    345
    Rep Power
    19
    Hi groundscape
    Yeah I know I read that but I've tried using it and it still didn't work then I read another weblog that said the width and height would do the same if they where present so I tried that. Here's my full code with the zoom:1 added. But it is still not working. IE still brings up a solid blue div.
    PHP Code:
    #light{
    position:absolute;
    top:0;
    left:0;
    right:0;
    background-color:blue;
    opacity:0.1;
    filteralpha(opacity=50);
    zoom:1;
    width:100%;
    height:100%

    The div is dynamically created and I know IE has had issues with this before and the fix in that case was by making the div a constant. I'll give it a try in a hour or so as TBH I was getting nowhere and have moved on in the to-do list, but in the mean time if you can see an issue now I would be grateful.

    Jaz
  6. #4
  7. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Code:
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20)
    Try that for IE.

    Almost any object can have filters applied to it. However, the object that the filter is applied to must have layout before the filter effect will display. Put simply, having layout means that an object has a defined height and width. Some objects, like form controls, have layout by default. All other filterable objects gain layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.

    Filters often create effects that can be generated with script. This raises the question, "Why use filters if script can do the job?" There are several reasons for using filters. The most important is because they don't require script. For better or worse, many HTML authors do not use scripting. Filters are a convenient package for the same functionality that scripting provides. Another benefit of filters is that they are easier to author and can be applied to entire classes of elements, because they use the declarative and inherited syntax of CSS.

    Though as you know, it requires IE5.5+ to use filters.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    345
    Rep Power
    19
    Hi groundscape.
    Thanks for the time.
    Yeah still no joy. I mean it's got a position, height and width and should work I think it's because it is created dynamically. I'll try to set it to a constant and see if it works. Back in a min.....

    Jaz
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    345
    Rep Power
    19
    Ok even as a constant it doesn't work. TBH it would have been quicker just to create a transparent image and tile it.

    Any other ideas buddy before I do it the image way, would prefer not to but just cant get this one. It should work, I'll be back in an hour after I stop crying
  12. #7
  13. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Instead of position:absolute give it position:relative.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    345
    Rep Power
    19
    The problem is is that this a "lightbox effect" that I have created.

    The div is ment to cover the whole page and bring the users attention to a certain area. By positioning it as relative I don't think I will get the same effect, and TBH the image work around would be a lot quicker to create and implement no?
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    345
    Rep Power
    19
    Ok buddy just tried it anyway, curiosity TBH, and it is still not working even with position relative?????
    So I take it that position is not the issue in this case, if it was surely it would work then?

    Heres the current code for reference sake -
    PHP Code:
    #light{
    position:relative;
    top:0;
    left:0;
    right:0;
    background-color:blue;
    opacity:0.1;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=10);
    zoom:1;
    width:100%;
    height:100%

  18. #10
  19. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Hmm can I see the HTML code? That way I can mess around with it?
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    345
    Rep Power
    19
    Boring day by any chance?

    I would but I would have to post my -
    Ajax function,
    the start of my JS object,
    my function that tests to see if it is IE or not then it applies either addEventListener or attachEvent,
    my function that test for the links target,
    my function that creates a new element,
    my function that cancels the event from continuing or bubbling,
    my function that creates the light effect,
    then my function that removes my light effect,
    and 1 id that is set to light that is meant to have the opacity set to it. Which is where the problem is. just for you to play around with it.

    It would be a lot of code and a large waste of your time when i could just create a 1X1 pixel image and tile it just to circumvent Internet Explorer.

    If you really have nothing better to do I'll post it but honestly thanks for the time you have given me, you got me thinking and as a result we have come out with a solution.

    Jaz
  22. #12
  23. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Actually I'm going over to an ex-coworkers house today. I'll be gone all day. Sorry, I'll post back tomorrow if noone else has. Look into mootools. Possibly the JavaScript is effecting it.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  24. #13
  25. /*
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2007
    Location
    Sydney, Australia
    Posts
    729
    Rep Power
    624
    I had an issue with IE and opacity a while back. In my situation I was tweening the opacity of a div from 100 to 0. It worked in standards browsers but not IE. What I did to fix the problem was explicitly set the alpha of the div to 100 before trying to change the opacity. ie:
    css Code:
    filter:Alpha(opacity=100);
    Once the div had been initialised with an opacity It could then be changed with javascript.
    */
  26. #14
  27. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    345
    Rep Power
    19
    Hi Benno32
    Thanks for your contribution.
    This is what i have - css
    PHP Code:
    .....
    #light{position:absolute;top:0;left:0;right:0;background-color:blue;opacity:0.1;filter:Alpha(opacity=100);zoom:1;width:100%;height:100%}
    ..... 
    this is my JS
    PHP Code:
    .....
    document.getElementById("light").style.filter="alpha(opacity=20)";
    .... 
    It still isn't working. I think I'll give it an hour for me to wake up properly and then just create the image. Due to it's small size it wont add any noticeable weight to the page and I could have done it by now

    If you do notice something wrong or have any other ideas please contribute as I would like to fix it to being just CSS.

    I don't think it's a problem with my other JS as that doesn't effect the opacity, it just creates the effect and that is working fine. It is also used on several other functions throughout the site and they are all working fine in IE.

    But thank you for all the contributions to my problem.
    They are all appreciated.

    Jaz
    Last edited by jazajay; August 25th, 2008 at 04:46 AM.
  28. #15
  29. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Isn't that JavaScript supposed to be
    Code:
    document.getElementById("light").style.="filter:alpha(opacity=20)";
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo