Hi everyone, I just wondered if anyone could help me with something that's been annoying me a bit! I'm an amateur web designer, with a rudimentary understanding of HTML etc, so please bear with me if the answer to this is obvious! On my new website, I've included a 'booking form' as a table - here's the link: http://www.downforthecount.co.uk/booking.html The table appears fine on most browsers (Safari, Firefox etc) BUT on Internet Explorer, the text in the first cell ("Your name") absolutely refuses to align to the right, like the text in the rows before. Can anyone see a mistake in the code, and is there a fix for it? It's not a huge deal - but it is annoying me slightly! Many thanks for your help, Mike Here's the first bit of the code: <table width="495" border="0" align="center" cellpadding="2" cellspacing="0" > <tr valign="top"> <td width="235" nowrap> <div align="right"> <p class="tab">Your name<span class="asterix">*</span></p> </div> </td> <td colspan="2"> <div align="left"> <input type="text" name="FieldData0" size="30"> </div> </td> </tr> <tr valign="top"> <td nowrap> <div align="right"> <p class="tab">Your e-mail address<span class="asterix">*</span></p> </div> </td> <td colspan="2"> <div align="left" > <input type="text" name="FieldData1" size="30"> </div> </td> </tr>
I made some modifications in your source code, i hope it helps you: <table cellSpacing=0 cellPadding=2 width=495 align=center border=0> <tbody> <tr vAlign=top> <td align="right"> <p class=tab><nobr>Your name<span class=asterix>*</span></nobr></p> </td> <td> <div align=left><input size=30 name=FieldData0> </div> </td> </tr> <tr vAlign=top> <td align="right"> <p class=tab><nobr>Your e-mail address<span class=asterix>*</span></nobr></p> </td> <td> <div align=left><input size=30 name=FieldData1> </div> </td> </tr> <tr vAlign=top> <td align="right"> <p class=tab><nobr>Contact telephone number:</nobr></p> </td> <td> <div align=left><input size=30 name=FieldData2> </div> </td> </tr> <tr vAlign=top> <td align="right"> <p class=tab><nobr>Date of event<span class=asterix>*</span></nobr></p> </td> <td> <div align=left><input size=30 name=FieldData3> </div> </td> </tr> <tr vAlign=top> <td align="right"> <p class=tab><nobr>Type of event</nobr><br /><nobr>(e.g. wedding reception, corporate event)</nobr><span class=asterix>*</span> </p> </td> <td> <div align=left><input size=30 name=FieldData4> </div> </td> </tr> </tbody> </table> <table cellSpacing=0 cellPadding=2 width=495 align=center border=0 style="margin-top: 20px"> <tr> <td bgcolor="#99CCCC"> <div align="left"> <input type="reset" class="btn" id="mysubmit" value=" Reset " name="Clear" /> </div> </td> <td width="163" align="middle" bgcolor="#99CCCC"> <p> <input type="text" name="hida2" " value="" maxlength="100" size="3" style="display : none;"> <strong>Please click "SEND" to finish: </strong> </p> </td> <td width="85" align="middle" bgcolor="#99CCCC"> <input type="submit" class="btn" id="mysubmit" value=" SEND " name="Submit2" onclick="this.value='Sending'"/> </td> </tr> </table> Code (markup): Remarks: 1. Use the nobr element instead of the nowrap attribute. 2. Do not use the colspan attribute if it is not necessary.
Sorry, i specified some attribute values without any quotation marks in my previous post, so it is well formed. The repaired code: <table width="495" border="0" align="center" cellpadding="2" cellspacing="0"> <tbody> <tr valign="top"> <td align="right"> <p class="tab"><nobr>Your name<span class="asterix">*</span></nobr></p> </td> <td align="left"> <input size="30" name="FieldData0"> </td> </tr> <tr valign="top"> <td align="right"> <p class="tab"><nobr>Your e-mail address<span class="asterix">*</span></nobr></p> </td> <td align="left"> <input size="30" name="FieldData1"> </td> </tr> <tr valign="top"> <td align="right"> <p class="tab"><nobr>Contact telephone number:</nobr></p> </td> <td align="left"> <input size="30" name="FieldData2"> </td> </tr> <tr valign="top"> <td align="right"> <p class="tab"><nobr>Date of event<span class="asterix">*</span></nobr></p> </td> <td align="left"> <input size="30" name="FieldData3"> </td> </tr> <tr valign="top"> <td align="right"> <p class="tab"><nobr>Type of event</nobr><br /><nobr>(e.g. wedding reception, corporate event)</nobr><span class="asterix">*</span> </p> </td> <td align="left"> <input size="30" name="FieldData4"> </td> </tr> </tbody> </table> <table width="495" border="0" align="center" cellpadding="2" cellspacing="0" style="margin-top: 20px"> <tr> <td bgcolor="#99CCCC" align="left"> <div> <input type="reset" class="btn" id="mysubmit" value="Reset" name="Clear" /> </div> </td> <td width="163" align="middle" bgcolor="#99CCCC"> <p> <input type="text" name="hida2" " value="" maxlength="100" size="3" style="display : none;"> <strong>Please click "SEND" to finish: </strong> </p> </td> <td width="85" align="middle" bgcolor="#99CCCC"> <input type="submit" class="btn" id="mysubmit" value="SEND" name="Submit2" onclick="this.value='Sending'"/> </td> </tr> </table> Code (markup):
For further details, please visit the following sites: nobr element, nowrap attribute, colSpan attribute.