Disappearing banner image in IE8

The top banner has been displaying correctly for weeks. Yesterday, it suddenly disappeared in IE8. Something has changed in IE or in the underlying template code, because the image would appear and then rounded corners would kick in for IE8, something that has never happened in the past. After that happened, the banner background disappeared. There were also some errors with "DNS, JavaScript, and Amazon" in them that went by too fast to read.

I spent many hours trying to fix this, and finally succeeded, but I lost a day I needed to spend on something else.

First, I removed all Amazon and Google scripted widgets. That sped up refreshing the page, but did not help. I tried every trick in the book for giving an element "hasLayout" in IE, with only partial success. I finally resorted to a slightly more complex solution because of the background image bug that arrived with rounded corners in IE8.

I don't have time to share much detail about the fix right now, but will do so in the near future. Those not dealing with rounded corners may not have the same problem if using my instructions for adding the blog title and description along with a header image.

Blogger in Draft recently announced that it has implemented a bug fix for new templates with the IE8 rounded corners and disappearing background problem. Unless you have made extensive customizations to your template, the quickest fix is a fresh download of the newest version. I have added enough stuff to my template to make that inadvisable, but I'm going to check it out.

My pre-bugfix solution was to move the banner image to a new div of the same width and height as the image, but as a background. This div encloses the home page anchor, which becomes an empty link instead of an image link, but remains a centered block element of the same height as the enclosing div. The width of the anchor tag is 40px less than the div because it "pushes out" the rounded corners in some browsers if left at 100%. Finally, IE8 has a tendency to close up empty anchor tags even if they are block elements with a known width and height, so I added a discrete period/dot as the display text to prevent that. Double urgh!