Today I came across a CSS bug that I had never seen before. Apparently, in IE6/7 there are circumstances under which certain form elements will inherit the margin of the tag they appear in. In my case, I had a contact form where each element was inside a paragraph tag with a left margin of 85 pixels and a grey background. In Firefox and Opera, the form appeared correctly, but here’s how things looked in IE:

Fortunately there is a thread at Webmaster World that explains the phenomenon pretty well, and has several ways to address the problem. I was able to get all browsers to render the page like this:

I’ve been building sites long enough that it isn’t very often I come across a CSS glitch that I’ve never seen before.

filed under: Web Development