CSS Problem bei verschiedenen Browsern
Eingetragen von fraweg (230)am 17.12.2012 - 16:17 Uhr in
Hallo zusammen,
ich habe eine Frage bezüglich CSS und den verschiedenen Browsern:
Ich versuche ein Link im Forum wie ein Button aussehen zu lassen. Das klappt im Firefox,Safari,IE,und opera auch super. Nur der Chrome Browser macht Ärger. Dor bleibt der Text im Button grau. Zu sehen im Anhang "Bild1.png". In den anderen Browsern sieht es wie im Anhang "Bild2.png" aus, also so wie es auch aussehen soll.
Hier der Code:
.subscriptions-subscribe a:link {
background: none repeat scroll 0 0 #111111;
border: 0 none;
border-radius: 5px 5px 5px 5px;
color: #D4D4D4;
cursor: pointer;
font-size: 10px;
margin: 0 5px 0 0;
padding: 5px 10px;
text-align: center;
text-transform: uppercase;
}Wenn ich jedoch den Code wie im folgendem ändere sieht es im Chrome richtig aus und in den Anderen wird der CSS Code komplett ignoriert:
.subscriptions-subscribe a:-webkit-any-link {
background: none repeat scroll 0 0 #111111;
border: 0 none;
border-radius: 5px 5px 5px 5px;
color: #D4D4D4;
cursor: pointer;
font-size: 10px;
margin: 0 5px 0 0;
padding: 5px 10px;
text-align: center;
text-transform: uppercase;
}Kann mir jemand sagen wie ich das hin bekommen kann ?
Viele Grüße
Frank
| Anhang | Größe |
|---|---|
| Bild1.png | 2.4 KB |
| Bild2.png | 2.83 KB |
- Anmelden oder Registrieren um Kommentare zu schreiben
Bei mir sieht das alles erst
am 17.12.2012 - 16:37 Uhr
Bei mir sieht das alles erst einmal normal aus. Was du unbedingt hinterlegen musst, und was dazu gehört, sind styles für visited, hover und active, und zwar in der Reihenfolge:
Link
Visited
Hover
Active
Dann z.B. so:
.subscriptions-subscribe a:link {
background: none repeat scroll 0 0 #111111;
border: 0 none;
border-radius: 5px 5px 5px 5px;
color: #D4D4D4;
cursor: pointer;
font-size: 10px;
margin: 0 5px 0 0;
padding: 5px 10px;
text-align: center;
text-transform: uppercase;
}
.subscriptions-subscribe a:visited {
color: #D4D4D4;
}
.subscriptions-subscribe a:hover {
color: #FFF;
}
.subscriptions-subscribe a:active {
color: #FFF;
}
Manche Browser sind da sehr, sehr empfindlich, und wenn du den Link z.B. schon geklickt hast, kann es sein, dass der Chrome den als visited markiert, und dann das UserStyleSheet vom Browser selbst lädt. Ferner könntest du dir noch überlegen auch den Hintergrund als Button zu machen. Aktuell hast du einen Link auf rundem Hintergrund. Das kann man z.B. mit display:block, bzw. display:inline-block lösen.
Falls das nicht hilft, empfehle ich FireBug, oder ähnliches. Dann schaue mal, ob eventuell ein anderes Element, oder eine andere Klasse/ID Einfluss auf den Button hat. Da sind Browser auch gern mal wählerisch, und sehr unterschiedlich.
Hallo Genesis Zitat: Dann
am 17.12.2012 - 19:57 Uhr
Hallo Genesis
Dann z.B. so:
.subscriptions-subscribe a:link {
background: none repeat scroll 0 0 #111111;
border: 0 none;
border-radius: 5px 5px 5px 5px;
color: #D4D4D4;
cursor: pointer;
font-size: 10px;
margin: 0 5px 0 0;
padding: 5px 10px;
text-align: center;
text-transform: uppercase;
}
.subscriptions-subscribe a:visited {
color: #D4D4D4;
}
.subscriptions-subscribe a:hover {
color: #FFF;
}
.subscriptions-subscribe a:active {
color: #FFF;
}
Genau das war's...nun läuft es...Vielen vielen Dank!
Frank