jQuery: fadeIn and fadeOut for IE8

Tweet

If you have used jQuery fadeIn and fadeOut effects, you might have noticed that they don't always work on IE8.
There's a solution for that issue: in this very short article we are going to explore it.

I don't think I have to explain much about it, so I will get into it very quickly and shortly.

If we have an element to which we applied a fade effect using jQuery, we should have something like:

<div id="fading" style="display:none;">Some content</div>

in the body of our page.

CSS & HTML: solution for border radius not working on IE8

Tweet

Today, I would like to share something I've discovered only recently (there is always something to learn!).
It's related to border radius and box shadows solutions for Internet Explorer 8 and previous versions. It might happen that the rendering of round corners and shadows is not working at all, and that every CSS rule applied is completely ignored to the point that the styled element won't even be displayed at all.
While the solution is very simple, the problem needs to be explained, and, please, read all the article if you're interested in the solution, because you really need to know what's happening.
Follow me.

A little bit of background

How did I discover the problem? It happened at work. In the company where I work, there's an intranet which I have developed. The main menu of the web app has round corners, rendered with a jQuery plug-in.
A colleague, a few days ago, called me because the background colour, the round corners and the shadows on the intranet menu had disappeared. I immediately checked the browser configuration and security options, asking if he had changed something there. "I haven't", he replied.
We all know from experience that IE8 (the browser he's using) is not a great piece of technology and that it gives us a lot of troubles, but I immediately understand that the problem was not strictly related to the browser configuration. Any site using round corner was not working; even the CSS Pie homepage was not showing those wonderful round corners.
And so I started my quest.

Web Development: how to test IE compatibility

Tweet

Lately, we have seen an increasing interest in HTML5 and CSS3. The (not really recent) introduction of new features has been cautiously followed by web developers, and I don't know what's your feeling, however my impression is that the path to the new web is just full of pitfalls.

I recently had to develop a new web site and, because it was a very basic one, I decided to experiment a bit. I must say it has been quite satisfactory (coding-wise), however I had to spend quite some time to test it. I wanted to have almost a full compatibility and - as we have seen lately - the browser that gave me most troubles has been Internet Explorer.

In order to test a web site for compatibility issues, I usually publish it in a not-known sub-dir and then display it with different browsers. I test it with Safari, Opera, FireFox, Chrome and Internet Explorer. In addition, I use services like Browsershots and IE NetRenderer. However, they usually take a lot of time (especially the first) and because we know that time is money, I recently decided to look for something else.

HTML5 and Internet Explorer 8: not good friends

Tweet

With the gradual introduction of HTML5 new tags, web developers have questioned its use because of compatibility issues. I've already explained that with new elements you might always have troubles. Personally, what makes me really mad is not knowing exactly what will happen when I use HTML5. Will the web site look as I thought? Will it always look and behave as I see it in my testing browsers?

There's another thing to be considered: the future of internet will be "mobile". We've already noticed that the most used word when talking about the future internet is "mobile". Everything's going mobile. New technologies and new devices are capable of surfing the internet with mobile applications. I'm thinking about smartphones or tablets (prominent market analists think that 2011 and 2012 will be tablet years).

Said that, it is quite clear that web developers will have to (or should have already) start to develop sites and applications in a different way and use HTML5 new features. We should consider the way an iPhone user will see a web site. Possibly we will have to create a standard version and a mobile version of the sites - if we don't want to let mobile users go away or maybe even never reach our homepage.

To get to the point, it's been quite a while since I've started to look around to gather information regarding HTML5. It is quite known that Internet Explorer and HTML5 are not very good friends. Actually, IE doesn't even consider HTML5 new elements. That could be a big problem. But there's a workaround!