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.

CSS: style your form elements

Tweet

When talking about how to style an HTML element, it is always difficult to meet everyone's tastes.
Keep that in mind when reading the following post, because we are going to show how to style form elements with CSS, considering two possible extreme situation: with a white background and with a black background.

We are going to work on the input, text area, select and button elements. We are going to use CSS and specifically the following properties:
1) background color;
2) font family, size and color;
3) text alignment;
4) width and height;
5) padding;
6) border radius;
7) border;

Let's see what we can do.

CSS3: Use CSS3 in IE 6-8 with PIE

Tweet

"Marco, the design department has prepared the layout for the new site. Please, now you can start developing it."

That's what I found in my company mailbox, the other day. Interesting enough, the design department is mainly a smart guy who's very skilled using Photoshop and stuff like that. But placing shadows, neat and polished background textures, rounded corners and every other embellishment you can think of, is drammatically easier to do with Photoshop than actually designing it with CSS, ASP and plain HTML.

Upon looking at the drafts, I immediately realized there were troubles ahead. The problem was compatibility...
I know, I know... we've been talking about CSS3 compatibility issues many times, however I believe that we can now start to talk about possible solutions... or not?

... drum roll ... the solution is already out there!

HTML5 & CSS3: compatibility issues

Tweet

In the past weeks, I have posted different articles about HTML5 and CSS3. In almost every one of them, we ended up describing the possible compatibility issues we might face implementing new features and solutions offered by the two standards. As a start, I would like to share some thoughts about the use of HTML5 and CSS3.

a) Do we really need them?  What I am saying is that we do not really want to use new features just because they are cool and they make us great web designers. We need to understand when new stuff really serves our purposes. If it’s only a matter of style – believe me – it is not worth it.
b) Are we ready for possible non standard solutions? In the past when HTML or CSS couldn’t help us with a specific effect, we looked for help with JavaScript. Today it is the same: Modernizr, CSS3 PIE or Selectivzr can really help us in dealing with compatibility issues. That might affect site speed and usability.
c) Are HTML5 and CSS3 the future? Well, this is difficult to answer. It is my personal opinion that they will be. It is decided – someway.
d) Are HTML5 and CSS3 really helping us? Before the (slow) introduction of the new standards, we were used to find alternative solutions (as said just before). HTML5 and CSS3 were conceived to help us in creating astonishing new web site in an easier way. With compatibility issues, we are actually back to square one: we need possibly more workarounds to ensure that – almost – every possible user will be able to use our web site the way it was meant to. That means more work just for possibly not necessary embellishments.