Hello Internet. Though Internet Explorer is an inferior web browser, I know many people still use it. I think most Internet Explorer users fall into two categories: They don’t know any better, or they don’t have a choice. The fact is many people use it. People who come to our site do. In fact about one fourth of all visits come from Internet Explorer users. Worse yet, more than half of these users are on IE6 or older. I have ignored this fact for a long time. I kept telling myself it was a fluke and to not worry about it. But over time it has remained consistent. So, it is time to reconcile.
About two weeks ago I set out to fix my templates to work and look the same for IE as they would for Safari and Firefox. I did most of this in one long day. Most problems were with css layout, but there were a few others that I had to get deeper on.
- I fixed alpha transparency on pngs. This is only a problem with IE 6 and older. I use pngs for the header images and for the peace button. Before the fix the images looked like they had a white box behind them. Now they have beautiful transparency. I looked at different solutions for this, but iepngfix was the best and had the least effect on performance.
- I fixed the flickering header images. This is another problem that exists in older versions of IE. When the header image was hovered over with the mouse, it would show the hover color underneath. It took a little tinkering to figure out this fix, but the tutorial I linked helped a lot. This was my first time using and understanding what !important means.
- I fixed the extra space on the header images. You know? That ugly gap that ruined the layout and overall design? Yeah. THAT. It took using one style for IE and one for other browsers. Thank you !important.
- I learned to never use EMs for layout. It works inconsistently.
It took me a while to figure out these fixes. A lot of searching around. That’s why I’m documenting it here. To bring it all together for people who, like me, don’t bother with IE very much. This is by no means complete or comprehensive. And again, I apologize to all IE users who’ve had a sub par experience here on the site.
0 Responses to “Fighting bad design”