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
As a rule of thumb; it's less painful to develop your CSS in a browser that is more
W3C CSS compliant (like Firefox, Opera, iCab, Safari, and so on) and then make the respective CSS changes for IE.
Quirksmode is an excellent resource for CSS, here are couple links that may be of use:
blumonde
Participant
1860 Points
466 Posts
FF and IE incompatibility
Dec 07, 2006 05:40 AM|LINK
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
no pain no gain
Adam.Kahtava
Contributor
4775 Points
927 Posts
Re: FF and IE incompatibility
Dec 07, 2006 12:23 PM|LINK
What version of IE did you develop your CSS on?
As a rule of thumb; it's less painful to develop your CSS in a browser that is more W3C CSS compliant (like Firefox, Opera, iCab, Safari, and so on) and then make the respective CSS changes for IE.
Quirksmode is an excellent resource for CSS, here are couple links that may be of use:
blumonde
Participant
1860 Points
466 Posts
Re: FF and IE incompatibility
Dec 07, 2006 11:16 PM|LINK
Hi Adam.Kahtava,
I am using IE 6. Thanks for the info.
blumonde
no pain no gain