HTML problem in IE, please help (colspan).

yuppie · 10-12-2006, 03:51 AM

Please open the below code in IE and FF.

Code:

<html>
<body>
   <table style="width:50%; border-collapse:collapse;" border="1">
	<tr style="height:25px;">
	    <td>data</td>
            <td style="width:70px;">data2</td>
	</tr>
        <tr style="height:25px;">
	    <td colspan="2" bgcolor="#CCCCCC" align="right">A very long footer name, longer than 70px;</td>
	</tr>
   </table>
</body>
</html>

As you can see FF shows the right column correctly (its width=70px), whereas IE ignores "width" property and extends the column width

If you set the footer text to something like "Test", then both browsers behaves as expected.

Does anybody have a solution to this?

Dan · 10-12-2006, 05:28 AM

Code:

<html>
<body>
   <table style="width:50%; border-collapse:collapse;" border="1">
	<tr style="height:25px;">
	    <td>data</td>
            <td style="width:70px;">data2</td>
	</tr>
        <tr style="height:25px;">
			<td></td>
			<td colspan="2" bgcolor="#CCCCCC" align="right" style="width: 70px;">A very long footer name, longer than 70px;</td>
		</tr>
   </table>
</body>
</html>

yuppie · 10-12-2006, 05:53 AM

Dan,

Your solution doesn't work:
1. I don't understand for what you put empty "<td></td>" in the footer
2. Adding "width:70px;" to the footer style helps to keep the proper width of the "data" cell, but the footer itself becomes splitted in several lines, since it's width becomes exacty 70px, but I need the width of the footer be as long as the table itself.

xemiterx · 10-12-2006, 08:45 AM

Some ideas

If you loose the 50% width of the table and go to a fixed width (say 600px) and then specify a width for the first cell (530px in this example) that would work.

Or, keep the 50% width, and set the width of the first cell to 100%. That will make the data2 cell shrink below 70px, to keep that from happening you would have to insert a 70px wide image in the data2 cell.

Not using tables and using pure css is probably the best answer.

Good luck.

10-12-2006, 03:51 AM	#1 (permalink)
yuppie NamePros Regular Join Date: Apr 2006 Location: http://www.teamtesting.com Posts: 542 1,434.00 NP$ (Donate)	HTML problem in IE, please help (colspan). Please open the below code in IE and FF. Code: <html> <body> <table style="width:50%; border-collapse:collapse;" border="1"> <tr style="height:25px;"> <td>data</td> <td style="width:70px;">data2</td> </tr> <tr style="height:25px;"> <td colspan="2" bgcolor="#CCCCCC" align="right">A very long footer name, longer than 70px;</td> </tr> </table> </body> </html> As you can see FF shows the right column correctly (its width=70px), whereas IE ignores "width" property and extends the column width If you set the footer text to something like "Test", then both browsers behaves as expected. Does anybody have a solution to this? __________________ Job3k - premium job offers for Russian market.

10-12-2006, 05:53 AM	#3 (permalink)
yuppie NamePros Regular Join Date: Apr 2006 Location: http://www.teamtesting.com Posts: 542 1,434.00 NP$ (Donate)	Dan, Your solution doesn't work: 1. I don't understand for what you put empty "<td></td>" in the footer 2. Adding "width:70px;" to the footer style helps to keep the proper width of the "data" cell, but the footer itself becomes splitted in several lines, since it's width becomes exacty 70px, but I need the width of the footer be as long as the table itself. __________________ Job3k - premium job offers for Russian market.

10-12-2006, 08:45 AM	#4 (permalink)
xemiterx NamePros Member Join Date: Dec 2003 Location: Oregon Posts: 110 203.25 NP$ (Donate)	Some ideas If you loose the 50% width of the table and go to a fixed width (say 600px) and then specify a width for the first cell (530px in this example) that would work. Or, keep the 50% width, and set the width of the first cell to 100%. That will make the data2 cell shrink below 70px, to keep that from happening you would have to insert a 70px wide image in the data2 cell. Not using tables and using pure css is probably the best answer. Good luck. __________________ Play Pac Man Boxhead Rooms Boxhead 2 Futoshiki Thing Thing 3

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)