I Hate IE

Clearly, there are better things to be doing with this domain name than have years old blog posts.  If anyone is interested in it, make me an offer!

Use the form here and tell me what you would do with the site and what it’s worth to you:

Well, I’ve done it!

I took Jacopo Tarantino’s advice and installed bbpress for the new forums section on I Hate Internet Explorer.

There’s still a lot of work to do such as creating a new I Hate Internet Explorer theme for both the WordPress install and the bbPress install.

But, I still work a day job. Maybe next month.  If anyone would like to volunteer, that would be great.

In the mean time, please visit the new forums and let’s get some good content there!

I noticed something strange today when looking at the Google Analytics for ihateinternetexplorer.com

22% of our visitors are using IE.
of those poor souls:
54.12% are using IE8
18.56% are using IE7
17.01% are using IE9
and the remaining 10.31% are using IE6 still.

It’s scary that ~2% of the visitors to this site are using IE6.

In any case, back to the point of this post!

The future

I’d love to get some forums set up on here and get some community members to start contributing their knowledge.  It would really put this site to better use!

The current site is backed by WordPress, and I’d like to keep that. The theme in use is easily changed, and I wouldn’t mind implementing a custom theme to fit the forums.

Does anyone have any WordPress forum plugins they recommend?
Please leave a comment!

What is the worst hack you’ve had to make for IE? It could be anything, worst as far as most lines it took, sacrificing functionality, anything. Tell us your stories!

P.S. Want to write a post for I Hate IE? Send an email to iwanttoblog@ this domain and we’ll talk! Let’s get this site some content!

When I started doing web development professionally, it was required that IE5 be supported. For anyone who does web development for a living, they will understand that working in IE5 significantly cripples your capabilities. Quickly, IE5 (and IE5.5) were no longer worth supporting. As their usage dropped towards 0, we began focusing only on backwards-compatibility through IE6. This helped dramatically, although still left lots to be desired.

At the time Google Chrome was a rumor, Firefox was on version 2.0.0.9 or so, IE 7 was mid-way through it’s cycle, Safari was barely around, and HTML5 and CSS3 weren’t something you could play with. We were past tables, and into using divisions, but I’ll admit I cheated a few times out of frustration. In my particular job, we couldn’t have cared less about mobile compatibility.

Since then, times have changed. Sorta.

Google Chrome has a ton of market share, Firefox 4 is nearing release, IE9 is nearing release, and mobile compatibility is all the rage. There are many things that I could focus on here:

• With all these browsers, how do you keep everything cross-browser compatible?
• HTML5 / CSS3
• Mobile Browsing
• Anything else I wanted to

We’ll leave those for another time. For the sake of this post, I’m going to keep it simple.

IE9; How does it help you?

The short answer is, it doesn’t. Yet.

Once IE9 has more market share, you may not need to use some of our old hacks we’ve been relying on, but that’s years away still.

Also, I’m certain that IE9 (specifically HTML5 & CSS3) will introduce many more areas we will need to develop “hacks” for. In my opinion, and judging that history repeats itself, HTML5 / CSS3 won’t be properly supported in IE until the next generation of standards comes out. That could be 10 years away. Until then, let’s all celebrate our job security that Microsoft has provided us.

On a more realistic note, the HTML5 standard isn’t even set in stone yet. It’s still being changed (although in minor ways). I just don’t foresee Microsoft fully and properly supporting the standards that we do settle on, and certainly not until those standards are set in stone.

To sum it up: While IE9 does solve some of the standards compatibility problems that remain in IE8, it is bound to bring a whole new level of standards non-compliance in regards to HTML5 and CSS3.

Recently a project I did for a client required some partial transparent objects. Specifically, it was a photograph background, with a partially transparent white area for the content. Similar to this:

In Firefox, this is a simple task. There are a few ways to accomplish this, but the way I chose to use was this:

background: rgba(255,255,255,0.7);

Now, the big problem here is (naturally) Internet Explorer, and it’s complete lack of support for the rgba approach. What do you get in IE? Nothing. You get no background displaying at all.

Another option for IE is to just make the element transparent using this:

filter: alpha(opacity=70);

But the problem with this solution is it makes the child elements transparent as well, even if they have the opacity set to 100.

My first solution involved some crazy filters I found from searching the Internet about the problem that allowed me to set the background transparency, but I couldn’t get them to reliably work across all versions of IE. I’m not saying this solution isn’t possible, it just wasn’t playing nice with me at the time.

After a lot more research, and a few more hours playing around with solutions, I ultimately came across a solution by Lea Verou that involved a mixture of RGBA and a 1px by 1px alpha transparent PNG that was generated using a pretty slick PHP script. However, after spending some time playing with the PHP script by Lea, I discovered a strange phenomenon in IE7. The alpha transparency was getting changed in a gradient like pattern in IE as it repeated the image. Here’s a screenshot showing the problem:

.

I know it’s hard to see, but that’s the only screenshot I grabbed before fixing the problem.

This was unique to IE7. IE8 and IE9 both displayed the background perfectly.

I spent a considerable amount of time trying to debug this, and eventually discovered it to be a problem with another CSS layer (that was the be a “shadow” for a lightbox element). Even though the layer was hidden, it was throwing off IE. But back to the point..

In the end of the day I fell back to using the PHP script by Lea Verou, or at least the principal. It didn’t seem to be producing a file as small as it should have been, and since I only needed this one PNG file, I actually just made my own PNG image, but the principal is still there.

So what does this mean?

It means that Alpha Transparent PNGs are still the way to go to accomplish a translucent background, even in this “modern” browser time. IE just doesn’t keep up.

Sample Code:

background: url('http://mydomain.com/rgba.php?r=255&g=255&b=255&a=50') repeat;
background: rgba(255,255,255,0.5) repeat;

If you choose to make your own PNG instead of using the PNG generated by the rgba.php script, just change the URL on the first line to point directly to your generated PNG file.

Source:
http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/

Throughout my daily tasks, one of the things I often find myself doing is coding HTML emails for newsletters, promotions, etc for many of my clients.

For the most part, this is simple. But to help anyone who is new to this area, or even to help a seasoned developer who is looking for some new tips, here are some things I have discovered over the years.

You must use inline style sheets.

Yes, I know this goes against every moral fiber in your body. It pains me to do it. But if you want the messages to display properly in sites like gmail, yahoo mail, MSN / Hotmail, as well as the desktop based clients such as Thunderbird, outlook express, and outlook, it must be inline style sheets.

For those who don’t know what an inline style is, here is an example.

Not all style tags are available in all email clients

What this means? There are things you just can’t do in css. Break out your old-school HTML writing skillz (yes, with a ‘z’) and some things will just have to be done the old-fashioned way.

The best chart I have found that shows what is compatible in various clients, is here at campaignmonitor.com.  There may be a better comparison chart out there. If you find one, post it in the comments and I’ll update the post.

Use Email on Acid

No, they’re not paying me to put this in here, I just genuinely love their product. And it’s cheap.

http://www.emailonacid.com

If you send more than one or two emails per month, buy their unlimited account. It’s $12.95 a month, and it has an awesome interface. Very useful for seeing how your message will appear in a huge variety of clients.

Learn to hate Outlook 2007 and 2010

These two email clients will be your hardest to code for. Why? They don’t support anything useful. Why? The use the Microsoft Word rendering engine for displaying HTML.

Accept this as a painful truth, and use it to your advantage to make more money.

After you’re done making more money, head over to http://fixoutlook.org and support the cause to petition to Microsoft that this needs to be fixed.

Post any additional tips as comments. If they’re good, i’ll add them to the post.

This is not really Internet Explorer related, but still something many web developers would like to know.

For starters, I’m going to assume you know what Google Analytics is. If not, head over to their website and check it out. You should be using this.

There are three divisions of “accounts” in Google analytics.

• Google Account (the account you use to log into google analytics with)
• Google Analytics Account (You select these from a drop-down at the top-right once you have logged in)
• Website Profiles (typically used to manage filters, sub-domain tracking, etc. but can also track a different domain per profile)

Personally, I create an Analytics account (“Create New Account…” in the drop down where you select which account to view) for each client. And then I create a Profile for each domain that client has (90% of the time, they only have one)

This keeps things fairly organized, but maintains my access to analytics all under one login.

I can permit another Google Account to have access to a Google Analytics account (either entirely as an Administrator, or profile-specif access as a “user”). When you do this, the Google Analytics Account automatically shows up in the top-right drop-down when they log into Google Analytics with their Google Account.

Recently, I ran into a problem. I went to create a new account so I could set up Google Analytics for them, and I got this message:

Unable to create a new account. You’ve reached the maximum number of accounts allowed. The current number of Analytics accounts you are allowed to create is: 25

What!? There’s a limit to the amount of accounts you can create? I began to get concerned. I counted how many Google Analytics Accounts I had access to. I counted 27. This confused me. Was this a new limit? I Googled it, and I found it has been around for a long time. How did I have more than 25 Google Analytics Accounts then? I thought for a while, but then I had an idea!

I knew that a few of these accounts were not created by me, I was added as an Administrator at a later date. Turns out, this happened twice. Did this explain my 27 Google Analytics Accounts?

I did a test:

1. Create new Google Account
2. Log into Google Analytics with this new Account.
3. Create the Google Analytics Account for the new client.
4. Add my old Google Account as an Administrator to this Google Analytics Account
5. Log into Google Analytics with my old Google Account.

Aha! I now had the new Google Analytics Account under my old Google Account!

For now, this will work. Every 25 Google Analytics Accounts, I will create a new Google Account, and I will just add my old Google Account as an Administrator onto each Google Analytics Account. Hopefully this will keep working.

When developing for Firefox, there’s firebug as well as a variety of other handy tools to assist in your development. Unfortunately, there’s not the same caliber of tools when you’re developing/debugging in Internet Explorer. However, there is the Internet Explorer Developer Toolbar; the closest thing to firebug you can find.

You can download the toolbar from Microsoft’s website:

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

It is heavily limited when compared to firebug, but still a priceless tool when tracking down those IE only bugs.  I use it with Internet Explorer 6 and 7, as 8 has some built-in developer tools (more about those in a later post). To enable it, simply click the icon that appears in your IE toolbar. The icon is a blue cursor encased in a < and a > (fancy graphics, huh?).

If you have used firebug before, a lot of the IE Developer Toolbar will quickly become second nature. Here are a few tips for those new to IE Developer Toolbar:

• The left column is the HTML tree
• The center column is the attributes of an element
• The right column lists the styles assigned to the element
• Note the check-box at the bottom of the right-hand column: “Show Default Style Values.” I have found that I use that more than I anticipated.
• You can select elements using the icon on the far left of the toolbar (Cursor with blue outline box) or using the HTML tree
• When you select the “Select Element by Click” button (see point above) it does not automatically become unactivated when you select an element (firebug does get out of “select element” mode once you select an element)

For more information, see Microsoft’s website regarding the IE Developer Toolbar:

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

Welcome to I Hate Internet Explorer.  The site for.. Well, anything really.

I intend to use this blog, and the comments on the blog, to provide solutions to the problems you face while using IE.

From tools (like the Developer Toolbar) to tips and tricks like adding a display: inline to avoid the double-margin bug.

As we progress, I would love to get a thorough collection of the differences in the versions of Internet Explorer, and present ways to make your code work on all versions of the browser.

Be sure to check out the About page to see more about me, and who I am.