Question

Why is this table row 1px off?

Here is the debugger break pic, xhtml, css.

Basically I set my x dimensions to 450 px. However one row does not like this and breaks my whole table. Setting it to 449 px fixes the issue.

I still need to udate my columns widths from 105px to 150px.

Obviously setting it to 449px resolves the issue but I need to know why? Black magic?

<div class="Ab1_2">
  <form enctype="multipart/form-data" id="f0" method="post" action="">
    <div class="t1">
      <div class="t1_r1">
        <div class="t1_c1"><p class="c">Email</p></div>
        <div class="t1_c1"><p class="c">Password</p></div>
        <!-- <div class="t1_c2"><p class="c">Coming Soon <input class="cb" type="checkbox" name="f0a" value="value1"/></p></div> -->
      </div>
      <div class="t1_r2">
        <div class="t1_c1"><input class="te6" type="text" name="f0b"/></div>
        <div class="t1_c1"><input class="te6" type="password" name="f0c"/></div>
        <div class="t1_c2"><a id="f0d" href="javascript:void(0)" class='but'>Login</a></div>
      </div>
      <div class="t1_r3"><span id="f0e"></span>
      </div>
    </div>
  </form>
</div>

CSS

.t1
  {
  height:62px;
  width:450px;
  }
.t1_r1
  {
  height:15px;
  width:450px;
  }
.t1_r2
  {
  height:32px;
  width:449px;
  }
.t1_r3
  {
  height:17px;
  width:450px;
  }
.t1_c1
  {
  width:150px;
  float:left;
  }
.t1_c2
  {
  width:105px;
  float:left;
  }
input.te6
  {
  padding-top:5px;
  width:130px;
  height:20px;
  border:1px solid #bbbbbb;
  font-size:12px;
  }

Answer 1

This is the “incorrect” layout you’re getting:

[Row1Col1][Row1Col2]
                    [Row2Col1]
[Row2Col2][Row2Col3]

The reason you don’t see it when you set the row 2 width to 449px is that the [Row2Col1] element no longer fits on the same line as the [Row1Col1] and [Row1Col2] elements.

Fill each row with cells, or better still, clear the floats when starting a new row.