Browser-consistent Layout and Design Constructions

Especially the older Netscape versions (e.g. 4.7) have great problems with the correct display of CSS definitions; also there are problems with the correct structure of tables. According to our view the most relevant Netscape bugs and corresponding 'work-arounds' are the following:

Table backgrounds

In case of layer-constructions (e.g. bodyContent_navMacro or bodyContent_Teaser) table background images appear too strong and dominate possibly defined background colours.
Solution: the higher table layers contain a transparent pixel as background image; then the corresponding table background colour is displayed Browser-consistently. This transparent pixel can be embedded either directly with background="common/spacer.gif" or via a CSS class like .trans { background-image:url(common/spacer.gif); } (see the template bodyContent_navMacro.dtml)

Example:

<table>
<tr>
 <td background="bg.gif">
  <table [background="common/pixel.gif" | class="trans"]>
  <tr class="secndColorLight0">
   <td>...</td>
  </tr>
  </table>
</td>
</tr>
</table>

CSS defintions

Attributes for the vertical row alignment (P.margin-top, P.margin-bottom) are interpreted very differently by the Browser types; it is recommended to avoid these attributes for tables (e.g. Teaser box) and to achieve an aesthetic spacing for table constructions per cell hight resp. to generate the spaces via a P-element (template code see code>bodyContent_Teaser.dtml).

dedicated CSS:
(Note: the transparent background pixel e.g. with TD.teaserTitle disables the dominance of background images with Netscape)

/**********************/
/* Teaser */
/**********************/

P.teaserTitle {
    font-family : Verdana,Geneva,Arial,Helevetica,sans-serif;
    color : #000000;
    font-size : 12px;
    line-height : 15px;
    font-weight: bold;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left:3px;
    margin-right:3px;
}

TD.teaserTitle {
padding: 0px;
background-image:url(../common/pixel.gif); 
}


TD.teaserText { 
padding : 0px;
background-image:url(../common/pixel.gif); 
}

P.teaserText {
    font-family : Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size : 10px;
    font-weight : normal;
    text-decoration : none;
    color : #000000;
    line-height: 16px;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left:3px;
    margin-right:3px;
}

A.teaserTitle:link, A.teaserTitle:visited {
    font-weight: bold;
    color: #003366;
    text-decoration: none;
}

A.teaserTitle:hover, A.teaserTitle:active {
    color : #FF9900;
    text-decoration: none;
}

A.teaserText:link, A.teaserText:visited {
    color: #000099;
    text-decoration: none;
}

A.teaserText:hover, A.teaserText:active {
    color: #FF9900;
    text-decoration: underline;
}