Solved

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

Posted on 2008-10-14
4
682 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
.CSS HTML Help 3 58
CSS for Popup in ASP.NET 4 49
I need help writing Unit Tests for my ASP.Net MVC application 5 40
Diff of the day 2 43
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

759 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