Forum Moderators: open
<table border='1' width="100%">
<tr>
<td width="15%" height="5px" valign="bottom" style="text-align:right;"><font size="4px" color="black">Name: </font></td>
<td width="15%" height="5px" style="text-align:left;">1</td>
<td width="70%" height="100%" style="text-align:center;" rowspan="4"><embed video here></embed> </td>
</tr>
<tr>
<td height="5px" valign="bottom" style="text-align:right;"><font size="4px" color="black">Location: </font></td>
<td height="5px" style="text-align:left;">Town</td>
</tr>
<tr>
<td height="5px" valign="bottom" style="text-align:right;"><font size="4px" color="black">Price: </font></td>
<td height="5px" style="text-align:left;"> $55.00</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Now, in FF it shows the 3 fields Name, Location, and Price all right under each other like this:
Name:1
Location:Town
Price:$55.00
But in IE the fields are spread out evenly within the table:
Name:1
Location:Town
Price:$55.00
Next to the fields I have a video which is in a cell with rowspan of 4. I have a blank field under price so that it may expand as the video size gets bigger. I want it too look the way it does in FF, all right under each other. Im not sure what could be the problem. Does anyone know?
Try previewing your code in FF with Html Tidy code validator installed. It will show non compliance and take into account your DTD.
<table border='1' width="100%">
<tr>
<td width="15%" height="5" valign="bottom" style="text-align:right;"><font size="4" color="black">Name: </font></td>
<td width="15%" height="5" style="text-align:left;">1</td>
<td width="70%" height="100%" style="text-align:center;" rowspan="4"><embed></embed></td>
</tr>
<tr>
<td height="5" valign="bottom" style="text-align:right;"><font size="4" color="black">Location: </font></td>
<td height="5" style="text-align:left;">Town</td>
</tr>
<tr>
<td height="5" valign="bottom" style="text-align:right;"><font size="4" color="black">Price: </font></td>
<td height="5" style="text-align:left;">$55.00</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
One way to get IE to do what you need is to nest a second table in the first column to hold your text data, and make that column "vertical-align:top".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Table Cell Test</title>
</head>
<body>
<table border=1 width="100%">
<tr>
<td style="vertical-align:top;"><!--nested table begins-->
<table border=1>
<tr>
<td width="15%" style="text-align:right;">Name:</td>
<td width="15%" style="text-align:left;">1</td>
</tr>
<tr>
<td style="text-align:right;">Location:</td>
<td style="text-align:left;">Town</td>
</tr>
<tr>
<td style="text-align:right;">Price:</td>
<td style="text-align:left;">$55.00</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<!--nested table ends--></td>
<td style="text-align:center;"><img src="s.gif" width="400" height="400"></td></tr>
</table>
</body>
</html>
