I got everything to work and display fine in IE. I was content until I test my site with FF and all hell breaks loose. Fields and table columns are overlapping on top of each other. I manage to fix the masterpage layout. However, the default-page layout is what I am trying to fix all day. It has two columns and each column has a dynamic table control. Each table control has a hyperlink and a label fields. Fields and Data are generated dynamically. I set fixed widths via CSS to all of these items but they are still overlapping. The label fields of the table controls are not word-wrapping. I already set the width of these fields in the code. They are word-wrap in IE but not in FF. These label fields should go by the widths of the table controls. Below is my stylesheet.css and part of the html. Please help me out. Thanks in advance.
#dContainer <------ "div id=" on top the defaultpage's contentholder
{
background: #fff;
text-align: center;
voice-family: inherit;
width: 818px; /* height: 626px; margin-left: 0px; margin-right: 0px;*/
height: 100%;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-top-style: none;
padding-top: 0px;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
}
.myForm <---------- "form id=" of the masterpage
{
height: 100%;
position: relative;
}
.defaultColumn1 <-------------------------- the first column of the default page
{
width: 579px; /*24528px;*/
height: 60px;
max-width: 579px;
}
.defaultColumn2 <-------------------------- the second column of the default page
{
width: 225px; /*444px;*/
height: 60px;
max-width: 225px;
}
.defaultPanel1 <-------------------------- the first table control of the default page
{
width: 579px;
max-width: 579px;
border-top-width: thin;
border-left-width: thin;
border-left-color: olive;
border-top-color: olive;
border-right-width: thin;
border-right-color: olive;
border-bottom-width: 1pt;
border-bottom-color: silver;
}
.defaultPanel2 <-------------------------- the seconde table control of the default page
{
width: 225px;
max-width: 225px;
border-left: silver 1pt solid;
border-right: silver 1pt solid;
border-top: silver 1pt solid;
border-bottom: silver 1pt solid;
}
.defaultPage <-------------------------- attached to the html table of the 2 columns
{
position: relative;
width: 818px;
max-width: 818px;
height: 626px;
table-layout: fixed;
}
.mainMenu <-------------------------- attached to the masterpage menu
{
width: 814px;
height: 4px;
color: white;
background-color: #696969;
}
body
{
height: 100%;
width: 100%;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
margin: 0px;
border-top-style: none;
padding-top: 0px;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
position: relative;
border: 0;
font-family: Verdana;
font-size: 9px;
table-layout: fixed;
}
The Html
<%
@ Page ClientTarget="uplevel" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" StylesheetTheme="ThemeA"
Theme="ThemeA" %>
<%
@ MasterType VirtualPath="~/Site.master" %>
<
asp:Content ID="Content1" ContentPlaceHolderID="ctMainHolder" runat="Server">
<div id="dContainer" align="center">
<table align="left" class="defaultPage">
<tr>
<td align="left" valign="top" class="defaultColumn1">
<asp:Table ID="tbDynamicFields" runat="server" HorizontalAlign="Center" CssClass="defaultPanel1">
</asp:Table>
</td>
<td align="left" valign="top" class="defaultColumn2">
<asp:Table ID="tbDynamicFields2" runat="server" HorizontalAlign="Center" CssClass="defaultPanel2">
</asp:Table>
</td>
</tr>
</table>
</div>
</
asp:Content>
blumonde