Tuesday, October 30, 2007

An (almost stupid) idea on an old CSS bug

So I was compiling a list of known CSS bugs during my downtime at work, and one that sorta caught my attention was the one about form elements inheriting margins from parent elements that have layout (which, incidentally, I have never run into myself).

Here's a sample code derived from P.I.E., which will cause a margin of 100px to show to the left of the input element in IE:

.login {background-color:#eee;margin-left:100px;padding:10px;width:30em;}
<form action="ignore">
 <div class="login">
  Username:<br>
  <input type="text"><br>
 </div>
</form>
Now, wouldn't it make more sense to just have done this to begin with?
.login {background-color:#eee;margin-left:100px;padding:10px;width:30em;}
.login label {display:block;}
<form action="ignore">
 <div class="login">
  <label>Username:</label>
  <input type="text">
 </div>
</form>