[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 343
  • Last Modified:

Html Alignment in .aspx page.

Hi I am not good in Html alignment. Can you please help me. I want make some space between two button (add, cancel  button).(Please see the image) I tried ti fix it but no luck. Please help me.

<table style="background-color: #F5F5E9" cellspacing="2">
                                                                                    <tr>
                                                                                        <td align="left" style="width: 70px;">
                                                                                            Note Type
                                                                                        </td>
                                                                                        <td align="left" style="width: 82px; height: 24px;">
                                                                                            <telerik:RadComboBox ID="ddlNoteType" EmptyMessage="Please select" runat="server"
                                                                                                MarkFirstMatch="True" CollapseDelay="0" Width="115px" DropDownWidth="100px" AllowCustomText="True">
                                                                                                <CollapseAnimation Duration="0" />
                                                                                            </telerik:RadComboBox>
                                                                                            <asp:RequiredFieldValidator InitialValue="" ValidationGroup="Notes" ID="custValCou"
                                                                                                runat="server" ControlToValidate="ddlNoteType" ClientValidationFunction="ddlNt"
                                                                                                Display="None" ErrorMessage="Please select Note Type."></asp:RequiredFieldValidator>
                                                                                            <cc2:ValidatorCalloutExtender ID="valExt" TargetControlID="custValCou" runat="server"
                                                                                                Enabled="True">
                                                                                            </cc2:ValidatorCalloutExtender>
                                                                                        </td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td align="left" valign="middle" style="width: 70px;">
                                                                                            Notes
                                                                                        </td>
                                                                                        <td align="left">
                                                                                            <asp:TextBox ID="txtNoteDesc" runat="server" TextMode="MultiLine" Rows="3" Width="570px"></asp:TextBox>
                                                                                            <asp:RequiredFieldValidator ID="valCliID" ValidationGroup="Notes" ControlToValidate="txtNoteDesc"
                                                                                                Display="None" runat="server" ErrorMessage="Please enter Notes."></asp:RequiredFieldValidator>
                                                                                            <cc2:ValidatorCalloutExtender ID="ValidatorCalloutExtender19" TargetControlID="valCliID"
                                                                                                runat="server">
                                                                                            </cc2:ValidatorCalloutExtender>
                                                                                            &nbsp;&nbsp;
                                                                                        </td>
                                                                                        <td valign="top">
                                                                                            <span style="padding-bottom: 4px;">
                                                                                                <asp:Button ID="btnAddNote" Width="60px" OnClick="btnAddNote_Click" ValidationGroup="Notes"
                                                                                                    runat="server" Text="Add" /></span>
                                                                                            <asp:Button ID="imgbtnNotesCancel" Width="60px" runat="server" OnClientClick="return  hideAddNotes()"
                                                                                                Text="Cancel" />
                                                                                        </td>
                                                                                    </tr>
                                                                                </table>

Open in new window

1.JPG
0
prasadpbr
Asked:
prasadpbr
1 Solution
 
aboredmanCommented:
As a best practice you should use div tags and a CSS to layout your page, not tables.

You can have pretty good tutorials at: http://www.w3schools.com/css/default.asp

good luck
0
 
MikeMCSDCommented:
start with added one <br /> and see what that does:
 </td>
<td valign="top">
<span style="padding-bottom: 4px;">
<asp:Button ID="btnAddNote" Width="60px" OnClick="btnAddNote_Click"
ValidationGroup="Notes" runat="server" Text="Add" /></span>

<br />      <<<< add here

<asp:Button ID="imgbtnNotesCancel" Width="60px" runat="server" OnClientClick="return  hideAddNotes()" Text="Cancel" />
</td>
                                                                                    </tr>
                                                                                </table>
0
 
MikeMCSDCommented:
or try making the "<span style="padding-bottom: 4px;">"
larger to like 12px or more :

</td>
<td valign="top">

<span style="padding-bottom: 4px;">   <<< increase to 12px and up

<asp:Button ID="btnAddNote" Width="60px" OnClick="btnAddNote_Click"
ValidationGroup="Notes" runat="server" Text="Add" /></span>
<asp:Button ID="imgbtnNotesCancel" Width="60px" runat="server" OnClientClick="return  hideAddNotes()" Text="Cancel" />
</td>
                                                                                    </tr>
                                                                                </table>
0
 
codingbeaverCommented:
Try to increase the width of the last <td> so that it has enough space for the "Cancel" button to stay on the same line as the "Add" button. If you don't have enough space, then the "Cancel" button will be wrapped to the next line.
0
 
prasadpbrAuthor Commented:
its working ... instead of span i used div. Thanks
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now