CSS Bug: IE6 Div Height Less than Line-Height

I had developed a site for a client recently using css positioning for the layout. I was pleased upon completion, that the site did not differ greatly between Mozilla 2.0, IE7, and Opera 9.1. So I finished the site, uploaded it to production and notified the client it was complete.

A week passes by, my client contacts me and says that the website did not look right. I said ok, what browser are you using? IE6. Hrmm.. He stated that the logo had a blue background and that the text was overlapping. I was surprised. So, first I had to view the site in IE6. Both my desktop and laptop had IE7, so I had to resort to my 4 year old daughters computer which I had remember I had not upgraded to IE7. Wow he was right, so I investigated.

I discovered 2 things. The logo did have a slight blue background and where I had used a div to provide a spacer or a dividing line, it displayed in IE6 as 1 standard line in height. So I researched.

I found that IE6 does not support transparent background for .png images which explains the aqua colored background. I changed the image to a .jpg and that resolved that problem.

Next, I learned that when you have an empty div tag, IE6 inserts an empty text-element. So even thought there is no text, it is viewing as if there is an &NBSP in the div.

The workaround:
There are two really. You can use CSS to set the line-height:0px. Or you can enter a html comment into the div tag. I opted for the html comment, and it worked flawlessly.