0

I am trying to add gradient on only .link.box.gradient but in ie7 it add on .link.box.gradient and .style.box.gradient

<!DOCTYPE html>
<html lang="sv">
    <head>
    <title></title>
        <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
        <script>
            jQuery(function ($) {
                $('head').append("<style>.link.box{height:100px;width:100px;}.link.box.gradient{filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000',EndColorStr='#ffffff');}</style>");
            });
        </script>
    </head>
    <body>
        <div class="style box gradient">Gradient (style-tag)</div>
        <div class="link box gradient">Gradient (link-tag)</div>
    </body>
</html>

You can see here too, http://jsfiddle.net/Zhvpy/ One strange thing is when i move out .link.box{height:100px;width:100px;} from javascript as you can see here http://jsfiddle.net/Zhvpy/1 it seems to work, but I dont want to move out.

Why is it like this? How can I fix this bug?

Nate
  • 30,286
  • 23
  • 113
  • 184
Codler
  • 10,951
  • 6
  • 52
  • 65

1 Answers1

2

removed original incorrect answer

EDIT 1

Odd - decided it might be the way older versions of IE handle certain elements (like <script />) so tried a non-jQuery solution. Seems to work!

EDIT 2

Added this to your full script - outputs different results which are more in line with what IE8 outputs

function appendStyle(element, cssObj) {
    //$('#a').append($('<span/>').text(cssObjToText(cssObj)));
    if ($.browser.version == 7) {
        var head = document.getElementsByTagName('head')[0],
            style = document.createElement('style'),
            rules = document.createTextNode(cssObjToText(cssObj));

        style.type = 'text/css';

        head.appendChild(style);

        style.styleSheet.cssText = rules.nodeValue;
    }
    else {
        element.after('<style class="css-finalized">' + cssObjToText(cssObj) + '</style>');
    }
}
Stuart Burrows
  • 10,824
  • 2
  • 34
  • 33
  • I am sorry to say but It still shows gradient on both tags in my IE7. =( – Codler Dec 21 '10 at 10:53
  • interested - check on a virtual machine here and you are quite right. Chalk up another difference between IE7 and IE8 in 'IE7 Standards' mode – Stuart Burrows Dec 21 '10 at 12:21
  • The direct approach - this works on mine - if it doesn't on yours then I give up :( http://jsbin.com/omida3/2 – Stuart Burrows Dec 21 '10 at 12:46
  • Yes, that works! but I don't know how to join it together in my script. https://github.com/codler/jQuery-Css3-Finalize – Codler Dec 21 '10 at 16:49
  • 1
    phew - this is tricky! I've done some more research and modified the code from my first edit! I don't think document.write is an option with the complexity of the javascript you've written (looks awesome btw :D). So try this link: http://jsbin.com/omida3/3 . Basically for IE7 you add the element BEFORE you modify the contents!! How strange - but looks to work. I believe you will be able to integrate this with your script :) – Stuart Burrows Dec 21 '10 at 17:16
  • Excellent! Good luck with the rest of the project :) – Stuart Burrows Dec 22 '10 at 21:58