Google Cache Information per css stylen
Jeder kennt die Google-Infoboxen die sich öffnen, wenn man bei einem Google-Suchergebnis auf "Im Cache" klickt.
Da kann eine Seite noch so schön gestylt sein, diese Infobox zerstört alles. Das Problem dabei ist allerdings, dass diese Box keine besondernen Klassen mitführt, um sie einfach per CSS stylen zu können. - Gut, dass Google wohl schon seit Jahren den selben Quellcode verwendet und daher darin noch antike Fundstücke zufinden sind, die man sich zu Nutze machen kann.
Im folgenden habe ich einen entsprechenden Code Schnipsel, der bis auf das hr keine Auswirkungen auf den übrigen Teil der Webseite haben sollte - sofern diese nach neuesten xHTML- und Barrierefreiheit-Richtlinien erstellt wurde.
hr {
visibility: hidden;
}
table {
border-collapse: collapse;
border: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
table td {
border: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
table table td {
padding: 5px 5px 5px 5px;
}
table font {
font-family: Verdana, Arial;
}
table code,
table font {
color: #000000;
font-size: 1em;
line-height: 1.3em;
}
table code,
table font i,
table b font {
color: #999999;
}
table a,
table a font {
color: #aaaaaa;
}
table a:hover,
table a:hover font {
color: #666666;
}
Am besten man erstellt sich eine seperate CSS Datei z.B. google.css und importiert diese dann am Anfang mit @import url("google.css"); in seine Haupt-CSS-Datei. Dieses hat den Vorteil, dass nachfolgende Definitionen notfalls doch noch überschrieben werden.
Da sich die neue Seite in einem relativ positionierten Div befindet, der nicht die komplette Bildschirmgröße ausfüllt, ist es teilweise ratsam über verschachtelte Selektoren den Style des Divs bzw. der Seite anzupassen:
body > div {
height: 100%;
}
body > div > #site {
position: relative;
top: 0px;
right: 0px;
margin: 0px 0px 0px 0px;
float: right;
}
Man sollte dabei allerdings nicht übertreiben. Schließlich ist es von Google bestimmt gewollt, das ein Unterschied zur Seite zu erkennen ist.