Improve company productivity with a Business Account.Sign Up

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

How to avoid auto generation of style classes when adjusting width of table (columns) in design view?

I have a HTML table below and a possible problem that I'm facing is that when you manually adjust column widths it creates a class for that column e.g. class="style22". This could be one of the reasons why the page's columns seem to be spread apart quite wide in Firefox.

I have also noticed that if you do not hard code the width for a column it seems to automatically take a value from some where else. In the design view when you hover over the specific column the width can be seen alltough as mentioned it's not hard coded. Any ideas where that is coming from?

I have performed various trial and error methods, but can't seem to find what the solution might be to this browser issue. I do not seem to be able to find any similar problems that have been reported else where.

Hope this is not confusing and hope to hear back with some possible solutions.

I have attached print screens of both views in the different browsers to make it hopefully more clear.


<style type="text/css">
        
        .style9
        {
            width: 536px;
        }
        .style10
        {
            width: 177px;
        }
        .style11
        {
            width: 106px;
        }
        .style17
        {
            width: 361px;
        }
        .style18
        {
            width: 396px;
        }
        .style19
        {
            width: 410px;
        }
        .style20
        {
            width: 169px;
        }
        .style21
        {
            width: 47px;
        }
        .style22
        {
            width: 60px;
        }
    </style>
 
<table>
                    <tr>
                        
                        <td class="style22">
                            
                            <asp:ScriptManager ID="ScriptManager1" runat="server">
                            </asp:ScriptManager>
                        </td>
                        <td colspan="2">
                            <ajaxToolkit:CalendarExtender ID="CalendarExtender3" runat="server" Format="dd MMM yyyy"
                        OnClientDateSelectionChanged="function(s,e){ startDate = s.get_selectedDate();}" TargetControlID="ArrivalTextBox">
                            </ajaxToolkit:CalendarExtender>
                            <div style="display:none">
            <asp:Label ID="Label21" runat="server"></asp:Label>
        </div>
                        </td>
                        
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        
                        <td class="style22">
                            &nbsp;
                        </td>
                        <td colspan="2">
                            <ajaxToolkit:CalendarExtender ID="CalendarExtender2" runat="server" Format="dd MMMM yyyy"
                        TargetControlID="DepartTextBox" OnClientShowing="function x(s, e) { s.set_MinimumAllowableDate(startDate); }">
                            </ajaxToolkit:CalendarExtender>
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        
                    </tr>
                    <tr>
                        <td colspan="3">
                            <asp:Label ID="Label24" runat="server" Text="Please enter all mandatory fields marked with" CssClass="details"></asp:Label>  
                            <asp:Label ID="Label27" runat="server" Text="*" CssClass="asterix"></asp:Label> </td></td>
                        <td>
                            &nbsp;</td>
                        
                    </tr>
                    <tr>
                        <td colspan="1" class="style22">
                            &nbsp;</td>
                        <td colspan="2">
                            &nbsp;</td>
                        <td>
                            &nbsp;</td>
                        
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="Label1" runat="server" CssClass="label" Text="Arrival Date"></asp:Label>
                            <asp:Label ID="Label22" runat="server" CssClass="asterix" Text="*"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="ArrivalTextBox" runat="server" AutoPostBack="True" 
                                CssClass="textbox"></asp:TextBox>
                        </td>
                        <td>
                            
                            <asp:Label ID="ErrorLabel1" runat="server" CssClass="errorlabel" 
                                Font-Bold="True" ForeColor="Red"></asp:Label>
                        </td>
                        
                    </tr>
                    <tr>
                        
                        <td class="style22">
                            <asp:Label ID="Label2" runat="server" Text="No of Nights" CssClass="label"></asp:Label>
                        </td>
                        <td colspan="2">
                            <asp:DropDownList ID="NightsDropDownList" runat="server" AutoPostBack="True" 
                        CssClass="dropdown">
                                <asp:ListItem Selected="True">1</asp:ListItem>
                                <asp:ListItem>2</asp:ListItem>
                                <asp:ListItem>3</asp:ListItem>
                                <asp:ListItem>4</asp:ListItem>
                                <asp:ListItem>5</asp:ListItem>
                                <asp:ListItem>6</asp:ListItem>
                                <asp:ListItem>7</asp:ListItem>
                                <asp:ListItem>8</asp:ListItem>
                                <asp:ListItem>9</asp:ListItem>
                                <asp:ListItem>10</asp:ListItem>
                                <asp:ListItem>11</asp:ListItem>
                                <asp:ListItem>12</asp:ListItem>
                                <asp:ListItem>13</asp:ListItem>
                                <asp:ListItem>15</asp:ListItem>
                                <asp:ListItem Value="16">16</asp:ListItem>
                                <asp:ListItem>17</asp:ListItem>
                                <asp:ListItem>18</asp:ListItem>
                                <asp:ListItem>19</asp:ListItem>
                                <asp:ListItem>20</asp:ListItem>
                                <asp:ListItem>21</asp:ListItem>
                                <asp:ListItem>22</asp:ListItem>
                                <asp:ListItem>23</asp:ListItem>
                                <asp:ListItem>24</asp:ListItem>
                                <asp:ListItem>25</asp:ListItem>
                                <asp:ListItem>26</asp:ListItem>
                                <asp:ListItem>27</asp:ListItem>
                                <asp:ListItem>28</asp:ListItem>
                                <asp:ListItem>29</asp:ListItem>
                                <asp:ListItem>30</asp:ListItem>
                                <asp:ListItem>31</asp:ListItem>
                            </asp:DropDownList>
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        
                    </tr>
                    <tr>
                        
                        <td class="style22">
                            <asp:Label ID="Label3" runat="server" Text="Departure Date" CssClass="label"></asp:Label>
                            <asp:Label ID="Label23" runat="server" Text="*" CssClass="asterix"></asp:Label>
                        </td>
                        <td colspan="2">
                            <asp:TextBox ID="DepartTextBox" runat="server" AutoPostBack="True" 
                                CssClass="textbox" ></asp:TextBox>
                        </td>
                        <td>
                            &nbsp;
                            <asp:Label ID="ErrorLabel2" runat="server" Font-Bold="True" ForeColor="Red" CssClass="errorlabel"></asp:Label>
                        </td>
                        
                    </tr>
                    <tr>
                       
                        <td class="style22">
                            &nbsp;
                        </td>
                        <td colspan="2">
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr style="display:<%=Session("row1Filters")%>">
                        
                        <td class="style22">
                            <asp:Label ID="Label7" runat="server" Visible="False" Width="120px" CssClass="label"></asp:Label>
                        </td>
                        <td class="style20">
                            <asp:DropDownList ID="DropDownList1" runat="server" Visible="False" 
                                Width="135px" CssClass="dropdown">
                            </asp:DropDownList>
                        </td>
                        <td class="style21">
                            <asp:Label ID="Label8" runat="server" Visible="False" Width="120px" 
                                CssClass="label"></asp:Label>
                        </td>
                        <td>
                            <asp:DropDownList ID="DropDownList2" runat="server" Visible="False" 
                                Width="135px" CssClass="dropdown">
                            </asp:DropDownList>
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr style="display:<%=Session("row2Filters")%>">
                        <td class="style22">
                            
                            <asp:Label ID="Label9" runat="server" Visible="False" Width="120px"></asp:Label>
                        </td>
                        <td>
                            <asp:DropDownList ID="DropDownList3" runat="server" Visible="False" 
                                Width="135px" CssClass="dropdown">
                            </asp:DropDownList>
                        </td>
                        <td class="style20">
                            <asp:Label ID="Label10" runat="server" CssClass="label" Visible="False" 
                                Width="120px"></asp:Label>
                        </td>
                        <td class="style21">
                            <asp:DropDownList ID="DropDownList4" runat="server" Visible="False" 
                                Width="135px" CssClass="dropdown">
                            </asp:DropDownList>
                        </td>
                        <td>
                            &nbsp;</td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr style="display:<%=Session("row3Filters")%>">
                        <td class="style22">
                            
                            <asp:Label ID="Label11" runat="server" Visible="False" Width="120px"></asp:Label>
                        </td>
                        <td>
                            <asp:DropDownList ID="DropDownList5" runat="server" Visible="False" 
                                Width="135px">
                            </asp:DropDownList>
                        </td>
                        <td class="style20">
                            <asp:Label ID="Label12" runat="server" Visible="False" Width="120px"></asp:Label>
                        </td>
                        <td class="style21">
                            <asp:DropDownList ID="DropDownList6" runat="server" Visible="False" 
                                Width="135px">
                            </asp:DropDownList>
                        </td>
                        <td>
                            &nbsp;</td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr style="display:<%=Session("row4Filters")%>">
                        <td class="style22">
                            <asp:Label ID="Label13" runat="server" Visible="False" Width="120px"></asp:Label>
                        </td>
                        <td>
                            <asp:DropDownList ID="DropDownList7" runat="server" Visible="False" 
                                Width="135px">
                            </asp:DropDownList>
                        </td>
                        <td class="style20">
                            <asp:Label ID="Label14" runat="server" Visible="False" Width="120px"></asp:Label>
                        </td>
                        <td class="style21">
                            <asp:DropDownList ID="DropDownList8" runat="server" Visible="False" 
                                Width="135px">
                            </asp:DropDownList>
                        </td>
                        <td>
                            &nbsp;</td>
                        <td>
                            &nbsp;</td>
                    </tr>
                    <tr style="display:<%=Session("row5Filters")%>">
                        <td class="style22">
                            <asp:Label ID="Label15" runat="server" Visible="False" Width="120px"></asp:Label>
                        </td>
                        <td>
                            <asp:DropDownList ID="DropDownList9" runat="server" Visible="False" 
                                Width="135px">
                            </asp:DropDownList>
                        </td>
                        <td class="style20">
                            <asp:Label ID="Label16" runat="server" Visible="False" Width="120px"></asp:Label>
                        </td>
                        <td class="style21">
                            <asp:DropDownList ID="DropDownList10" runat="server" CssClass="dropdown" 
                                Visible="False" Width="135px">
                            </asp:DropDownList>
                        </td>
                        <td>
                            &nbsp;</td>
                        <td>
                            &nbsp;</td>
                    </tr>
                    <tr style="display:<%=Session("row6Filters")%>">
                        <td class="style22">
                            <asp:Label ID="Label17" runat="server" CssClass="label" Visible="False" 
                                Width="120px"></asp:Label>
                        </td>
                        <td>
                            <asp:DropDownList ID="DropDownList11" runat="server" Visible="False" 
                                Width="135px">
                            </asp:DropDownList>
                        </td>
                        <td class="style20">
                            <asp:Label ID="Label18" runat="server" Visible="False" Width="120px"></asp:Label>
                        </td>
                        <td class="style21">
                            <asp:DropDownList ID="DropDownList12" runat="server" Visible="False" 
                                Width="135px">
                            </asp:DropDownList>
                        </td>
                        <td>
                            &nbsp;</td>
                        <td>
                            &nbsp;</td>
                    </tr>
                    
                    
                    <tr style="display:none">
           
                        <td class="style22">
                            &nbsp;</td>
                              
                        <td>
                            <asp:Label ID="Label19" runat="server" Text="Promotion Code:" CssClass="label"></asp:Label>
                        </td>
                        <td class="style20">
                            <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" 
                                CssClass="textbox" Width="135px"></asp:TextBox>
                        </td>
                       
                        <td class="style21">
                            <asp:Button ID="Button2" runat="server" Text="Submit" Visible="False" />
                        </td>
                        <td>
                            <asp:Label ID="Label20" runat="server" ForeColor="Red" CssClass="promolabel"></asp:Label>
                        </td>
                        <td>
                            &nbsp;</td>
                             
                    </tr>
                   
                    <tr>
                        <td class="style22">
                            &nbsp;</td>
                        <td>
                            <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
                                BackgroundCssClass="modalBackground" CancelControlID="Button5" 
                                PopupControlID="Panel1" TargetControlID="button2">
                            </ajaxToolkit:ModalPopupExtender>
                        </td>
                        <td class="style20">
                            &nbsp;</td>
                        <td class="style21">
                            &nbsp;</td>
                        <td>
                            &nbsp;</td>
                        <td>
                            &nbsp;</td>
                    </tr>
                </table>

Open in new window

IE.bmp
firefox.bmp
0
Gary2Seven
Asked:
Gary2Seven
  • 2
  • 2
1 Solution
 
chinu1310Commented:
I would suggest you to control these height/width by external css.
Also rather than designing you page from design view, go to code view and handle and try to create your page layout.

While creating page layout from codeview you can use your external css classes that you created.

Hope it helps
0
 
Gary2SevenConsultantAuthor Commented:
Sorry I forgot to mention that I'm also using an external css. I know the css is not affecting the layout as I have tested it by removing it so I know for definite the problem is arising from the code itself.

As i said some where there must be a setting that is defining some default values for the table.
0
 
chinu1310Commented:
Is it possible for you to post some HTML code here ?
0
 
Gary2SevenConsultantAuthor Commented:
I have attached most of the coding for the page above. Anything else you want to look at in more detail?

I think my next step will be to remove the table and add it back in and see if the problem still occurs.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

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