FF and IE incompatibility RSS

• • Reply
  •  
  

  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

   

  Cheers
  no pain no gain
• • Reply
  •  
  

  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:

  • CSS contents and browser compatibility
  • Conditional Comments 
• • Reply
  •  
  

  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

  Cheers
  no pain no gain