How to fix the Image Displaying Issues in Internet Explorer (IE) for Web Applications that Generated by PHPMaker 10.0.4

Since PHPMaker uses Twitter Bootstrap, then there will be some issues that related to the displaying images, especially for Internet Explorer (IE) browser. Yeah, as always, IE sucks!

You will find that if you use such following syntax for displaying the icon on the menu item:

<img src='phpimages/new.ico' border='0' style='vertical-align:middle' /> New Project

then the icon will never be displayed properly if you view your web application by using IE browser. In other words, you will see such the broken-image icon before the New Project text on the menu item, even this issue does not happened in other browsers such as Mozilla Firefox and Google Chrome. Again, IE really sucks!

So, instead of using the code above, and in order to avoid the unwanted result, you should start to always use the following style as follows:

<i class='sprite add-sprite prefix'></i> New Project

Yes, you are right! We can fix the Image Displaying issues in IE browser (and perhaps for the other browsers) by using CSS Sprites. Many advantages you will get if you use CSS Sprites.

Did I mention CSS Sprites has been implemented by using the extension I created for PHPMaker 10? Well, you can simply use MasinoCustomCSS10 extension to implement CSS Sprites for your web applications. Yes, especially for displaying the icons on the menu items of your web applications that generated by PHPMaker 10.