EzDevInfo.com

IE9 border-radius and background gradient bleeding

IE9 is apparently able to handle rounded corners by using the CSS3 standard definition of border-radius.

What about support for border radius and background gradient? Yes IE9 is to support them both separately, but if you mix the two the gradient bleeds out of the rounded corner.

I am also seeing strangeness with shadows showing as a solid black line under a box with rounded corners.

Here are the images shown in IE9:

How can I work around this problem?

Pass Nothing from Javascript to VBScript in IE9

I have a framework written in VBScript. Inside some function in this framework parameter of the function is checked for Nothing in If statement and then some actions executed. Code that uses framework written in Javascript. So I need to pass Nothing to function to perform some actions. In IE8 and earlier versions worked next approach:

<script type="text/vbscript">
    Function Test(val)
        If (IsNull(val)) Then
            Test = "Null"
        ElseIf (IsObject(val)) Then
            If (val Is Nothing) Then
                Test = "Nothing"
            End If
        End If
    End Function

    Dim jsNothing
    Set jsNothing = Nothing
    msgBox(Test(jsNothing))
    msgBox(Test(Null))
</script>


<script type="text/javascript">
    alert(Test(jsNothing));
</script>

In IE < 9 output will: Nothing, Null, Nothing.

In IE9: Nothing, Null, Null.

How can I pass Nothing from Javascript to VBScript in IE9?

Sorry, I know it's ugly, but I'm trapped. And hate VBScript.

edit: There is an example of framework function. I can not change it because it is widely used in application.

Function ExampleFunction(val)
    If (val Is Nothing) Then
        ExampleFunction = 1
    Else
        ExampleFunction = 0
    End If
End Function

Update

Quitted job. Found a better one.

Gradients in Internet Explorer 9

Does anyone know the vendor prefix for gradients within IE9 or are we still supposed to still be using their proprietry filters?

What I've got for the other browsers is:

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

As a bonus does anyone know Opera's vendor prefix as well?

Make Adobe fonts work with CSS3 @font-face in IE9

I'm in the process of building a small intranet application and try, with no luck, to use Adobe font I purchased lately. As I was informed, in our case it's not a license violation.

I converted the .ttf/.otf versions of font to .woff, .eot and .svg, so to target all major browsers. The @font-face syntax I used is basically the bulletproof one from Font Spring:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot');
    src: url('myfont-webfont.eot?#iehack') format('eot'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

I modified the HTTP headers (added Access-Control-Allow-Origin = "*") to allow cross-domain references. In FF and Chrome it works perfectly, but in IE9 I get:

CSS3111: @font-face encountered unknown error.  
myfont-webfont.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
myfont-webfont.ttf

I noticed that when converting font from .ttf/.otf to .woff I also get an .afm file, but I don't have a clue whether it's important or not...

Any ideas how to work it out?

[Edit] - I host my websites (fonts too, but under separate directory and subdomain for static content) under IIS 7.5

IE9 blocks download of cross-origin web font

This is driving me crazy.

Just testing a site on IE9 and discovered that the 'live' version is rendering a web font I am using smaller than on the dev version.

Here is a selection of screen grabs:

I am using the Font Squirrel @font-face kit. As you can see, it is fine on Firefox, Chrome and even IE9 when viewing a local version of the site.

The only difference between the local and live versions is that the font is being loaded from a different domain on the live site (I have set up the cross-domain policy correctly, as illustrated by the fact it works on Firefox and Chrome).

I can't remember what it looked like in IE8 (Microsoft, yet again, haven't thought of developers and have installed IE9 over the top of IE8 with no option to run them simultaneously)

The site is at http://enplanner.com so you can view the source.

Any help on this would be most appreciated - thank you in advance.

Edit: I have removed IE9 and discovered that is looks exactly the same on both local and live in IE8. It appears IE8 has a superior rendering engine that is closer to FF/Chrome than IE9. This is quite a depressing discovery.

Website with JS doesn't work in IE9 until the Developer Tools is activated

I'm developing a complex website that heavily leverages jQuery and a number of scripts. On load of the site, none of my scripting is working (though I can confirm that other scripts are functioning fine). I wouldn't be posting such a lame question here on SE except for one thing:

The instant I hit F12 to turn on developer tools so I can debug my issue, everything instantly works perfectly!

Worse, if I shut down the browser, start it up, turn on Dev Tools first and visit the site, everything works as expected.

So I can't even debug the darned problem because Dev Tools fixes it! What could Dev Tools be doing that makes things work? Does it change the UA (I do some jQuery.browser detection)? Does it do something to doctype?

EDIT

All my console logging is wrapped in the following wrapper utility function:

   function log(msg){
    if (console){
        console.log(msg);
    }
   }

Any thoughts or suggestions I could try would be welcome. I'll post here if I find a solution.

only shows first char of selected option

I have a standard select box which I'm populating using jquery by appending options, but for some reason IE9 only shows the first character of the selected option. Needless to say it works perfectly in FireFox and Chrome, but I have to support IE9. I tried the IE9 compatibility modes, but it made no difference, nor does styling the select or option.

Has anyone seen this issue before. What caused it? How did you fix it?

Simplified code sample:

<select id="selectCCY" ValueColumn="ccyID" DisplayColumn="ccySymbol" ></select>



$.each(res.result, function (key, value) {  
    $('#selectCCY').append('<option value="' + value[$('#selectCCY').attr('ValueColumn')]+ '">' + value[$('#selectCCY').attr('DisplayColumn')] + '</option>');
});

res.result is a simple json array like this:

[{"ccyID":1,"ccySymbol":"GBP"},{"ccyID":2,"ccySymbol":"AUD"},{"ccyID":3,"ccySymbol":"USD"}]

OH BUGGER!!! it works fine in my simplified example, so the problem is somewhere else. Sorry. The original code is to long and complex to paste here, but will let you know when I find the answer.

some time later....

OK, I got the problem down to an ajax call inside a $(selector).each() loop. The loop goes through all select boxes and asyncronously populates the options. If I make it a syncronous call, the select boxes have the correct width and show correctly, but if its an async call the select boxes only show the first char as in the image. still working on this, will get back to you again.

I still want to know what would cause a select box to display incorrectly. I can do workarounds and get it to show correctly, but that doesn't answer the question. It's just a select with options in it, it should always just work, right?

after a weekend of ignoring the issue ....

Right I found a workaround. Before doing the ajax call to populate the select box I first set the css display property to 'none' on it, then populate it and finally when the ajax call and population is complete I just remove the css display 'none' property.

So I still don't know why IE doesn't like me, but we have a solution at least.

Source: (StackOverflow)

Is there a way to detect if the browser has subpixel precision?

Is there a way to detect if the browser has subpixel precision for elements ?

IE9, unlike any of the other major browsers, has subpixel precision for its elements (an elements width can be 50.25px) and because of that, I need to treat a thing differently.

One way is to use jQuery to detect the browser name and version, but this is deprecated in jQuery and not recommended, instead being suggested that the existence of features should be tested for not the browsers names and versions.

Source: (StackOverflow)

css3 text-shadow in IE9

Is there an easy way to have css3 text-shadow's working in IE9? At least a single text shadow would be great. I guess ideally IE8 is supported as well. I'm hoping there's a simple jquery plugin or .htc file which just looks at text-shadow css property of an element and implements it for IE9.

Source: (StackOverflow)

How do I make an "else" in an IE HTML conditional?

<!--[if lt IE 9]>
    This is less then IE9
ELSE
    this is all browsers: firefox, chrome, etc.
<![endif]-->

How do I do this in my HTML? I want to do an "else" ...

Source: (StackOverflow)

CORS with jQuery and XDomainRequest in IE8/9

I am using CORS to call a cross domain API, however Internet Explorer is giving issues. CORS should be possible in IE8 and IE9 through the XDomainRequest object, however I can't get things to work..

JQuery refuses to provide native support for XDomainRequest, however several jQuery plugins are suggested to add this support. This topic suggest two such plugins: jQuery.XDomainRequest.js and xdr.js, which has been reported to work. Afaik, the plugins should automatically override behavior of jQuery.ajax. I found another plugin here.

I put a little demo pages with the respective plugins jQuery.XDomainRequest and xdr and jquery.ie.cors that perform ajax requests to a CORS enabled server. The pages are working in Chrome and Firefox, however IE8/9 instantly throw a permission denied error (even before making the request). This MSDN post suggest adding another handler xhr.onprogress = function() {}; but I tried this and it isn't working either.

Any clues what I am doing wrong? I have also tested with IE8 now using MS virtual server, but it has exactly the same problem.

Edit: OK so I figured out that part of the problem was that I was using POST over HTTPS. Apparently XDomainRequest does not allow CORS over HTTPS. I can switch to HTTP but I really need POST.

Edit2: See this issue on github for the end of this story. It turns out that when using HTTP POST, the xDomainRequest can only encode the request body (arguments) as text/plain. This pretty much makes it worthless, because everyone uses application/x-www-form-urlencoded or multipart/form-data.

Summary: I highly recommend not investing any time in XDomainRequest, because it is a terribly poor implementation with many limitations. It basically only really works for GET requests to non-ssl servers, so you might as well use jsonp or whatever.

Source: (StackOverflow)

Difference between "Browser Mode" and "Document Mode" in Internet Explorer

I´m really glad that I must no more use IETester since IE6 support was dropped in our company and IE9 has some quite cool developer tools. I can set "Browser Mode" and "Document Mode" but I can´t tell the difference. Does anyone know it? This post also didn´t help me out: IE8 browser mode vs document mode

Thanks

Source: (StackOverflow)

How to disable Compatibility View in IE

I am wondering how do you stop people who are using IE 8 from going to Compatibility mode?

<meta http-equiv="X-UA-Compatible" content="IE=8" />

I found this tag and I think this forces people to stay in IE-8 mode but I am not too sure and can't check as I have IE 9.

If people are in IE 9 mode I force them to not go into IE 8 or IE 7 Compatibility mode?

I tried to put the above line in my code and went to IE 9 -> Tools -> Compatibility View(Grayed Out)

but "Compatibility View Settings" was not grayed out and it seems you could add the site through there.

So should that not disable?

Source: (StackOverflow)

CSS3 transform: rotate; in IE9

I have an element that needs to be vertical in a design I have done. I have got the css for this to work in all browsers except IE9. I used the filter for IE7 & IE8:

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

This however seems to render my element transparent in IE9 and the CSS3 'tranform' porperty doesn't seem to do anything!

Does anyone know anyway of rotating elements in IE9?

Really appreciate the help!

W.

Source: (StackOverflow)

box-shadow on IE9 doesn't render using correct CSS, works on Firefox, Chrome

I'm trying to simulate a floating modal box type thing but having an issue with IE9 and its box shadow implementation.

Here's a summary of the code I'm using which can duplicate the issue:

<html>
<head>
    <title>Sample page</title>
    <style>
        .content-holder {
            border-collapse: collapse;
        }
        .back {
            background-color: #a8c0ff;
            padding: 100px;
        }

        .inner {
            background-color: #fff;
            text-align: center;
            padding: 50px;
            box-shadow: 0px 0px 20px #000;
        }

    </style>
</head>
<body>
    <table class="content-holder">
        <tr>
            <td>
                <div class="back">
                    <div class="inner">
                        <h2>Heading</h2>
                        <p class="subtext">Some text here</p>
                        <p>More text</p>
                        <a class="button" rel='nofollow' href="#">A button</a>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>

It works fine in Firefox/Chrome etc but IE9 doesn't display the shadow. I can change it to an inset shadow and it appears as it should, but an outer shadow continues to elude me.

Anyone out there able to shed some light on this shadow problem?

Source: (StackOverflow)