Category Archives: IE

Microsoft is Pushing IE7 Downloads

I keep a copy of IE6 installed for testing purposes. When I fired up IE6 this morning, it took me to this page for IE7, basically prompting me to upgrade to IE7. It seems that Microsoft is trying harder to get users of IE6 to upgrade to IE7. Ask and you shall receive.

The other day Microsoft had this to say about IE7.

Almost a year ago, we released Internet Explorer 7 for Windows XP. Since then, IE7 is well on its way to becoming the most used browser in the world…

I guess they weren’t satisfied. It appears they decided to take matters into their own hands and give IE7 a little extra push. Good for them.

Update – 10/16/07: Microsoft is issuing an automatic update today that will install IE 7. So hopfeully, you have it set so it does not automatically download and install automatic updates. If you don’t want IE7 on your machine, be sure not to run this update.

CSS Support in IE7

If you ever wanted to know how support for CSS improved in IE7, this post is for you. Apparently in August 2006, before IE7 was released, Microsoft posted these details on the IE Blog. The post details all the bugs that were fixed, added support for W3C specifications and features added for CSS 2.1. I always wanted to know this, and this is the first time I have seen it.

They go on to talk about how fixing support for CSS will cause a lot of the hacks that worked before to break in IE7. This page details specifically which workarounds that previously worked in IE6 will not work in IE7.

I believe IE7 has now been out for over a year. I admit I am impressed with Microsoft’s support for CSS in IE7. It is worlds ahead of IE6. However, the adoption rate that I have seen for IE7 over IE6 is still very slow. In addition, how long will it take for Microsoft to release IE8? Five more years? By that time, IE7 will be outdated as IE6 was. Unfortunately, as many inroads as Firefox has made into browser market share, we are still living in a Microsoft world. Maybe by releasing Safari 3 on Windows, Apple will be the one to change that. It is still in beta as of this writing, though.

Internet Explorer Ignores Bottom Margin

Well, I noticed something strange today that I had not noticed before. Internet Explorer ignores the bottom margin I had set when it is the last item on the page. I had the same problem in IE 6 and 7, but not in Firefox or Safari.

To elaborate, I set a bottom margin on the last element on the page. IE ignored it and displayed the element flush with the bottom of the browser instead of showing a margin. When I added another item below it, it showed the margin, so it has something to do with being the last item on the page. This only happened in IE 6 and 7.

Solutions I thought of included setting a transparent border, increasing the height of the footer and setting padding on the body. The transparent border didn’t work in Firefox or IE. Increasing the height of the footer wouldn’t work because there was a bottom aligned background that needed to appear at a certain height. I felt that setting padding for the body was also not a good practice.

I tried everything I could think of to get around it. I ended up adding an empty div below the element and setting the height to what I wanted the margin to be. This worked. It was the best solution because all of the other things I could think of wouldn’t work because of the design constraints.

Layout Fix for Internet Explorer

A friend of mine, David Ross, just gave me a hot tip the other day. I have a lot of problems with layout in Internet Explorer 6 and 7, usually so much so that I have to have extra IE-only styles for the builds that I do.

David told me to make sure when you use floating divs that you use display: inline for Internet Explorer. That did the trick! I have way less problems with layout in IE now thanks to this tip.

CSS Bugs in IE 7

Okay, word on the street is that Internet Explorer 7 has already gained more browser market share since launching in January than Firefox currently has. This means that if you are not designing for IE 7, you should be. IE 6 still has the majority, but according to Microsoft, IE 7 is around 25% and growing. I believe this since I have actually seen statistics backing this up.

So, I am now checking all sites that I build in IE 7. And yes, I am discovering that, while IE 7 is a huge improvement over IE 6, it still has problems rendering CSS. So much so that on my latest project, I had to create 2 IE only stylesheets, one for IE 6 and one for IE 7.

If you are using Firefox, which I hope you are, you may know about the web developer toolbar for Firefox. This is an extension for Firefox that gives you tools to easily debug all kinds of problems with web pages. Today I found a similar tool to help debug IE 7 display problems.

IE 7 copied many of it’s new features from Firefox, including the ability to add third party plug-ins called add-ons. You can find a directory of these add-ons here. The Internet Explorer Developer Toolbar is similar to the web developer toolbar for Firefox. It is not nearly as easy to use or as functional, but it has many of the same functions and can be useful for debugging in IE 7. It is a big improvement over debugging for IE 6.

Incidentally, one thing I noticed is that while this add-on is free, Microsoft charges for many of the add-ons on this site. I saw some as high as $300. While I don’t necessarily agree with that, it could be very lucrative for developers, if you are so inclined. That is if Microsoft is sharing the revenue.

I also see how it could give Microsoft an edge over Firefox. If they are sharing revenue with developers to build extensions and Firefox is not, they could in theory build better extensions and take more market share away from Firefox. Somehow though, I don’t see many people paying for browser extensions, so maybe not.

Revised CSS Flyout Menus

Last month, I posted about a method to generate vertical multi-level suckerfish css dropdowns by revising the code from HTML Dog’s Son of Suckerfish. Well, this week I have been working to implement this code into a build that I am doing, and I figured out that my original css worked great in Firefox and Safari but not in Internet Explorer 6.

Looking at this in IE6, I saw there were gaps in the list items in the first and second tiers of the navigation, but not in the third. If you click on the example here in IE6, you should see what I am talking about. After much testing, it still does not make sense to me why that would happen in the first and second tiers but not in the third. But I basically figured out what is going on.

In IE6, although the nested lists are using position: absolute to remove them from the flow of the document, a 3px space appears at the bottom of each list item, where there should be no space at all unless a margin is being set.

To correct this, all I had to do was set margin-bottom: -3px for the specific list items in my IE6 only stylesheet. However, this creates another problem because as I said the problem only occured in the first two lists but not in the second nested list. So this fix causes the second nested list to be 3px shorter on every list item.

Luckily, all we have to do to correct this problem is reset margin-bottom: 0 in the list items of the second nested list in your IE6 only stylesheet. Now you will have flyout css menus that look as good in IE6 as they do in Firefox and Safari!

Simulating Position Fixed in IE

Good CSS designers know that one of the faults of Internet Explorer 6 is that it doesn’t recognize the CSS property position: fixed. This is a CSS property which allows one element on a page to remain stationary while the other element scrolls, resembling frames in a browser.

Our company launched a web site for Ty Pennington last fall. For this site, the footer, along with the transparent logo at the bottom of every page, not only needed to be stationary, but also always needed to align at the bottom of the page no matter how long the content or the browser window. This is a desgin challenge for any CSS designer.

Luckily, I found a kickass CSS hack that not only allowed me to simulate position: fixed in IE but also solve the other problem I had by always keeping the footer at the bottom of the page. It worked perfectly, but it currently breaks in IE 7. It may be fixable, but I haven’t taken a look at it yet to try and fix it.

Ty Pennington is a site we are really proud of. It uses lots of other tricks with Javascript and CSS to create a beautiful, branded work of art. So go on over there to see how it was done. Also click on the example above and bookmark it so you can do this in the future.

Active State Class

There is a current trend in web design I will call, “active state classes.” An active state describes a link in web page navigation that is a different color than the rest of the navigation signifying that the user is currently on that page or in that section of the web site.

Active states of links are created in the CSS of a site by assigning a class in CSS named “active.” You then give the class a different color than the rest of the navigation to make it stand out. Once the user navigates to that particular page, the “active” class is added to the link. So as the user navigates around the site, the current page or section is highlighted by the active class creating an active state.

Most current web designers and developers are aware of this trick. But, I was reminded of something this week while using this technique in my site design. This link state works differently across different browsers.

In styling links with CSS, there are 4 pseudo classes for each link state, link, visited, hover and active to which you can assign different styling. With Firefox on Windows and Mac, as well as Safari on Mac, you only need to specify one active class for the “link” pseudo class to make the active state work. This will not work in Internet Explorer 6. In IE 6, you need to specify the active class for all four link pseudo classes to make the active state work.

I am describing this technique here because I forgot to do this for all 4 pseudo classes. I then tried to figure out why it didn’t work in IE 6, until I looked at a previous site I had done. That is when I figured out what the problem was.

Note, I have not tested this in IE 7 yet. I am not testing my design in IE 7 yet. I only have one PC in my office, and I still have IE 6 installed on it, since it usually gives me the most trouble.