330512 - In <TD> tag, usage of VALIGN="CENTER" does not give desired results

Status: RESOLVED INVALID

(Firefox :: General, defect)

Description

[Andreas Reinicke]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050922 Firefox/1.0.7 (Ubuntu package 1.0.7)
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050922 Firefox/1.0.7 (Ubuntu package 1.0.7)

The following tag should display two buttons centered in a table-cell. In IE this looks just fine, but FireFox aligns the buttons to the top of the cell. (Horizontally they are centered, but not vertically!) It looks like valid HTML code to me!

<td ALIGN="CENTER" VALIGN="CENTER"><p><input type="button" value="Wijzigen" name="button_edit" onclick="javascript:location.href='filminputform.asp?id=204&mode=edit'"></P>    <P><input type="button" value="Verwijderen" name="button_delete" onclick="javascript:location.href='filminputform.asp?id=204&mode=delete'"></P></td>  

The supplied URL to this page will not display the buttons, as the buttons are only displayed to the mamager of the database and allow changing information.

For full reference here is the code for one complete table row including the buttons (just cut and paste to an empty html file to view the problem):

<table border=2>
  <tr valign=top>
    <td width="120"><img src=".\thumbs\001_-_an_unearthly_child.jpg"></td>
    <td><p><b>Doctor Who - 001 - An Uneartly Child</b><br>
    <em>1963 - Series/Sci-Fi - 100 min.</em></p>

    <table cellspacing=0 cellpadding=0>
      <tr><td><small>Regisseur:&nbsp;</small></td><td><small>Waris Hussein</small></td></tr>
      <tr><td><small>Schrijvers:&nbsp;</small></td><td><small>Anthony Coburn, C.E. Webber</small></td></tr>
      <tr><td><small>Acteurs:&nbsp;</small></td><td><small>William Hartnell, Carole Anne Ford</small></td></tr>
    </table>
    <p>Coal Hill School teachers Ian Chesterton and Barbara Wright are baffled by a teenage pupil of theirs, Susan Foreman. Brilliant in many subjects, atrocious in others, she has behaved strangely ever since she arrived at the school. One evening, their curiosity gets the better of them, and the teachers follow her home - to a junkyard that holds a battered Police Telephone Box. It is the key to an adventure that will change their lives forever.<BR>

&nbsp;<BR>
Following Susan into the yard they meet her grandfather, a mysterious old man who refuses to deal with their questions. But when they force their way into the Police Box, they discover that it is merely the disguise for an unimaginably advanced space and time machine - one that Susan's grandfather seems deterimed to activate...<BR>
&nbsp;<BR>
Hurtling through time into Earth's savage past, Ian and Barbara must rely on their wits to stay alive. But can the mysterious Dr. Foreman be trusted - and will he ever be able to return them to their rightful time and space?<BR>
&nbsp;<BR>
<EM><B>Niet ondertiteld!</B></EM></p></td>
    <td ALIGN="CENTER" VALIGN="CENTER"><p><input type="button" value="Wijzigen" name="button_edit" onclick="javascript:location.href='filminputform.asp?id=204&mode=edit'"></P>    <P><input type="button" value="Verwijderen" name="button_delete" onclick="javascript:location.href='filminputform.asp?id=204&mode=delete'"></P></td>  </tr>
</table>

Reproducible: Always

Steps to Reproduce:
1. Just visit the page, it's an HTML interpretation error

Actual Results:  
The buttons should be centeres horizontally AND vertically

Expected Results:  
The buttons are centered horizontally, but vertically they are aligned to the top of the cell.

Testing was done on a clean ubuntu 5.04 installation with no modifications!

Comment 1

[Philip Puryear]

"center" isn't a valid attribute for valign. You probably want "middle" instead. See http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.3.2

->INVALID

Comment 2

[Philip Puryear]

> isn't a valid attribute

That should be "value," not "attribute."

Comment 3

[Andreas Reinicke]

(In reply to comment #1)
> "center" isn't a valid attribute for valign. You probably want "middle"
> instead. See http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.3.2
> ->INVALID

You are absolutely right. That slightly changes the problem. According to w3c the value 'middle' should be the default value (perhaps that's why IE displays the page as was intended).

Comment 4

[Philip Puryear]

(In reply to comment #3)
> You are absolutely right. That slightly changes the problem. According to w3c
> the value 'middle' should be the default value (perhaps that's why IE displays
> the page as was intended).

Firefox's rendering is actually correct here. What's going on is that Firefox doesn't understand what "valign=center" means (because it's invalid markup), so it discards it and falls back to the "valign" value of the TD's parent element (in this case, the TR), which is specified in this line:

<tr valign=top>

Thus, the default value for the valign of every child (sub-element) of that TR becomes "top" instead of "middle," making the buttons in your testcase top-aligned instead of vertically centered. If you want the valign to be different in any of TR's children, you must explicitly state so.