But all that is set to change under a new support policy announced today that is scheduled to take effect in about 18 months. Starting January 12, 2016, only the newest version of Internet Explorer for any given version of Windows will be supported. Older versions will cease to receive security fixes and other updates.
Once the new policy takes effect, Windows Vista and Server 2008 users must use Internet Explorer 9, and Windows 7 and Server 2008 R2 users must use Internet Explorer 11. Windows Server 2012 users must use Internet Explorer 10, while Windows 8.1 and Windows Server 2012 R2 users must have Internet Explorer 11.
via Support for old versions of Internet Explorer to be dropped—in 2016 | Ars Technica.
This is an easy fix, but I thought it was worth a post anyway, in case someone comes across it.
overflow: hidden on a block element does not work in IE, if width and height are not set. But, it does in other standards aware browsers.
You may come across this situation if you have an element nested inside another element where width and height are set, and the nested element is inheriting the dimensions of the parent element. In that case, there is no need to set width and height usually. Well, in IE,
overflow: hidden will not work if no dimensions are specified.
So as you may have already guessed, the fix is pretty simple. Setting a width and height on the element, or even just a width, will cause IE to obey the property.
I’m not sure if IE is doing the correct thing or not, in this case. It does make sense that you would have to specify dimensions, so that the browser will know where to cut it off at. It seems though, that IE is dumb here, as other browsers assume the inherited dimensions. I’ll leave that up to you to decide.
I discovered an interesting bug that occurs in both IE 6 and 7 the other day. Actually, I had seen it before, but I had never been able to figure out a cause or a fix until now.
The bug occurs when you have a background set to no-repeat on an element with an undefined width. When no width is set on the element, usually because it’s inside a parent element that has a set width, the background repeats vertically in IE 6 and 7 even when the background is set to no-repeat.
The fix is easy. Obviously, if this bug occurs when no width is set on the element, simply setting a width fixes the problem. The background will no longer repeat and will show up as it is specified. There you have it!
File this one under, you may have seen it before, but I ran across a very weird IE6 bug yesterday. This bug gave me a fit, and I hadn’t encountered it before, at least I don’t remember it.
The problem was an empty div with a height set to 6px. The actual height in IE6 was 18px. If I set the height to 20px, it would be 20px, but if it was less than 18px, it would stay at 18px. Well, it just so happens that 18px is the line-height. So what’s happening is the empty div is inheriting the line-height, even though there is no text inside the div. Go figure.
Another interesting thing is that reducing the line-height doesn’t fix the problem. No matter how I tried, it stayed at 18px. Even setting the line-height inline doesn’t work. What does work is setting the font size to 0. This fixed it instantly. So remember, if you are using empty divs in IE and they are smaller than the line-height, you need to set font size to 0.
See the screenshot below and click on the link to see an example.
So I ran across a nasty bug the other day in Internet Explorer 6 that I had never seen before. The bug is when you have 2 adjacent elements and one of them is floated, IE6 adds a 3 pixel margin to the floated element. You can read about it here on Position is Everything.
I ran a pretty thorough test on it to make sure that is what is occurring. I also tested every fix I could think of before coming up with one. The fix I came up with is to float the other element. This causes the 3 pixel margin to disappear. It doesn’t matter if you float it left or right, either works. Nothing else did.
Click on the following links for examples and source code of the bug and the fix. I realize that the float fix may not be ideal for all situations. It depends on how your site is laid out. That being said, it does work, although it may require you to redesign your site a little bit to apply this fix. It all depends on how bad you want it to work correctly in IE6.
Just when I was excited about the fact that Microsoft is starting to talk about IE8, this happens. At the same time, A List Apart published 2 articles, Aaron Gustafson talks at length about why this was done and Eric Meyer talks about why he thinks this is a good idea. Jeffrey Zeldman chimes in on his blog also about why this is a good idea.
The issue at hand is that Microsoft is introducing a meta tag that will allow developers to specify whether or not they want their site to be compatible with IE8 or not. Not including this meta tag will render the page in IE7 mode. First off, let me say that in my opinion, this is a bad idea no matter how you spin it. Releasing a new browser and requiring users to opt in to get the features provided by that browser just does not make sense to me at all. Also, how many developers will know to include this meta tag once IE8 is released?
After reading a lot of the explanations and reactions, I think the situation has a lot to do with knee jerk reactions and fear based reasoning, and this is why it is not good. According to Microsoft, when IE7 was released, sites that were not using web standards did not look good in it. Microsoft refers to this as “breaking” those web sites. They consider this a bad thing, so their knee jerk reaction to this is to have all future sites render in IE7 mode by default, unless you include a tag that tells it that you want it to render in whatever the current version of IE is. This is fear based reasoning.
I agree with a lot of what Meyer and Zeldman are saying as well, but again it seems like these are knee jerk reactions. Microsoft thinks that by supporting standards, they failed, so Microsoft’s support for web standards is in jeopardy. Well, we can’t let Microsoft take their ball and go home, so Meyer and Zeldman say that this is good thing lest Microsoft reconsider their support of standards. This comes across as being fear-based reasoning to me, in addition to Microsoft’s reason for adding this meta tag in the first place.
So to recap, requiring users to opt in to get the latest browser support is not good. Making decisions based on fear is not good either. Together these add up to a bad situation. So what options do we have at this point? Do we just accept it or is there a possibility that Microsoft will change its mind based on developer reaction?
Finally, here are some more things that stink about this. One, Microsoft acts like they were open about this decision when they were not. Two, Microsoft acts like this decision will benefit all browser vendors when it only benefits them.
Update: More updates on Microsoft’s browser version targeting came today. I really liked Eric Meyer’s follow up, even though
I don’t agree with his conclusion. John Resig and Sam Ruby gave us an important piece of information, in that there is a way to get IE8 to render pages in the IE8 engine without using the meta tag. Safari said that they wouldn’t be version targeting anything. Roger Johansson tells us why version targeting is a bad idea. I’m sure there are lots more posts on the subject, and that developers will be discussing this one for a long time.
As a web designer, you should make sure that you test your designs across all major browsers. Here is the list of browsers you should be testing on, if you aren’t already, in no particular order.
- Internet Explorer 7
- Internet Explorer 6
Of those 5, I find that IE6 is the one that gives me the most trouble. I recently changed jobs which resulted in me having to come up with different ways to test in IE 6 and 7. At my previous job and in my house, I test different versions of IE on different computers. In my new job, I don’t have that luxury anymore, so I had to find a different way to test on one machine.
One option that was recommended to me was Multiple IEs. This is a program to use if you have IE 7 installed and want to install multiple versions of IE below version 7 that you can have running at the same time. I found that this didn’t work well enough for me. The reason is that running IE 6 through Multiple IEs is not stable. Also, you can’t use the IE Developer Toolbar with IE6 in Multiple IEs. Since IE 6 is the main browser I debug in besides Firefox, I found that I had to find a way to have IE 6 running as the main IE version on that machine.
Another solution that was recommended to me was Virtual PC. Virtual PC for Windows allows you to have another versions of Windows running on your PC. This way you can have different versions of IE running at the same time. Plus, Virtual PC is now a free download from Microsoft.
So I decided to uninstall IE 7 and reinstall IE 6. This allowed me to have a stable version on IE 6 running with the IE Developer Toolbar. I then installed Virtual PC. Microsoft has also made a Virtual PC hard disk image with an evaluation version of Windows XP with IE6 or 7 available as a free download which you will need to run IE on Virtual PC. Keep in mind, this version has an expiration date of April 1, 2008.
Once I had that installed I was able to run Virtual PC with XP and IE 7 on Windows while running IE 6 at the same time. You can also install the IE Developer Toolbar in Virtual PC. In fact, Microsoft includes the developer toolbar with this version of the hard disk image. I found this to be the best solution so far for having multiple versions of IE running on the same machine. Not surprisingly, this is the same method that Microsoft itself endorses. Which method do you prefer?
Microsoft updated their IE blog last Friday, with a post on the one year anniversary of IE7. Most interesting to me, was this piece.
There are over 300 million users are experiencing the web with IE7. This makes IE7 the second most popular browser after IE6. IE7 is already #1 in the US and UK, and we expect IE7 to surpass IE6 worldwide shortly.
Let’s hope that comes true. If you are an IE user and haven’t upgraded to IE7 yet, here are a few reasons why you should.
- Improved security
- Fraud protection
- Fewer bugs
Of course if you care about web design standards, you should upgrade to IE7 for it’s improved support for CSS. The problem with this is that IE7 only fixed known bugs and added support for CSS properties that were already being used in current browsers. IE7 did nothing to advance support for CSS, and it is still behind IE6 in its user base.
What web designers want to know, Microsoft, is where is IE8 and how do you plan on using it to advance support for CSS and web standards. If you need more proof of this, just read the comments on your own blog.
Lately, I have found that it is easier to allow a page to display differently in IE 6 than it is to make that page display the same way in IE6 as it does in other browsers. Think about it. Let’s say you have 4 browsers. Your page looks the same in 3 of the browsers, but in one of the browsers, it doesn’t quite look like it should. You could choose to spend extra time to find a work around to make it display the same across all 4 browsers. You could even go so far as changing the layout of your page. Or you could simply allow it to display differently in that one browser, and move on to the next project.
If someone has a problem with it, the solution is simple. Upgrade. Or change browsers. It makes sense, and it pisses me off I didn’t start doing it sooner.
Now before people go and get all upset, I am not advocating designing your site to purposely look bad or crappy in IE6, just different. For example, say you have a div with a transparent PNG as a background. IE6 lacks support for transparent PNGs, thus requires a work around hack to display a transparent PNG as a background. You could implement the work around hack. Or you could just set the background as a solid color in an IE6 only stylesheet using conditional comments. The solid color background won’t look as good as the transparent PNG, but it works fine. Someone using a browser that supports transparent PNGs will have a better experience, but it still works.
Finally, I know that we all have clients, and our clients drive most, if not all, of the work that we do. If a client wants it to look a certain way in a certain browser, then sometimes that’s just the way it is. But I bet if you tried reasoning with your client using the above argument, you just might persuade them to see things your way.
Update: I forgot to add that making things display differently in IE usually requires the use of an IE only stylesheet with conditional comments.
I have been looking for a source for stats on browser marketshare, and what do you know, I’ve found it. There is a site called Market Share that apparently publishes this information on a monthly basis. So now I have some concrete information to go on. In fact you can see September 2007 browser stats here. Here is a snippet of info.
Microsoft Internet Explorer 6.0 – 42.75%
Microsoft Internet Explorer 7.0 – 34.60%
Firefox 2.0 – 13.57%
Safari 41 – 3.91%
As you can see, IE7 is still second to IE6 with Firefox coming in far behind in third. So if you ever doubt that you need to check your work in IE6, it is still the most used browser out there.
Update – 10/16/07: Microsoft is issuing an automatic update today that will install IE 7. We should be able to see the effects of this if we watch the browser stats in the next few months.