IE compatibility

[lee]

I have been working on a site for about 6 weeks and am nearly finished. It looks great and works perfectly in all modern browsers. It may have been a bad idea to leave this for last, but the only thing I have left to do is make my site compatible with older versions of IE. I’m not going to bother with IE6, as it accounts for less than 1% of US traffic now and this site won’t be viewed in other countries. I’m starting with IE7, which I am testing on Vista which I am running virtually on VMware Fusion.

There are several glaring CSS issues that pop up with IE7, but nothing I don’t know how to fix. I know I need to use some conditional CSS stylesheets, but am still unclear on the best way to go about this. Any good resources would be greatly appreciated here.

My other issue is when I open my site in IE7, I get a prompt about harmful scripts and ActiveX controls and I have to choose to allow that content to load. I’m assuming this is happening because of the Javascript I’m using (for a slideshow and for tabbed navigation). How do I get around this? I know a lot of people will see this message and be scared off and then won’t be able to see a lot of content on the site.

[Senff]

I am still a fan of creating code that works in ALL browsers, and don’t usually create code only to “fix” it with conditional stylesheets. In 95% of all cases, things can be fixed in the general code without the need for IE-specific stylesheets (the other 5% is usually positioning of form items such as radio buttons and such).

But having said that… Here’s some codes you can use if you really want to use conditional stylesheets:

As for the prompt you get — this is only because you’re running things from your local system. Once your site is on a server, those messages will not appear. I think you can disable it for your own convenience by going to Settings – Internet Options – Advanced – Allow active content to run in files on My Computer.

[lee]

Thanks. I would prefer to just have a single stylesheet that works in all browsers, but was going off of Chris Coyier’s advice in this article. I also haven’t yet tested in older versions of Firefox, Chrome, Safari and Opera—is that worth my time?

And good to know about the prompt, that makes me feel better. Out of curiosity, should I be worried about users that may have javascript disabled? Or are they a pretty small minority?

[Senff]

Chris’ article is great, but if your code is good compatible enough for IE and all other browsers, it’s unnecessary.

Unless you want to make sure that 100% of your visitors are able to visit your site (and 98% is not enough) I would not worry about users that have no Javascript, or older versions of Firefox/Chrome/Safari/Opera.

[lee]

Gotcha. I’ve tried to make my code as clean and compatible as possible, but this is my first complete site, so I’m still learning a lot as I go. I am not really concerned about 100% of visitors, but just as a fallback, is there any way to redirect to the old (current) version of the site if someone is using an outdated browser? My clients would be pissed if someone calls saying they can’t see the website.

I get two main problems with IE7. The first is it seems to interpret a lot of margins and padding differently than newer browsers. That seems easy enough to adjust. The other is I am using this method for a few image links on my site. The images I’m using are high-res and scaled using the background-size property so that they are the correct size but look sharp on iPhone and iPad retina displays. IE7 does not understand this background-size property, so the images are scaled completely wrong. Any thoughts on a good solution?

I am using this CSS Browser Selector javascript for a few minor fixes with Firefox and Opera. I could easily use this to fix the IE7 problems—but is this a terrible idea?

Thanks again.

[Senff]

In general, IE7 doesn’t usually interpret margins and padding differently than other browsers, so there must be something else wrong there (IE6 does have issues with it, though).

If you resize your images before they are used as sprites using the method you linked to, then right, it will simply not work in IE7. If you need a fix for that, you could just resize the images manually and then use those smaller versions. But, since you have to (want to) do that anyway to serve IE7 users, you might as well do that for everyone, and so not use background resize in the first place. If that makes sense.

Using that CSS Browser Selector I wouldn’t call a terrible fix…but again, I personally prefer to use code that works in all browsers without the need for any fixes. :)

[lee]

Awesome thanks. This pretty much answers all the questions I had. Not sure where the margin/padding issue is coming from, must be something in my code. I am going to go with the CSS Browser Selector for now since I’m on a pretty tight deadline to get this finished, but on future projects I will build from the ground up with code compatible across all browsers.

I’ll probably post a link to the site once I’ve got it up just to get some feedback. I only started learning HTML/CSS in December, so it’s exciting to be so close to a finished project. Thanks again.

[Author]

Posts