IE error on feeding array of HTML elements to jquery html()

I was debugging a seemingly simple issues in IE ( but it turns out could be an inconsistent in javascript implantation ), which unsurprisingly works in other browsers.  When I trace the error, it was coming from the jquery library, and in which there is a native function call fragment.append(elem)

And this is my guess - the implementation of append() in IE doesn't really support an array of elements. Maybe I'm wrong, please let me know if that's a wrong guess.

There are so many ways to fix it, but one simple way is do a 'join' on your array before feeding to the jquery html()  function to append stuff.

IE8 uses IE7 DOM model on website

Probably it is a well known issue, and there should be many posts out there already mentioned that.  But in case you find this post, it means you are still having this problem.

IE8 will fall back to use IE7 DOM mode when sometimes visit a page, they called it "compatibility" mode.  However, if you doesn't need to support IE7, then it means it will screw you up, because the compatibility mode in IE8 is using IE7 DOM.

But the fix for it is very easy, just put that meta in your header

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

And this will force IE to use the latest version of DOM mode in its browser engine. 

Tools to test across all browsers

http://www.browserstack.com/
BrowserStack is a web based cross browser testing tool.  Has a nice feature to let you test on development server that might not be exposed to the public.

http://browsershots.org/
BrowsersShots let you enter your URL and do a browser compatibility test across the browsers you checked. Some people prefer Adobe Browser Lab because they claimed it's faster than Browsershots, and one can save his/her own set of browsers.

http://netrenderer.com/
IE NetRenderer allows you to check how a website is rendered by Internet Explorer 10, 9, 8, 7, 6 or 5.5, as seen from a high speed datacenter located in Germany. Just type in a URL in the field above and try it out - it's free!

https://browserlab.adobe.com/en-us/index.html
Adobe BrowserLab is an online service that helps ensure your web content displays as intended. Accurately preview web pages across multiple browsers and operating systems, navigate links, and use diagnostic tools to optimize websites efficiently.

https://addons.mozilla.org/en-US/firefox/addon/adobe-browserlab-for-firebug/
Adobe BrowsersLab for Firebug

http://spoon.net/browsers/
Browser Sandbox lets you "run popular web browsers with no installs" (IE6, 7, 8, 9+, Firefox, Chrome, Safari, Opera).

http://finalbuilds.com/iecollection.htm
Multiple IE versions you can installed.

http://www.microsoft.com/en-us/download/details.aspx?id=4580
For testing in different IE versions on Windows, you can also use Microsoft Virtual PC.

Note: The above is not an exhausted list of tools you can use for browser testing.  If you have more tools you have seen and want to share, please feel free to add it in the comments, thanks!

Re: The grey areas of progressive enhancement

Going through some articles about progressive enhancement and found this one - The grey areas of progressive enhancement.

Well, not everything has to follow the progressive enhancement rules, let's keep it flexible.  If it is something critical for a business or corporate, you don't want that to lose the design.  And I believe it is the spirit of progressive enhancement as well, keep critical elements the same in all platform and let's those non-critical to be enhanced progressively.  

Here are something I can think of at this moment about progressive enhancement:-

• Normal user won't look at your site using 2 or more browsers at the same time, so their user experience should basically be the same. But of course, those corporate identity design has to be kept as they are critical.
• The cost of making everything the same in all browsers could be huge. And if it is not critical, why not just save those resources for something else?
• You are punishing those users who are using older browser if we needs everything to be the same.  Because in order to achieve everything the same, client user may need to download extra images, extra js libraries.  

I came from the background of both "everything has to be the same" and "let's make it progressive enhance / gracefully degrade".  And each one has its good and bad, nothing is perfect honestly.

But for "making everything the same" method, here is my experience as a developer - You will learn the most out from it, but it could be a pain of the butt process.  Honestly if I have time and budget, I would do that, since it is fun. And a lot of famous libraries are coming out because some old browsers do not support certain features (maybe you could be the next one).  And again, if you have time and budget, just go for it :)

Extra

Ok, at the end, let me suggest you a graph and help you to decide when you should use "progressive enchantment" or not :)

The rule is "choose 2 and dump 1" :-

• If an element has to be the same, and you have limited budget, you need to give a lot of time to it
• If an element has to be the same, and you have short turn around time, you need to prepare a bigger budget ( hire more contractors, giving OT ... etc )
• If you have both time and budget limit, think about if an element has to be the same or not. If it is not critical, then why bother?

CSS Gradient test Gotcha, IE vs. other

Making some test cases for applying gradients on top of "something" for various browsers.  Since IE 7 - 9 doesn't  support gradient, so we will use the most compatible "gradient filter" for IE.  The test cases link will be at the end of this post.

In FF, Chrome and Safari, the result is the same as the following image :-

The above demo does not just only show you how to create different effects using gradients, but also includes some gotcha you may not know.  Please pay attention to box 3, 4, 7 and 8.

Box 3 and 4 - The background and the gradient is in the same box.  The order doesn't matter, the gradient will have more weight.  And the background will be covered by the gradient in both cases. 

Box 7 and 8 - Similar to the above, but we use "background-color" instead.  However, instead of being covered by gradient, the background color does show up.

So "background color" and "background image" could have different effects when used with gradient. And the next question will be why?  Since background color and background image both will fill the spaces, why background color will show up while background image won't.  I'm guessing this behavior is due to browser optimization, because calculating complex pixels in one shot could be slow.  But if you know the answer, feel free to let me know as well :)

Now it is IE's turn.  Actually IE's gradient filter play pretty well, and it doesn't have the background color and background image inconsistent issues.  Here is the screen shot, aIl E 7 - 9 looks the same.

See that?  The Box 3 and 4 background's image does show up.

So based on the above comparison, which gradient implementation is the correct one?  Is it the one covered the background image, or the one that doesn't?

My test cases page - http://jsfiddle.net/bf4hq/4/, you can test on various browsers and feel free to add more test cases to it that you found interesting and let me know :)

Extra
I created 2 more test cases, Box 9 and 10 .  What I tried to do is to see the result when I do some permutations on gradient, background-image and background-color.  And this is what I found here :-

For FF, Chrome and Safari

1. When you put background-image and gradient in the same box, gradient wins.
2. When you put background-color and gradient in the same box, both merges.
3. When you put background-image and background-color in the same box, background image wins.
4. When you put 3 together, background-color and gradient wins.

Below is what my Chrome browser told me, it's consistent with the results listed above, maybe it is the default behavior :)  Gradient and background image cannot lived in the same element ?!

And IE actually behaves a little bit different.  Well after all, IE's gradient-filter is not the same as css3 gradient.

That's interesting :)

For those who haven't known it yet, W3C gradient color code is sequenced as rgba, while IE gradient filter color code is sequenced as argb.  Be careful when you copy and paste color code around :)

If you are looking for how to apply background image and gradients on the same elements, I found a post - http://www.heresonesolution.com/2010/09/using-a-css-gradient-and-a-background-image-on-the-same-element/

CSS Hacks Mix and Match

Still remember the old days CSS hacks?  No problem if you don't remember, here is a super short syntax for you to review.

Different browsers will respond to the following css differently.

#content p { color:blue; }  // older browser
html>body #content p { color:red; } // modern browser
* html #content p{color:green;}  // IE6   ( star hacks )
*+html #content p { color:#bada55; } // IE7 (star+ hacks )
*:first-child + html #content p { color:pink; }  // IE7 ( star+ hacks variation )
html>body #content p { *color:black; }  // IE7 ( star attribute hacks ) 
#content p { color:blue\0/; } // IE8


Since developer nowadays are talking more about conditional statement, and those hacks are pretty much long gone.  However, is it possible to do a mix and match with old hacks and new methods, and is there any benefit of doing so??

If you use a conditional statement ( I'm not talking about the separate css files method ), you will have something like the followings,

.ielt9 .myClass {
   ...
}

.ie8 .myClass {
  ...
}

.ie7 .myClass {
  ...
}

Do you see that when using the conditional statement, you may end up having bunch of lines that look likes the above.  And through mix and match old css hacks with this modern method, you could take advantage of the benefits of conditional statement, but it could also save you more than several lines.  For example,

.ielt9 .myClass {
    color:orange;
    *color:green;
     color:red\0/;
}

The above one will target browser less than ie9, and it is also taking care of ie8, ie7 and ie6 just in one shot. So in this way, you will save at least 2 definitions by using this mix and match hacks.

Another Post about IE7 z-index bug

Yep, this is about the well known IE7 z-index bug, and some people called it a stacking bug.  I'm pretty sure there are a lot of posts out there will tell you how to fix the problem. And in this post I will briefly explaining my experience dealing with this bug, and my observation of this bug's behavior.

Imagine a Scenrio
Imaging you have a image gallery ( let's say a 3X3 grid ).  And in each grid, besides the image, there is another hidden div (position : relative) in which the div will appear when you mouse-over the image (let's call this hidden div an overlay div). Since you want that hidden div, when it appear, to be on top of the grid, so you use the "z-index" attribute, let's say you put "z-index:99999" for the hidden div.

Image the 3X3 grid looks like the following :-
1, 2, 3
4, 5, 6
7, 8, 9

Well, it's all working great in FF and Chrome, but when you test that in IE7 ... you found out that the overlay div is above the image in the same grid, but the same overlay div now goes below the image of the right grid. On the other hand, the overlay div on the right always  goes on top of the image of the left grid. And no matter what z-index you use, this behavior is still the same.

Well, let's put it in this way in order to make it more visualize :-
G = Grid

G(1).Overlay > G(1).Image
G(1).Overlay < G(2).Image


Why this behavior??
After reading some articles and do some testing, in IE7, these are the behavior

• IE7 will reset z-index when you have declare "position" in your elements
• In IE7, children's z-index will never be higher than the parent

Since it re-assign z-index at run time when it sees appropriate, so it means it will overwrite whatever is in your css. 

So in our case, the IE7 has assigned the 3X3 grid with the following z-index value

0, 1, 2

3, 4, 5

6, 7, 8

And since the Children's z-index value will never be higher than the parent, so in Grid(1), even though my overlay div has z-index:99999, it nows become irrelevant because of the z-index rearrange rule.

So the item from Grid(2) is always having a higher z-index value than all elements inside Grid(1), and item of Grid(3) is always having a higher z-index value than all element inside Grid(2) and Grid(1) and so on. 

How to fix that issue?
Well, there are so many ways, and just be creative. The way I fix it is using javascript like this

• count how many Grids
• reassign z-index value starting the largest number

8, 7, 6

5, 4, 3

2, 1, 0

In this way, we just un-do what IE7 has done to our 3X3 grids.

There is another solution seems much easier, since IE treats a position like a z-index reset, so you can declare position of static on the parent element containing the z-indexed elements to have them respond to z-index correctly.

There are so many solutions,  and are totally depending on your needs and your creativity :)  

IE9 Compatibility Feature

This post partially is coming from an email I've received earlier, but since it is useful, so I post it here.

http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx

• IE9 = Browser Mode IE9 + Document mode IE9 Standards
• Default for the browser
• IE8 ~= Browser Mode IE8 + Document mode IE8 Standards
• Approximates IE8
• IE7 ~= Browser Mode IE7 + Document mode IE7 Standards
• Approximates IE7
• Any other combination is unsupported because it doesn’t approximate a supported browser.
• We’re specifically setting the X-UA-Compatible Meta tag to force the browser to render in IE9 unless someone has used the developer tools override. There’s nothing we can do if someone has chosen to override with the developer tools.

If you are interested in knowing more about how IE9 is determining its Document Mode (underly engine), here is the graph for it.

If you want to run multiple different version of IE from different platform ( like IE in Window Vista and XP ) all in your local machine. You can try the Windows Virtual PC VHDs.

IE throws Invalid Argument when calling window.open() ??

In my javascript code, I try to open a new window to hold a div ( a block of contents ) for printing.  And IE throws me an "Invalid Argument" error ( while other browsers are fine, which is usually the case ~ ).

I search online, there are 2 different methods to deal with this problem:

1)   var w = (window.open(urlstring, wname, wfeatures, false));

2) You cannot have 'space' in between "wname" items in IE.

I tried the first one, it doesn't work; and I tried the second 
one, and it works.

For the method one and its explanation, here is the link
http://stackoverflow.com/questions/710756/ie8-var-w-window-open-message-invalid-argument

Image not showing in IE

Symptoms: My JPEG image shows in FF/Chrome, but it doesn't show in IE??

If you have that issue, there is a simple fix. Try to resave your image using photoshop or other photo editing softwares in RGB color mode.

The reason is sometimes your image is in CYMK color code, which won't be understood by IE. Because IE so far only understand RGB, and CYMK is a print format, not really for web.

For people who are using photoshop, when you save your image, use the "save for web" options.