Hey,

I recently deployed my website, it was designed and tested with IE6 and works just fine. I just ran it on IE7 and realized that my Panels are not rendering correctly (with IE7).

 My panel contains a form  to allow users to "RSVP" to events. If the user clicks the "RSVP" button, then the panel is made visible, otherwise that panel remains invisible. When viewing with IE7, the panel seems to cut through the div tags that are holding the table. I'm not quite sure what is going on though, because IE 6 and 7 are both up level browsers, so you'd think they would render the same.

 On another note, this isn't just something on one page, it is occuring on every page that I am using a panel in this way. This tells me that I haven't just forgot to add an end tag or something. Could someone take a look at this for me? The offending page is: http://www.kitsapairsoft.com/ViewEvent.aspx?EventID=cdee7f86-62d2-4760-ac9e-8f845d70e806&ShowAttend=0&ShowRSVP=1

When you visit the page you need to click the RSVP button to make the panel visible. If you haven't logged in it will redirect you to the login page. You can login using the following credentials:

Username: guest

Password: guest98

Also, here is a screenshot of the bug in action:

Thanks for any help you can give, I'm totally clueless:-(

-Andrew Craswell

There is a known issue with div tags with certain properties set in IE 7 (among many others). Do a Google search on IE7 problems and you'll see what I mean.

In fact add a post to this thread and you'll see what I mean.

NC...

Hmm, I see what you mean.

I spent several hours looking over my HTML again last night, but still couldn't find anything. Here is my ASP.NET page source, hopefully anoother pair of eyes can find the error.

1    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="ViewEvent.aspx.cs" Inherits="ViewEvent" MaintainScrollPositionOnPostback="True" %>
2    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
3    
4        <div class="dialog type2 drip">
5             <!-- top/right PNG -->
6             <div class="content">
7    
8              <!-- optional: vertical scroll wrapper -->
9              <div class="wrapper">
10   
11              <!-- top/left PNG -->
12              <div class="t"></div>
13   
14   
15              <div class="hd">
16                 <br />
17                 <asp:Label ID="lblTitle" runat="server" Font-Bold="True" Font-Size="Medium" />
18              </div>
19   
20              <div class="bd">
21                     <table style="width: 480px; height: 102px">
22                         <tr>
23                             <td rowspan="4" style="width: 110px; text-align: left;">
24                                  <asp:Image ID="Thumbnail" runat="server" Height="100px" Width="100px" /></td>
25                             <td style="width: 55px">
26                                 <strong>Date:</strong></td>
27                             <td style="width: 307px">
28                                 <asp:Label ID="lblDate" runat="server" />
29                              <asp:Label ID="lblEndDate" runat="server"></asp:Label>
30                             </td>        
31                         </tr>
32                         <tr>
33                             <td style="width: 55px">
34                                 <strong>Location: </strong></td>
35                             <td style="width: 307px">
36                                 <asp:Label ID="lblLocation" runat="server" />
37                                 <asp:LinkButton ID="LnkMap" runat="server" Font-Underline="True" 
38                                     ForeColor="White" />
39                             </td>
40                         </tr>
41                         <tr>
42                             <td style="width: 55px">
43                                 <strong>Fee:</strong>
44                             </td>
45                             <td style="width: 307px">
46                                 <asp:Label ID="lblFee" runat="server" />
47                             </td>
48                         </tr>
49                         <tr>
50                             <td style="width: 55px">
51                                 <strong>Hosts:</strong></td>
52                             <td style="width: 307px">
53                                 <asp:Label ID="lblHosts" runat="server" />
54                                 <asp:LinkButton ID="LnkHostsWebsite" runat="server" ForeColor="White" 
55                                     Font-Underline="True"></asp:LinkButton></td>
56                         </tr>
57                     </table>
58                     <div style="text-align: left">
59                          <table style="width: 478px">
60                              <tr>
61                                  <td>
62                                      <strong>Description:</strong>
63                                  </td>
64                              </tr>
65                              <tr>
66                                  <td>
67                                      <asp:Label ID="lblDescription" runat="server"></asp:Label><br />
68                                        </td>
69                              </tr>
70                          </table>
71                      </div>
72                          <p >
73                              <asp:Button ID="btnRSVP" runat="server" ForeColor="Black" Height="25px" Text="RSVP" Width="100px" />
74                              <asp:Button ID="btnToggleRoster" runat="server" ForeColor="Black" Height="25px" Text="Show Whose Coming"
75                                  Width="125px" />
76                              <asp:Button ID="btnSend" runat="server" ForeColor="Black" Height="25px" Text="Send To A Friend" Width="125px" />
77                              <asp:Button ID="btnPrintROE" runat="server" ForeColor="Black" Height="25px" Text="View ROE" Width="100px" OnClick="btnPrintROE_Click" /></p>
78                              <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EventsConnectionString %>"
79                                  
80                         SelectCommand="SELECT EventName, HostName, Date, EndDate, Description, Cost, Location, MapURL, Thumbnail, Website FROM Event WHERE (EventID = @EventID)">
81                                  <SelectParameters>
82                                      <asp:QueryStringParameter Name="EventID" QueryStringField="EventID" />
83                                  </SelectParameters>
84                              </asp:SqlDataSource>
85                              <asp:Label ID="lblSpacing" runat="server" Width="171px"></asp:Label>
86               </div>
87   
88              <div class="ft" style="width: 300px; left: 0px; top: 0px;">
89                      <asp:Panel ID="pnlRSVP" runat="server" Height="121px" Width="343px">
90                          <div class="dialog type2 drip">
91                              <div class="content" style="width: 251px; left: 12px; top: 0px; height: 194px;">
92                                  <!-- optional: vertical scroll wrapper -->
93                                  <div class="wrapper">
94                                      <!-- top/left PNG -->
95                                      <div class="t">
96                                      </div>
97                                      <div class="hd" style="left: 0px; top: 0px; height: 203px">
98                                          <br />
99                                          <table style="width: 299px">
100                                             <tr>
101                                                 <td style="text-align: left">
102                                                     <strong>Name:</strong>  <asp:TextBox ID="txtRSVPName" runat="server" ForeColor="Black" MaxLength="32" Width="102px"></asp:TextBox>
103                                                     <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtRSVPName"
104                                                         ErrorMessage="*" ValidationGroup="RSVPForm">*</asp:RequiredFieldValidator></td>
105                                                 <td style="width: 100px; text-align: right" rowspan="2">
106                                                     <strong>Date:</strong>
107                                                     <asp:Label ID="lblRSVPDate" runat="server" Text=""></asp:Label></td>
108                                             </tr>
109                                             <tr>
110                                                 <td style="text-align: left">
111                                                     <strong>Status:</strong>
112                                         <asp:DropDownList ID="ddlRSVPStatus" runat="server">
113                                             <asp:ListItem Selected="True">Attending</asp:ListItem>
114                                             <asp:ListItem>Not Attending</asp:ListItem>
115                                             <asp:ListItem>Maybe</asp:ListItem>
116                                         </asp:DropDownList></td>
117                                             </tr>
118                                         </table>
119                                         <strong>Comments:</strong>            
120                                         <asp:RegularExpressionValidator ID="RSVPMaxChars" runat="server" ControlToValidate="txtRSVPComments"
121                                         ErrorMessage="RegularExpressionValidator" Font-Bold="False" ValidationExpression="(.|\n){0,300}" ValidationGroup="RSVPForm">Comment cannot exceed 300 characters.</asp:RegularExpressionValidator><br />
122                                         <p>
123                                            <asp:TextBox ID="txtRSVPComments" runat="server" Height="66px" TextMode="MultiLine" Width="298px" ForeColor="Black" MaxLength="300" Columns="93" Rows="5"></asp:TextBox>
124                                            <asp:Button ID="btnRSVPSubmit" runat="server" ForeColor="Black" Height="25px" 
125                                                 Text="Submit" Width="98px" ValidationGroup="RSVPForm" OnClick="btnRSVPSubmit_Click" />
126                                            <asp:Button ID="btnRSVPReset" runat="server" ForeColor="Black" Height="25px" Text="Reset" Width="98px" OnClick="btnReset_Click" />
127                                            <asp:Button ID="btnRSVPCancel" runat="server" ForeColor="Black" Height="25px" Text="Cancel" Width="98px" OnClick="btnReset_Click" /></p>
128                                     </div>
129                                     <div class="bd" style="height: 7px; top: -4px;">
130                                     </div>
131                                    </div>
132                                   </div>
133  
134                                   <!-- bottom PNG -->
135                                   <div class="b" style="width: 264px; left: 11px; height: 1px; top: 0px;"><div style="width: 77px; height: 53px; left: 0px; top: 0px;"></div></div>
136                                  </div>
137                     </asp:Panel>
138                     
139  
140                     <asp:Repeater ID="RptrRoster" runat="server" DataSourceID="SqlDataSource2" OnPreRender="RptrRoster_PreRender">
141                        <HeaderTemplate> 
142                          Showing <%# GetRSVPCount() %> RSVP's:
143                        </HeaderTemplate>
144                        <ItemTemplate>
145                           <div class="dialog type2 drip">
146                              <!-- top/right PNG -->
147                              <div class="content">
148                                  <!-- optional: vertical scroll wrapper -->
149                                  <div class="wrapper">
150                                      <!-- top/left PNG -->
151                                      <div class="t">
152                                      </div>
153                                      <div class="hd">
154                                          <br />
155                                          <table style="width: 299px">
156                                              <tr>
157                                                  <td style="text-align: left">
158                                                      <strong>Name:</strong>
159                                                      <asp:Label ID="lblRstrName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "UserName") %>'></asp:Label></td>
160                                                  <td rowspan="2" style="font-weight: bold; width: 100px; text-align: right">
161                                                      Date:
162                                                      <asp:Label ID="lblRstrDate" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Date") %>'></asp:Label></td>
163                                              </tr>
164                                              <tr>
165                                                  <td style="text-align: left">
166                                                      <strong>Status:</strong>
167                                                      <asp:Label ID="Label1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "AttendStatus") %>'></asp:Label></td>
168                                              </tr>
169                                          </table>
170                                      </div>
171                                      <div class="bd">
172                                          <br />
173                                          <strong>Comments:<br />
174                                          </strong>"<asp:Label ID="lblRstrComments" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Comments") %>'></asp:Label>"</div>
175                                      <div class="ft">
176                                      </div>
177                                      <!-- end content -->
178                                  </div>
179                                  <!-- end scroll wrapper -->
180                              </div>
181                              <!-- end dialog -->
182                          </div>
183                          <div>
184                          </div>
185                          <br />
186                        </ItemTemplate>
187                     </asp:Repeater>
188                     <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:EventsConnectionString %>" SelectCommand="SELECT UserName, AttendStatus, Comments, Date FROM Roster WHERE (EventID = @EventID) ORDER BY Date DESC">
189                         <SelectParameters>
190                             <asp:QueryStringParameter Name="EventID" QueryStringField="EventID" Size="36" Type="String" />
191                         </SelectParameters>
192                     </asp:SqlDataSource>
193                 <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:EventsConnectionString %>"
194                     SelectCommand="SELECT UserID FROM Roster WHERE (EventID = @EventID) ">
195                     <SelectParameters>
196                         <asp:QueryStringParameter Name="EventID" QueryStringField="EventID" />
197                     </SelectParameters>
198                 </asp:SqlDataSource>
199                 <asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:EventsConnectionString %>"
200                     SelectCommand="SELECT UserName, UserID, AttendStatus, Comments, Date FROM Roster WHERE (EventID = @EventID)">
201                     <SelectParameters>
202                         <asp:QueryStringParameter Name="EventID" QueryStringField="EventID" />
203                     </SelectParameters>
204                     <UpdateParameters>
205                         <asp:Parameter Name="Username" />
206                         <asp:Parameter Name="AttendStatus" />
207                         <asp:Parameter Name="Comments" />
208                         <asp:Parameter Name="EventID" />
209                     </UpdateParameters>
210                 </asp:SqlDataSource>
211             </div>
212  	  </div>
213           </div>
214  
215           <!-- bottom PNG -->
216           <div class="b"><div></div></div>
217          </div>
218  </asp:Content>

*sigh* nevermind, I cheated, I added a label to the page and detected when the browser was either Firefox or IE7, and if so, I placed a ton of break tags in the label. Oh well.

Try removing the value of the Height.  It worked for me.

Jeff Kanning

Oh thanks! Yes, removing the "height" value of the panel works perfectly:-)