Internet Explorer 6 (IE6) has extra white space gap after a empty, fixed size div with a background-image

I was trying to fix a small display issue with one of our pages in IE6. I had an unordered list that we set the background color on and wanted to add rounded images to the top and bottom to give it a nice look.

The rounded top image

The HTML

<div class="container">
   <div style="height: 6px; width: 190px; background-image: url(../images/top.gif); background-repeat: no-repeat;">
   </div>
   <ul style="background-color:#763000;">
       <li><a href="#">Item 1</a></li>
       <li><a href="#">Item 2</a></li>
       <li><a href="#">Item 3</a></li>
   </ul>
   <div style="height: 6px; width: 190px; background-image: url(../images/bottom.gif); background-repeat: no-repeat;">
   </div>
</div>

Simple enough. Everything works great in IE7, Firefox, Chrome, etc... I get a report of extra white space after the top rounded image. I track down a system running Windows XP with IE6 and I fire it up. Sure enough, a bit of white space after the top div. But why....

The Problem

I tried everything that seemed to make sense. Checked margins, padding, etc... Everything was either good or changing it did nothing. Unfortunately in IE6 I didn't have access to my favorite tools like Firebug, so it was even more frustrating. Eventually I figured it out and I think I know what's going on.

IE6 assumes a font-size of 20px. Since my background-image was only 6px in height, when I set the height on the div it was ignored. The div would try to shrink to my set height, but would end up limited by the assumed font-size of 20px. By setting the font-size to something smaller in height than my desired 6px, it would solve the problem. Remember this when dealing with empty divs IE6. Hope it helps someone.

The HTML that works

By setting the font-size style in the "empty" div, IE6 allows the div to shrink to my desired height of 6px.

<div class="container">
   <div style="height: 6px; font-size:0em; width: 190px; background-image: url(../images/top.gif); background-repeat: no-repeat;">
   </div>
   <ul style="background-color:#763000;">
       <li><a href="#">Item 1</a></li>
       <li><a href="#">Item 2</a></li>
       <li><a href="#">Item 3</a></li>
   </ul>
   <div style="height: 6px; font-size:0em; width: 190px; background-image: url(../images/bottom.gif); background-repeat: no-repeat;">
   </div>
</div>

Google's Chrome displays saved passwords in plain text

Google's new web browser "Chrome" is pretty nice. I used it for a full day and found quite a few things that I really liked about it. As soon as the few plug-ins that I use daily get equivalents in Chrome, I will possibly use it for every day use. I was sad to learn that one of my biggest web browser pet-peeves is present in Chrome, and it seems to be an even worse implementation of it than Firefox 3's (Firefox 3 Saved Password Security.)

The Saved Password feature of any browser can be invaluable. It saves a great deal of time for passwords that you would otherwise have to enter many times a day. Unfortunately, most web browser make it WAY too easy to gain access to the web site URL, username and plain-text passwords to your accounts. Someone with only a few minutes access to your machine can easily gain access to this information.

In Google's Chrome, all someone (with several seconds alone with your computer) needs to do to steal your information is...

1. Open Chrome
2. Click customize(the wrench)
3. Select Option
4. Click the Minor Tweaks tab
5. Click Show saved passwords
6. Select one of your "secure" sites
7. Click Show password

BAM! Someone just stole the web site address, username and password to one of your accounts? I hope it wasn't something important... In Firefox's defense, at least they have a "Master Password" that will require you to enter a password prior to them showing your passwords in plain-text. But no such feature is present in Chrome.

I'm always blown away by people's responses to this problem. People that I show in person are usually shocked when we're both staring at their bank account password in plain-text right before their eyes. People online usually say that no one ever has access to their computer, so their safe, or that they always lock their system when they're away. That's a great practice to get into, but I know the vast majority of users aren't so diligent.

At the very least, the Chrome team needs to add a master password for an added layer of security. I think both Firefox and Chrome should warn the user about this danger and prompt them to setup a master password by default, rather than having saved passwords turned on by default.