PNG Not a Good Fit for the Web Afterall

Okay, I bought into the hype of the PNG format. I admit that on the surface, PNG is a superior format for the web versus JPEG and GIF.

There’s one problem. If you use PNG graphics with JPEG or GIF or CSS colors, the colors do not match up. This means if you use a PNG over a JPEG or colored backgound that is the same color as the PNG, the color will not look the same. This is a problem for me. So much so that I have stopped using PNGs in my designs. They only way I can use them is if the color matching is not a problem.

Also, PNG transparency is not supported in IE6. This is not such a problem because there is a workaround. But it is annoying and IE6 is still the most used browser in the world.

I found out that the reason PNG graphics do not mix with other formats is due to gamma correction. One solution is to remove the gamma information. GammaSlamma is a program for the Mac OS that does this. However, this does not work in all browsers.

I was happy to use PNGs until I figured out the problems with it. Until the technology catches up, I am still stuck using outdated graphic formats whether I want to or not.

Browser Version Market Share for September 2007

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.

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.

On Using Reset Styles

I don’t usually do link posts, but I thought in this instance it was worth mentioning. I recently discovered 2 posts on Eric Meyer’s blog dealing with reset styles. So what are reset styles and why do we need to use them? For that, read Eric’s post, Reset Reasoning. In this post, Reset Reloaded, Eric lists exactly what his reset styles are so you can use them.

I think that Eric is right in using them. It does seem like reset styles are a better alternative than using a universal selector to remove margins and padding because, as Eric says, the universal selector removes padding and margins from everything. There are some cases where you might not want to do this, such as form elements.

I think I am going to give reset styles a try. How about you?

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.

Wal-Mart Does Not Support Firefox

On Tuesday of this week, Michael Arrington of TechCrunch pointed out on the TechCrunch blog that Wal-Mart had mistakes in the code of their brand new video site that prevented the CSS from loading in Firefox. The blog post has a screenshot of what it looked like. It would appear that whoever designed the site did not even check it in Firefox before launch, and reportedly the mistakes were easily fixable.

Well, today I just went to the site and found something that you will not believe. Not only has Wal-Mart not fixed the site, they put in a browser sniffer to shut all other browsers, except IE, out completely. Now if you go to the site, http://www.walmart.com/videodownloads, you see this message:

Our website requires the browser Internet Explorer version 6 or higher. It appears that you are using Firefox, Safari, or another browser that Wal-Mart Video Downloads doesn’t currently support.

So, rather than fix their mistake, which was apparently easily fixable, they decide to just say screw it and support no other browsers except Microsoft? I guess I should expect this from them, but come on. Wal-Mart is not living in the stone ages here. They are trying to compete with the likes of Netflix and iTunes. This is in effect a slap in the face to Firefox and Safari users, who in fact just might be the types of people that would use an online video downloading service, the very people you would think they would be trying to target.

Maybe the question we should be asking here is Wal-Mart somehow in bed with Microsoft on this?

Update: It appears Wal-Mart has taken the site down altogether. Now if you go to the site it says,

Site Temporarily Unavailable
The Wal-Mart Video Downloads store is currently unavailable due to temporary site maintenance. We apologize for any inconvenience.

Please try again later.

It looks like all this attention provoked some action on their part. It will be interesting to see how this plays out.

Update 2: Now it’s back to what it said at first when you look at it in Firefox.

Unsupported Browser
We’re sorry …
Our website requires the browser Internet Explorer version 6 or higher. It appears that you are using Firefox, Safari, or another browser that Wal-Mart Video Downloads doesn’t currently support. Click here to get Internet Explorer for free from Microsoft.

Thank You

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.