Browser-consistent Layout and Design Constructions
Tips for generating Browser-consistent code
Tips for generating Browser-consistent code
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:
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>
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; }