After I put up my new site design last week there was one glitch that was driving me nuts. In Internet Explorer only, the menu border displayed fine on my site, but in my blog the menu was missing most of the top border. The site looked fine in Firefox and others, but in IE there was whitespace where there should have been border.
I Googled the problem many different ways and I found lots of people with IE borders “issues”, but no solution that helped until I tried “border doesn’t display in ie” and got to page 5. The post on hellorobot.org called “IE’s Disappearing, Reappearing, Broken Borders” was a lifesaver.
Apparently the problem is that Microsoft, even though they give it lip service, doesn’t care about standards (I know, you’re probably shocked). They have their own attribute called “layout” which was hiding part of my border. I had never even heard of such a thing before, but it is explained in another post mentioned called “On having layout“. Apparently there are several elements that have layout by themselves along with some different combination of elements that add it as well.
It turns out that there is a simple solution of adding “zoom:1” to my CSS for that element that fixes the problem, but since zoom is not a valid CSS property, the CSS for my blog will not validate. I think I would rather have it look and work well in all browsers rather than having it validate, but why should I have to choose? Microsoft and IE, WOW!