Solved

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

Posted on 2008-10-14
4
669 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

863 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

Need Help in Real-Time?

Connect with top rated Experts

27 Experts available now in Live!

Get 1:1 Help Now