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.

If you are thinking about setting up a blog, there are many good options out there. However, it is my opinion that Wordpress is the best blogging platform currently available. It is also one of the most widely used due to its robust features, extendability and ease of use.

If you decide to use Wordpress, there are 2 ways you can do it. You can use the free hosted version of Wordpress.com, or you can host it yourself. Both versions have their pros and cons. Ideally, you want to host your own copy of Wordpress to have the most flexibility. This is not for everyone though. If you are not up to the task of running your site yourself, the hosted version is the way to go.

Also, when you are starting out with a new blog, Wordpress.com is a big help due to the automatic domain authority you get from having a subdomain of Wordpress.com. This means you can instantly get good search engine rankings which drive traffic to your site. This is the main reason to set up a hosted version and quickly build up some decent traffic.

Let’s say that you do decide to go with Wordpress.com. What happens if you one day want to host your blog yourself? In that case, it is possible to transfer your blog to your own hosted version of Wordpress without losing any data or traffic.

The key to this is having your own domain. When you sign up for a Wordpress.com blog, your blog address will be a subdomain of wordpress.com, as in yourblog.wordpress.com. What you want to do is buy your own domain name and point it at your Wordpress.com blog. Wordpress.com allows you to do this for $10 a year, plus the cost of your domain. This works no matter when you set it up because Wordpress.com automatically redirects traffic from your wordpress.com subdomain to your custom domain, without having to do your own redirects.

Once your links and search engine results are pointing to your new domain, you should be able to transfer all your files to your new host. The second important part of this is importing all your Wordpress data into your new custom Wordpress setup. With Wordpress, this is very simple to do, and it will keep your url’s the same on your new site as they were on your old site. This is critical to making this work. You will also want to keep the same template so that your site appears to change as little as possible.

After your files and data are transferred, you can point your domain back at your new host. Also, Wordpress will redirect any traffic to your old blog to your new one as long as you have the custom domain active in your Wordpress settings. It’s that simple!

In case you didn’t know, there is a beta version of the Mac browser Safari available on Windows as of last year. I’m not sure why it is still in beta status as it has been out for awhile, and Safari 3 for Mac is now part of Tiger and Leopard and not in beta.

Anyway, if you are wanting to debug your HTML and CSS in Safari, you should have Web Inspector. Web Inspector is a debugging tool for Safari similar to the Firefox plugin, Firebug. Well, now that I am on a Windows machine at work, I installed Safari for Windows. So, I wondered if Web Inspector was available for Windows as well, and it is. Check out the directions for enabling it here. Basically, you edit your WebKitPreferences.plist file and add this line of code.

<key>WebKitDeveloperExtras</key>
<true/>

Restart Safari, and that’s it. To use Web Inspector, open any web page in Safari, and right click on any html element you wish to inspect. You should see an option for Inspect Element. Click that option, and Web Inspector will open on that element. That’s it.

So I ran across a nasty bug the other day in Internet Explorer 6 that I had never seen before. The bug is when you have 2 adjacent elements and one of them is floated, IE6 adds a 3 pixel margin to the floated element. You can read about it here on Position is Everything.

I ran a pretty thorough test on it to make sure that is what is occurring. I also tested every fix I could think of before coming up with one. The fix I came up with is to float the other element. This causes the 3 pixel margin to disappear. It doesn’t matter if you float it left or right, either works. Nothing else did.

Click on the following links for examples and source code of the bug and the fix. I realize that the float fix may not be ideal for all situations. It depends on how your site is laid out. That being said, it does work, although it may require you to redesign your site a little bit to apply this fix. It all depends on how bad you want it to work correctly in IE6.

So this is a bit off topic, but it’s personal blog. Deal with it. This is too important of an issue to not say anything about it. I’m always amazed to see how much disregard humans can have for their surroundings. This applies to many things, but in this case, I am talking about the environment.

Mountaintop removal is something I am hearing about for the first time, but now that I am aware of it, I am completely sickened by it. Mountaintop removal is a radical form of coal mining where entire mountains are literally blown up — devastating communities throughout Appalachia, polluting drinking water and destroying rivers. How can we do this to ourselves? Does no one realize the consequences of this?  If we allow this type of destruction to continue, there will be nothing left, and nature will be a memory.

Check out this site, http://www.ilovemountains.org/, and see this for yourself. See if a plant near you is using coal from mountaintop removal mines. Then, make others aware of it. I am guessing that most Americans have no idea this is going on. The more public awareness we can create the better chance we have of stopping it soon.

I am very close to it, being in East Tennessee. It is happening in Kentucky, and according to this site, the Bull Run Steam plant, which is near me, is using this type of coal. I really hope something can be done.

So this happened last week, and I’m just getting around to posting it, but it’s still a big deal. Firefox Beta 3 was released. You can download it here, and check out the release notes here. It’s noted that this is a test version and not recommended for public consumption. If you’re interested, check out the known issues so far.

Seems like there are still lots of bugs, so it’s probably not quite ready for release. Still, Beta is a good sign. I have only heard good things about version 3 so far. I can’t wait to test it, but I’m not quite ready to give it a try yet. If you find any bugs, be sure to report them.

Just when I was excited about the fact that Microsoft is starting to talk about IE8, this happens. At the same time, A List Apart published 2 articles, Aaron Gustafson talks at length about why this was done and Eric Meyer talks about why he thinks this is a good idea. Jeffrey Zeldman chimes in on his blog also about why this is a good idea.

The issue at hand is that Microsoft is introducing a meta tag that will allow developers to specify whether or not they want their site to be compatible with IE8 or not. Not including this meta tag will render the page in IE7 mode. First off, let me say that in my opinion, this is a bad idea no matter how you spin it. Releasing a new browser and requiring users to opt in to get the features provided by that browser just does not make sense to me at all. Also, how many developers will know to include this meta tag once IE8 is released?

After reading a lot of the explanations and reactions, I think the situation has a lot to do with knee jerk reactions and fear based reasoning, and this is why it is not good. According to Microsoft, when IE7 was released, sites that were not using web standards did not look good in it. Microsoft refers to this as “breaking” those web sites. They consider this a bad thing, so their knee jerk reaction to this is to have all future sites render in IE7 mode by default, unless you include a tag that tells it that you want it to render in whatever the current version of IE is. This is fear based reasoning.

I agree with a lot of what Meyer and Zeldman are saying as well, but again it seems like these are knee jerk reactions. Microsoft thinks that by supporting standards, they failed, so Microsoft’s support for web standards is in jeopardy. Well, we can’t let Microsoft take their ball and go home, so Meyer and Zeldman say that this is good thing lest Microsoft reconsider their support of standards. This comes across as being fear-based reasoning to me, in addition to Microsoft’s reason for adding this meta tag in the first place.

So to recap, requiring users to opt in to get the latest browser support is not good. Making decisions based on fear is not good either. Together these add up to a bad situation. So what options do we have at this point? Do we just accept it or is there a possibility that Microsoft will change its mind based on developer reaction?

Finally, here are some more things that stink about this. One, Microsoft acts like they were open about this decision when they were not. Two, Microsoft acts like this decision will benefit all browser vendors when it only benefits them.

Further Discussion:

• Original post on the IEBlog
• Aaron Gustafson’s reaction
• Eric Meyer’s reaction
• Jeffrey Zeldman’s reaction
• John Resig’s reaction (really good)
• Jeremy Keith’s reaction

Update: More updates on Microsoft’s browser version targeting came today. I really liked Eric Meyer’s follow up, even though I don’t agree with his conclusion. John Resig and Sam Ruby gave us an important piece of information, in that there is a way to get IE8 to render pages in the IE8 engine without using the meta tag. Safari said that they wouldn’t be version targeting anything. Roger Johansson tells us why version targeting is a bad idea. I’m sure there are lots more posts on the subject, and that developers will be discussing this one for a long time.

• Eric Meyer gives us more insight into his reasoning on the situation.
• John Resig comes back with more information, pointing out Sam Ruby’s post.
• Sam Ruby’s post on Doctype’s that will cause IE8 to render pages as IE8 without the IE meta tag.
• Safari lets us know that they won’t be implementing any meta tags or version targeting.
• Roger Johansson gives his point of view, and I agree with him.

As a web designer, you should make sure that you test your designs across all major browsers. Here is the list of browsers you should be testing on, if you aren’t already, in no particular order.

1. Internet Explorer 7
2. Internet Explorer 6
3. Firefox
4. Safari
5. Opera

Of those 5, I find that IE6 is the one that gives me the most trouble. I recently changed jobs which resulted in me having to come up with different ways to test in IE 6 and 7. At my previous job and in my house, I test different versions of IE on different computers. In my new job, I don’t have that luxury anymore, so I had to find a different way to test on one machine.

One option that was recommended to me was Multiple IEs. This is a program to use if you have IE 7 installed and want to install multiple versions of IE below version 7 that you can have running at the same time. I found that this didn’t work well enough for me. The reason is that running IE 6 through Multiple IEs is not stable. Also, you can’t use the IE Developer Toolbar with IE6 in Multiple IEs. Since IE 6 is the main browser I debug in besides Firefox, I found that I had to find a way to have IE 6 running as the main IE version on that machine.

Another solution that was recommended to me was Virtual PC. Virtual PC for Windows allows you to have another versions of Windows running on your PC. This way you can have different versions of IE running at the same time. Plus, Virtual PC is now a free download from Microsoft.

So I decided to uninstall IE 7 and reinstall IE 6. This allowed me to have a stable version on IE 6 running with the IE Developer Toolbar. I then installed Virtual PC. Microsoft has also made a Virtual PC hard disk image with an evaluation version of Windows XP with IE6 or 7 available as a free download which you will need to run IE on Virtual PC. Keep in mind, this version has an expiration date of April 1, 2008.

Once I had that installed I was able to run Virtual PC with XP and IE 7 on Windows while running IE 6 at the same time. You can also install the IE Developer Toolbar in Virtual PC. In fact, Microsoft includes the developer toolbar with this version of the hard disk image. I found this to be the best solution so far for having multiple versions of IE running on the same machine. Not surprisingly, this is the same method that Microsoft itself endorses. Which method do you prefer?

Now that I am leaving, I was trying to count how many sites I have worked on recently that have not launched yet. There are four.

1. WDVX
2. Roane Alliance, Chamber and Tourism
3. Edgewater Hotel
4. Structural Strategies

These are sites that I completed builds for that are stalled for one reason or another. I am watching to see when they launch. Once they do I’ll add them to my work page here. I doubt that any of these will launch before the end of the year. We’ll see what happens next year.

Update - 1/23/08: It turns out, WDVX launched this month.