Solved

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

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…

705 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

18 Experts available now in Live!

Get 1:1 Help Now