Nicht immer halten die Browser das was versprochen wird. Immer wieder gibt es Probleme in der Darstellung zwischen den einzelnen Browsern, welche es dem Webdesigner schwer machen sein Projekt umzusetzen. Hier auf diesen Seiten habe ich einige häufige Probleme gesammelt. Natürlich biete ich auch Lösungen an. Konzentriert habe ich mich dabei nicht auf sog. "Hacks" sondern eher auf eine Umgehung bzw. "schöne" Lösung des aufgetretenen Problems.
Um eine Box mittig zum übergeordneten Objekt auszurichten sind mir zwei unterschiedliche CSS Formatierungsmöglichkeiten bekannt.
Eine Möglichkeit besteht darin, die Rechten und Linken Rand auf AUTO zu setzen. Das funktioniert recht gut in den meisten Browsern mit CSS2 Unterstützung. Zwingend erforderlich ist die Angabe eines Wertes für die Breite (width)
Entsteht bei einem variablen Container in der Breite mit einer Box darin bei der z.B. float:left gesetzt ist. Der die innere Box umfliessende Content ist einfach nicht sichtbar. Du kannst die Seite sooft reloaden wie du willst... Ein scrollen (wenn möglich) der Seite lässt den Text hervortreten. Hier mal kurz die Syntax in Kurzform
Im IE7 können sie ausser der Schriftgröße auch die ganze Seite zoomen, inklusive Grafiken und anderer Elemente. Wenn Links im Text mit einem HOVER Effekt versehen werden und diesen eine Hintergrundfarbe zugewiesen wird, kann es passieren, dass diese Hintergrundfarbe beim zoomen nicht mehr über den Links positioniert ist und sich auch der Text verschiebt.
Eine Besonderheit an diesem Template sind die Attributselektoren aus der CSS-3 Spezifikation.
Diese ist zwar noch nicht Standard, jedoch werden diese von Firefox, SeaMonkey, Safari und IE7 unterstützt. Insofern ist das Risiko, dass diese Spezifikationen in die endgültige Version von CSS-3 übernommen werden relativ gering.
a[href^="http:"] {
padding-right:10px;
background: url(../images/externallinks.gif) no-repeat right top;
}
a[href^="http://www.babydo.de"], a[href^="http://babydo.de"]{
padding-right:0;
background-image:none;
}
a[href^="mailto:"] {
padding-right:10px;
background: url(../images/email.gif) no-repeat right top;
}
Einige Joomla Templates die ich erstellt habe arbeiten mit diesen Selektoren, ich weise aber ausdrücklich darauf hin, das nicht alle Browser diese korrekt darstellen.