I've done extensive work developing a large on-line application form, only
to find that it will not render properly in Firefox (1.5.0.1) or Netscape
(8.0).
The panels are overlapping each other and style settings such as backcolor
are not propagating to child elements. Yet, it renders nicely in IE.
I've already updated the <browsercaps> section in my web.config file using
Rob Eberhardt's implementation
(http://slingfive.com/pages/code/browserCaps/), so the panel's are rendering
as div's and not table's. Yet the problem persists.
Please, can anyone tell me if it can be made to work in these browsers
without a major rehaul?
Here's a simplified excerpt of my code:
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Application.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css"> legend {color:#2c5eb1} </style>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: left">
<br />
<table width="587" align="center">
<tr>
<td><asp:Table ID="Table1" runat="server"
BackColor="#D8E7EF" Height="3px" Width="587px">
<asp:TableRow runat="server">
<asp:TableCell runat="server"></asp:TableCell>
</asp:TableRow>
</asp:Table>
<asp:Panel ID="Panel1" runat="server"
BackColor="#FBF1EC" EnableTheming="True"
Font-Bold="True" Font-Italic="False" Font-Names="Arial"
Font-Size="Large" ForeColor="#2C5EB1"
GroupingText="Fieldset Legend" Height="50px" Width="587px">
<br />
<table>
<tr>
<td style="height: 30px">
<asp:Label ID="Label3"
runat="server" Text="Field 1:" Width="80px"></asp:Label>
<asp:TextBox ID="TextBox6"
runat="server" Width="188px"></asp:TextBox>
<asp:Label ID="Label4" runat="server"
Text="Field 2:"></asp:Label>
<asp:TextBox ID="TextBox7"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style="height: 30px">
<asp:Label ID="Label5"
runat="server" Text="Field 3:"></asp:Label>
<asp:TextBox ID="TextBox8"
runat="server" Width="24px"></asp:TextBox>
<asp:Label ID="Label6" runat="server"
Text="Field 4:"></asp:Label>
<asp:TextBox ID="TextBox9"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style="height: 30px">
<asp:Label ID="Label7"
runat="server" Text="Field 5:"></asp:Label>
<asp:TextBox ID="TextBox10"
runat="server" Width="430px"></asp:TextBox></td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td style="height: 33px">
</td>
</tr>
<tr>
<td><asp:Table ID="Table3" runat="server"
BackColor="#D8E7EF" Height="3px" Width="587px">
<asp:TableRow runat="server">
<asp:TableCell runat="server"></asp:TableCell>
</asp:TableRow>
</asp:Table>
<asp:Panel ID="Panel3" runat="server"
BackColor="#FBF1EC" EnableTheming="True"
Font-Bold="True" Font-Italic="False" Font-Names="Arial"
Font-Size="Large" ForeColor="#2C5EB1"
GroupingText="Fieldset Legend" Height="50px" Width="587px">
<br />
<table>
<tr>
<td style="height: 30px">
<asp:Label ID="Label8"
runat="server" Text="Field 1:" Width="80px"></asp:Label>
<asp:TextBox ID="TextBox11"
runat="server" Width="188px"></asp:TextBox>
<asp:Label ID="Label9" runat="server"
Text="Field 2:"></asp:Label>
<asp:TextBox ID="TextBox12"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style="height: 30px">
<asp:Label ID="Label10"
runat="server" Text="Field 3:"></asp:Label>
<asp:TextBox ID="TextBox13"
runat="server" Width="24px"></asp:TextBox>
<asp:Label ID="Label11" runat="server"
Text="Field 4:"></asp:Label>
<asp:TextBox ID="TextBox14"
runat="server"></asp:TextBox></td>
</tr>
<tr>
<td style="height: 30px">
<asp:Label ID="Label12"
runat="server" Text="Field 5:"></asp:Label>
<asp:TextBox ID="TextBox15"
runat="server" Width="430px"></asp:TextBox></td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
<br />
<br />
</div>
</form>
</body>
</html>
