Solved

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

Posted on 2008-10-14
4
670 Views
Last Modified: 2011-10-19
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
Comment
Question by:Gary2Seven
  • 2
  • 2
4 Comments
 
LVL 14

Expert Comment

by:chinu1310
ID: 22758806
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
 
LVL 2

Author Comment

by:Gary2Seven
ID: 22759115
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
 
LVL 14

Expert Comment

by:chinu1310
ID: 22759293
Is it possible for you to post some HTML code here ?
0
 
LVL 2

Accepted Solution

by:
Gary2Seven earned 0 total points
ID: 22765576
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

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question