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.

Today I learned that there is a “nowrap” equivalent in CSS. Nowrap is an attribute of the td or th tag that is deprecated in HTML 4.01. Nowrap tells the table cell not to automatically wrap the text contained in the cell.

The CSS 2.1 specification has a property called “white-space.” One of the values of white-space is nowrap. I tested this property, and it works the same as nowrap does. I also confirmed that it works in IE6, IE7 and Firefox 2.

So, if text automatically wrapping is a problem for you, don’t use “nowrap” because it is deprecated. Instead use the white-space property, with nowrap for the value. I added the property as an inline style rather than in the stylesheet, so that I didn’t have to create another class and I can use it only where it is needed. How you use it is up to you.

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.

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.

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?

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.

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.

Ever want to use dropdowns, but you can’t because a Flash animation underneath the dropdowns shows through? We had this problem on multiple occasions. There is a simple solution. Make the Flash transparent by setting wmode=transparent in the code. Works every time.

I’m not sure if this will work with sIFR or not, or if sIFR even causes this problem, but I would recommend trying that first if you are stuck. You can set wmode to transparent in sIFR by adding wmode:"transparent" to the sIFR parameters.

Okay, the other day I was trying to use font-variant: small-caps and I could not get it to work. This sent me off on a wild goose chase of sorts because, as it turns out, I was also using text-transform: uppercase. Needless to say, the two don’t work together as text-transform: uppercase seems to override font-variant: small-caps in every browser I tried.

But, I noticed that I could not find any examples of what it looks like and what fonts it works with. So, I decided to do a blog post about it. Below, you will find several examples of this property in use with the basic web fonts.

Arial normally
Arial in small caps

Verdana normally
Verdana in small caps

Times New Roman normally
Times New Roman in small caps

Georgia normally
Georgia in small caps

One thing that you notice that it only capitalizes the letters that are already capitalized. For some reason, I thought that it capitalized the first letter in every word.

So there you go. It does work with basic web fonts Arial, Verdana, Times New Roman and Georgia. Do you have any more examples of which fonts this will work with?