Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2008-10-14
4
Medium Priority
?
693 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

916 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