Aust Aust - 1 month ago 12
HTML Question

How come colspan breaks in Firefox?

I have my table for a simple login page. I'm not stuck on this because I know I could just break my table apart and get the styling another way, but it seems like colspan is broken in Firefox.

HTML

<table>
<tbody>
<tr>
<td>E-mail:</td>
<td colspan="2">
<input type="textbox" name="email">
</td>
</tr>
<tr>
<td>Password:</td>
<td colspan="2">
<input type="password" name="password">
</td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="Login">
</td>
</tr>
<tr>
<td colspan="2">Forgot your password?</td>
<td style="width: 70px;"><a href="reset.php">Reset It</a>
</td>
</tr>
<tr>
<td colspan="2">Don't Have an Account?</td>
<td><a href="create.php">Make One</a>
</td>
</tr>
</tbody>
</table>


CSS

table {
width: 250px;
}
td:last-child {
text-align: right;
}


Here is a jsFiddle for my table. Viewing this table in Chrome or IE you can see what I'm trying to do which is to get the input boxes for the email and password to overlap the words "Forgot your Password" and "Don't have an Account". So the colspan should make those overlap which it does in chrome and IE, but not in Firefox. How come it fails in Firefox?

Answer

In my opinion, Firefox is displaying it correctly. The text overflows in IE and Chrome. You need to actually have 3 columns for your colspans to work:

<table>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
...
Comments