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.

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!

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

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.

I set out recently to learn how to create forms that utilized standards better. The first thing I learned was that I was not using a very important tag that actually helps make forms more accessible. Accessible forms mean forms that are easier to navigate for those with disabilities. To create a form that is accessible, all you need is 1 tag, label.

The label tag makes this possible by associating text specifically with a form field. To do this use the label tag including the attribute for. The value of for should be the id of the form field. That’s it. Then, all you have to do is make sure you use the label tag for all the fields in your form. This will make your forms easier to navigate for screen readers because it knows which fields to associate with which text.

Other tags you can use include fieldset and legend. Fieldset is used to group a set of fields together while legend is used to give that fieldset a title.

For specific examples of correct usage of these tags, see this post on HTML Dog on accessible forms.

The second part of this is how I learned the best way to structurally markup forms. I was looking for a way to markup a form using CSS and not tables. After experimenting a bit, I learned it is best to use tables for now and to use CSS to style the tables. There is just no way to do it and maintain cross browser compatibility without using tables. I think the reason is that there is so much variance in how browsers display form fields.

Using tables to structurally markup forms, CSS to style the forms, while using label to make them more accessible, allows you to create accessible forms that look the same across all major browsers.

One thing I always have had trouble with in building web pages with CSS is setting the “z-index” property. In CSS, the “z-index” is the stacking order on the page. It makes sense if you think of it as adding a third dimension to the web page.

I run into the problem often where I need an element to load on top of another element, and they always seem to want to load in the opposite order. Many times I have tried to change the z-index without much success. So much so, that I gave up trying to use it.

Well, I finally figured out what I have been doing incorrectly all this time. To get z-index to work, both elements have to have the same parent. What this means is that if two elements have different parents you cannot change the z-index relative to each other by setting the z-index for those elements. You have to change the z-index of the parent element.

Duh! Solving this problem is a major help to me though because now I can correctly set the z-index and solve a lot of CSS design problems I have been having.

I ran across this blog post today from Campaign Monitor about how Microsoft is taking email design back 5 years. Microsoft Outlook 2007 was released yesterday as part of Microsoft Office 2007, which is being released at the same time as Windows Vista, Microsoft’s new operating system.

According to the blog post, Outlook is going from using the Internet Explorer rendering engine to using the Microsoft Word rendering engine to display e-mails. The reasoning behind this is that Outlook uses Word to compose e-mails. Using Word to display e-mails ensures that the e-mail will look the same across all versions of Outlook 2007. Smart, huh?

Calling this colossal stupidity on Microsoft’s part is an understatement. Although it doesn’t surprise me in the least. Microsoft is not known for their support of standards. This genius move ensures that using CSS based layout for e-mail design will make it break in Outlook 2007 due to lack of support for any CSS except inline styles.

If you are an e-mail designer, you need to read the article to find out how this will affect you. In short, it looks like table based layout will be the way to go to ensure your e-mail will display properly in Outlook 2007.

After thinking about it though, it may not be as bad as it seems, for a while anyway. Most users of Microsoft Office will not upgrade right away. Those that do may not even use Outlook. I don’t use it, but I do use Office. The downside is that Microsoft has ensured that this will continue for years to come. Because when people do eventually upgrade, they will get Office 2007, even if it takes years.

Wow, 2 posts in a row about validation. This post is about CSS validation because I decided to break the last post into 2 parts. Yesterday, I was having difficulty working on a site I did not build. So, I decided to run the CSS through a validating tool to see if there were any problems.

Not surprisingly, there were some. What was surprising is that using different validation tools gave me different answers. First, I ran my code through this tool by the W3C for CSS Validation. This report indicated I had 3 errors in my code and gave me 7 warnings.

Then, I ran my code through this tool also by the W3C for CSS Validation, although technically it is for any markup validation. This report only indacted one error. But, it did allow me more options for checking the CSS.

After comparing the 2 validators rather briefly and unscientifically, I think you are better off using a tool specific for CSS validation, like the first one. You will more than likely get better results that way.

If you are a designer and you haven’t heard of script.aculo.us, surely you have heard of Ajax. Even so, you may be surprised to learn that script.aculo.us and Ajax are not the same thing.

I have heard of both Ajax and script.aculo.us, but I thought that they were the same thing. I have seen both of them in use on sites that Mediapulse designed, but I have never used them myself. Well, once I learned recently that script.aculo.us is not Ajax and it is very easy to use, I decided to give it a try on a site that I am working on.

It turns out it is very easy to implement some cool looking effects with script.aculo.us. If you don’t believe me, take a look at 4 easy steps to script.aculo.us, and then take a look at the effects you can do with script.aculo.us.

The effect I found the most practical so far is the “toggle” effect. The toggle effect allows you to hide and reveal an object by clicking the object. You can also combine the toggle effect with any of the other visual effects. The visual effect I find the most practical for this is the “blind up” and “blind down” effect. You can even modify settings on these effects, like speed of movement.

In using these effects though, I have some tips to help you get the best performance out of these effects for your users. For the toggle effect, you can make a div clickable to reveal or hide another div on the page. I learned that by doing this, you do not need to add a link because the div itself acts as the button. The only problem is that because it is not actually a link, the cursor will not change to a hand when you mouse over it, so the user may not automatically recognize that it is clickable.

You can solve this problem through CSS. There is a CSS property, called “cursor,” you can set to “pointer” for any object. This means that whenever the user mouses over that object, the cursor turns to a hand, and lets the user know that object is clickable.

Now you have an object that looks and acts like a link and when clicked can reveal another object on the page with cool motion or animated effects. I recommend not waiting, like I did, and trying out script.aculo.us effects on your sites today! I don’t think you will be dissappointed.

I highly recommend adding sIFR to your web site, if it is appropriate. I have to admit for a long time I didn’t like it. But, sometimes adding nice looking typography to your site can really make it pop in a way that you can only do with Flash or images. So, the more I use sIFR, the more I like it, and the more I use it, the more I understand how it works. If you don’t know what sIFR is or what it does, please check out Mike Davidson’s sIFR site.

sIFR works by using Javascript and the Flash player to replace headlines in your web page with nicely styled fonts in Flash. If you are a novice to sIFR, there are certain tricks to using it that can greatly enhance your implementation. I won’t go into all of them here, but I will talk about turning off your underlying headlines in sIFR.

When you have sIFR installed on your site, sometimes you tend to notice the unstyled underlying text show up briefly before being replaced by Flash. If you have this problem, you will want to eliminate it to get the best user experience possible. It has a kind of jarring effect when you see the font change suddenly like that, so it is best to avoid it.

The creators have provided a way to turn this off so that you will only see the Flash fonts load when the page loads. You can do this by adding a stylesheet to your header called “sIFR-screen.css.” If you do this, then your headlines should not show by default. This works by creating default styles for your headlines with the class “.sIFR-hasFlash.” All headlines are then set to “hidden” so they will not be displayed if you have javascript and Flash 7 installed. The genius is that is you don’t have javascript or Flash 7 running, the normal unstyled headlines will still be visible.

However, you may want to modify the code if you are only replacing a certain group of headlines, and not all of them at once. You can do this by adding an id to your headers and then adding the id to the header style in your sIFR stylesheet.

I need to warn you here, not to remove the “hasFlash” class from your header styles. If you do this, the headlines will not show up when javascript is not running or you have a version lower than Flash 7. This may be rare, but you can modify the sIFR script to work only with Flash 8, like I did here. I made this mistake, which is how I know you need it.

So in closing, make sure you turn off the underlying headlines when using sIFR. Also, be sure to test your work with Javascript turned off, to make sure those users who have javascript turned off or don’t have the right Flash player can still see your headlines.