Kurz nachdem ich den Verweis auf den Artikel über die CSS-Unterschiede in den verschiedenen Internet Explorer Versionen publiziert hatte habe ich den Artikel bei heise online entdeckt, der auf die Dokumentation von Microsoft verweist. Diese dokumentiert unter anderem auch die verschiedenen Erweiterungen gegenüber den Standards bei CSS, JavaScript und DOM. Es empfiehlt sich, die PDF-Version der Artikel zu lesen, da in der HTML-Version jedes Unterkapitel auf einer einzelnen Seite dargestellt wird.
Archiv für die Kategorie ‘Web-Design’
Internet Explorer Standard Support Dokumentation
Sonntag, 04. April 2010CSS Unterschiede der Internet Explorer Versionen 8, 7 und 6
Sonntag, 28. März 2010Der Internet Explorer 9 steht zwar schon in den Startlöchern, aber die älteren Versionen 6 und 7 werden immer noch benutzt. So haben auf meiner Webseite die alten Versionen immer noch einen Anteil von 27% (IE7) bzw. 15% (IE6) aller Internet Explorer Zugriffe (Marktanteil auf meiner Seite: 16%; alle Angaben gemessen seit Anfang 2010).
Bei Smashing Magazine habe ich eine gute Übersicht der Unterschiede der letzten drei Internet Explorer Versionen gefunden (in Englisch). Diese Übersicht hat mir auch bei der Erstellung des ‘Bildbeschreibung über Bild anzeigen’-Effektes sehr geholfen.
My first SilverStripe-Website
Mittwoch, 03. März 2010Am 1. März wurde meine erste SilverStripe-basierte Website online geschaltet, die Website von Trescor Treuhand Kt. Schwyz AG. Dabei kam auch der ‘Bildbeschreibung über Bild anzeigen’-Effekt zum Einsatz.
Update zu ‘Bildbeschreibung über Bild anzeigen’
Montag, 15. Februar 2010Der Code im Artikel Bildbeschreibung über Bild anzeigen hat noch zwei Probleme bei älteren Versionen des Internet Explorers:
Internet Explorer 7:
Beim Internet Explorer 7 kann es passieren, dass der Block mit dem Text neben oder verschoben auf dem Bild angezeigt wird. Dadurch wird der Textblock teilweise durch nachfolgende Elemente verdeckt. Durch die explizite Positionsangabe und dem Wechsel von der Variante des Versteckens mittels display-Style zum visibility-Style konnte ich diese Probleme beheben:
div.switch div.mouse
{
width: 130px;
height: 100px;
display: block;
visibility: hidden;
position: absolute;
text-align: center;
padding: 10px;
background-image: url(halfwhite.gif);
left: 0px;
}
div.switch:hover div.mouse
{
visibility: visible;
}
{
width: 130px;
height: 100px;
display: block;
visibility: hidden;
position: absolute;
text-align: center;
padding: 10px;
background-image: url(halfwhite.gif);
left: 0px;
}
div.switch:hover div.mouse
{
visibility: visible;
}
Internet Explorer 6:
Hier ist das Problem schwerwiegender. Der Internet Explorer 6 unterstützt keine Unterselektoren nach einem Pseudo-Element. Somit funktioniert das entscheidende Style Sheet nicht. Als Workaround zeige ich den Text im Internet Explorer 6 als ToolTip an. Der JavaScript-Code und die Styles können der aktualiserten Datei entnommen werden.
HTML File switchingblock.html
Grafik head.jpg
Grafik halfwhite.gif
Bildbeschreibung über Bild anzeigen
Dienstag, 25. August 2009Mit einem einfachen Aufbau kann ein netter Mouse-Over Effekt erzeugt werden. Dabei werden zwei Elemente definiert, die dann die gleiche Grösse erhalten und das zweite Element vorerst nicht sichtbar ist.
Der HTML-Code:
Das CSS:
div.switch div
{
display: block;
float: left;
}
div.switch
{
position: relative;
}
div.switch div
{
width: 150px;
height: 120px;
}
div.switch div.mouse
{
width: 130px;
height: 100px;
display: none;
position: absolute;
text-align: center;
padding: 10px;
background-image: url(halfwhite.gif);
}
{
display: block;
float: left;
}
div.switch
{
position: relative;
}
div.switch div
{
width: 150px;
height: 120px;
}
div.switch div.mouse
{
width: 130px;
height: 100px;
display: none;
position: absolute;
text-align: center;
padding: 10px;
background-image: url(halfwhite.gif);
}
Und das alles entscheidende Style Sheet:
div.switch:hover div.mouse
{
display: block;
}
{
display: block;
}
Dadurch wird der Block mit dem Text sichtbar gemacht. Zur besseren Sichtbarkeit wird ein halbtransparentes/halbweisses Hintergrundbild verwendet.
Die Dateien können hier heruntergeladen werden:
HTML File switchingblock.html
Grafik head.jpg
Grafik halfwhite.gif
Blöcke zentrieren mit CSS
Sonntag, 01. April 2007Um Block-Elemente wie div oder p zu zentrieren muss man folgende CSS-Anweisungen verwenden:
margin-left:auto; margin-right:auto;
Dadurch wird der linke und der rechte Rand gleichmässig verteilt und der Block steht zentriert gegenüber seinem Eltern-Block.
Verschwundener Text im Internet Explorer
Montag, 11. September 2006Ein Fehler, der bei mir schon öfters aufgetreten ist:
Der Internet Explorer (Version 6.0) stellt den Inhalt nicht dar, wenn die CSS-Eigenschaft
clear
verwendet wird und der umschliessende Block eine Hintergrundfarbe oder ein Hintergrundbild enthält. Auf den Hintergrund zu verzichten ist keine Alternative, aber der Holly Hack schon:
Beim umgebenden Block einfach die Höhe mit
height: 1%;
angeben, und ein Bug frisst den anderen…
Gute Position bei Google und Co.
Sonntag, 14. Mai 2006Wenn neue Webseiten aufgeschaltet werden stellt sich immer wieder die Frage:
Wieso werde ich bei Google nicht gefunden?
Die Antwort darauf ist relativ einfach, die Lösung dagegen mit Aufwand verbunden.
Google bewertet die verschiedenen Seiten, die der googlebot findet. Wie diese Bewertung genau ausieht ist ein Geschäftsgeheimnis von Google. Es basiert aber hauptsächlich auf dem Inhalt und der auf die Seite weisenden Links. Dabei werden Links, die von Seiten kommen, die ein ähnliches Thema behandeln, stärker gewichtet als Links, die von Seiten kommen, die keinen direkten Bezug haben. Zudem wird auch beachtet, wie die verlinkende Seite selber bewertet ist. Andere Suchmaschinen benutzen meist ähnliche Bewertungsalgorithmen.
Daraus habe ich die CCC-Regel abgeleitet:
Content – Connections – Check
Content:
Ohne Inhalt läuft nichts. Der Inhalt ist der Teil, der den Besucher interessiert und deshalb auch vom Such-Roboter bevorzugt beachtet wird. Dabei sollte der Inhalt auch aktuell sein und regelmässig aktualisert und erneuert werden.
Connections:
Verknüpfungen auf die Seite zeigen der Suchmaschine, dass der Inhalt für das Thema relevant ist und deshalb auch den Suchmaschinen-Benutzern angezeigt werden soll. Dabei besteht natürlich ein Henne-Ei Problem. Wenn niemand meine Seite kennt, setzt auch niemand einen Link auf meine Seite. Abhelfen können zum Teil Kontakte, die man mit Leuten mit gleichen interessen hat. Wenn diese auf ihren Wenseiten auf die Inhalte der eignen Webseite verweisen und man selber auf die Inhalte der anderen verweist ist beiden geholfen. Linklisten auf einer Seite sind dabei aber weniger wirkungsvoll als Verknüpfungen innerhalb eines Fliesstextes, welcher von dem von der eigenen Seite behandelte Thema handelt.
Check:
Nur durch regelmässiges Überprüfen kann der Erfolg der Anstrengungen überprüft werden. Dabei sollte einerseits die Position der Seite bei den jeweiligen Suchmaschinen für die relevanten Suchbegriffe überprüft werden. Dabei kann man auch Tools einsetzten, die einem diese aufwändige Arbeit abnehmen. Andererseits sollte auch überprüft werden, mit welchen Suchbegriffen man gefunden wird. Denn möglicherweise suchen die Besucher gar nicht mit den Begriffen, die man selber vermutet.
Gute Suchmaschinen-Plazierungen können nicht einmal erreicht und dann behalten werden, mann muss für Sie regelmässig arbeiten. Dass heisst, immer für neuen Inhalt besorgt sein, versuchen neue Links auf die eingene Seite verweisen zu lassen und regelmässig den Erfolg überprüfen.
