CSS & HTML: solution for border radius not working on IE8
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 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.
What we need to know here is that VML, on Windows machines, is controlled and implemented via a specific library: vgx.dll (vector graphic rendering). And Internet Explorer is using that library to render VML.
How come that a library is suddenly not working anymore? A corrupted library may be the problem, but that was not my case.
A while ago, someone discovered a possible exploit threat that uses the vgx library.
That means VML is not working anymore.
The aforementioned bulletin is providing a permanent solution, but if you used some sort of anti malware software, your vgx library may have been unregistered.
So - and you may have already understood it - the solution is simple: register again the library. We need to do it via Windows command prompt or create a small .bat file. Whichever solution we choose the command is the following:
Last but not least, remember to apply the aforementioned Microsoft patch, to avoid possible threats.
I hope you have found the solution useful. As usual use the comments section below for your thoughts!
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.
What I discovered
After a while, it came to my mind that when the border radius rule is not recognised by the browser (such as IE8), we use fallbacks like CSS Pie or jQuery plug-ins. Those solutions use VML (Vector Markup Language). I don't want to get into too much complicated reasonings here. If you need to know more about VML please refer to the W3C page.What we need to know here is that VML, on Windows machines, is controlled and implemented via a specific library: vgx.dll (vector graphic rendering). And Internet Explorer is using that library to render VML.
The first step and the final solution
If the vgx library is not working, Internet Explorer is not rendering VML, and thus the round corners.How come that a library is suddenly not working anymore? A corrupted library may be the problem, but that was not my case.
A while ago, someone discovered a possible exploit threat that uses the vgx library.
"The vulnerability could allow remote code execution if a user viewed a specially crafted Web page using Internet Explorer. Users whose accounts are configured to have fewer user rights on the system could be less impacted than users who operate with administrative user rights." (from Microsoft bulletin MS11-052)And some well known anti malware softwares are simply de-registering the library in order to prevent the vulnerability.
That means VML is not working anymore.
The aforementioned bulletin is providing a permanent solution, but if you used some sort of anti malware software, your vgx library may have been unregistered.
So - and you may have already understood it - the solution is simple: register again the library. We need to do it via Windows command prompt or create a small .bat file. Whichever solution we choose the command is the following:
%WinDir%\system32\regsvr32.exe "%CommonProgramFiles%\Microsoft Shared\VGX\vgx.dll"Last but not least, remember to apply the aforementioned Microsoft patch, to avoid possible threats.
A side note
VML is active and used only in Internet Explorer. I have found that it is possible to check if VML is active by using a conditional statement:I hope you have found the solution useful. As usual use the comments section below for your thoughts!