Browserfeste Layout- und Design-Konstruktionen
Tipps für die Erzeugung von browser-festem Code
Tipps für die Erzeugung von browser-festem Code
Insbesondere die älteren Netscape-Versionen (z.B. 4.7) haben große Probleme bei der korrekten Darstellung von CSS-Definitionen; zudem gibt es Probleme beim korrekten Aufbau von Tabellen. Die aus unserer Sicht relevantesten Netscape-Fehler und entsprechende 'work-arounds' sind folgende:
Tabellenhintergrund-Grafiken schlagen bei Schicht-Konstruktionen (z.B. bodyContent_navMacro
oder bodyContent_Teaser
) durch und dominieren eventuell definierte Hintergrundfarben.
Lösung: die oberen Tabellenschichten erhalten einen transparent-Pixel als Hintergrundgrafik; dann wird die entsprechende Tabellenhintergrundfarbe browser-fest angezeigt. Dieser transparete Pixel kann entweder direkt eingebunden werden mit background="common/spacer.gif"
oder über eine CSS-Klasse in der Art .trans { background-image:url(common/spacer.gif); }
(siehe dazu das Template bodyContent_navMacro.dtml
)
Beispiel:
<table> <tr> <td background="bg.gif"> <table [background="common/pixel.gif" | class="trans"]> <tr class="secndColorLight0"> <td>...</td> </tr> </table> </td> </tr> </table>
Die Attribute für die vertikale Zeilenausrichtung (P.margin-top, P.margin-bottom
) werden von den Browsertypen sehr unterschiedlich interpretiert; es empfiehlt sich, diese Attribute bei Tabellen zu vermeiden (z.B. Teaser-Kasten) und bei Tabellenkonstruktionen ein ästetisches Spacing per Zellenhöhe zu erzielen bzw. die Abstände über ein P-Element zu erzeugen (Template-Code siehe bodyContent_Teaser.dtml
).
zugehöriges CSS:
(Anmerkung: das transparente Hindergrundpixel z.B. bei TD.teaserTitle verhindert das Durchschlagen von Hintergrundgrafiken bei 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; }