✔ hover

[smyle]

Hallo ich habe eine kleine Frage über die *:hover funktion im css.
Kann das sein das diese nicht richtig im Internet Explorer funktioniert?

Ich habe im moment IE8 und Firefox.
Im Firefox, wenn ich über meinen Button gehe wechselt es das Bild. Im Internet Explorer nicht.
Der Code sieht hier wie folgt aus:

input.submit {
    border:none;
	width:205px;
	height:38px;
    background: url('../management/account/reg_19.gif') no-repeat top left;
	color:#CCCCCC;
	font:bold; 
}
input.submit:hover { 
    border:none;
	width:205px;
	height:38px;
    background: url('../management/account/reg_19_2.gif') no-repeat top left;
	color:#CCCCCC;
}

<input type="submit" name="change" value="&Auml;nderung &Uuml;bernehmen" class="submit"/>

Auch habe ich ein Problem bei einem Link. Im Fire Fox ändert sich die Schrift art und beim Internet Explorer nicht. Auf dem Bild welches sich im Anhang befindet seht ihr die Unterschiede.
Hier den Code dazu:

A:link.RechterLinkBereich {text-decoration: none; font-variant:small-caps; color:#CCCCCC;}
A:visited.RechterLinkBereich {text-decoration: none; color:#CCCCCC; font-variant:small-caps;}
A:active.RechterLinkBereich {color:#FFCCCC; text-decoration: none; font-variant:small-caps; font-weight:bold;}
A:hover.RechterLinkBereich {text-decoration: none; color:#FFCCCC; text-transform:lowercase; font-variant:small-caps; font-weight:500;}

 <a href="index.php?account=<?php echo $account[1]; ?>" class="RechterLinkBereich" >Profil Einstellungen</a>

Dieses Problem hatte ich schon in verschiedene Fälle welche ich zum glück umgehen konnte, aber hier in diesem Fall möchte ich es richtig machen.

Weis jemand warum es so ist? Was kann ich machen damit es auch im Internet Explorer funktioniert.

Übrigens überprüfe ich mit php ob es sich um den Internet Explorer handelt oder um einen anderen Browser. Somit könnte ich ein bestimmtes CSS für den IE machen falls die eine Variante ist.
Die Frage ist nur wie das CSS aussehen muss.

Kann mir hier jemand helfen?

 

[fpvz]

Hallo smyle,
Also bei deinen Links ist ganz klar, dass :hover etc. Pseudoklassen sind, die am Ende stehen, und nicht von Ids und Klassen gefolgt:
A.RechterLinkBereich:link

Bei dem Input:
Hast du es schonmal ohne input versucht? Also als Selektor nur .submit?
Davon abgesehen, musst kannst du im :hover gleiche Eigenschaften raus lassen, das spart Code (height und width sind z.B. gleich)..

Gruß

 

[smyle]

Hallo fpvz

Leider hat das nicht funktioniert.
Habe die Links so geändert:

A.RechterLinkBereich:link {text-decoration: none; font-variant:small-caps; color:#CCCCCC;}
A.RechterLinkBereich:visited {text-decoration: none; color:#CCCCCC; font-variant:small-caps;}
A.RechterLinkBereich:active {color:#FFCCCC; text-decoration: none; font-variant:small-caps; font-weight:bold;}
A.RechterLinkBereich:hover {color:#FFCCCC; text-transform:lowercase; font-weight:500;}

Aber funktioniert im IE trozdem nicht.

Danach hatte ich die Eigenschaften des Buttons anstelle von input.submit, auf .submit geändert:

.submit {...}

Leider hat das auch nichts gebracht.
Es will im IE einfach nicht funktionieren

Hasst du sonst eine Idee oder einen Tipp den ich versuchen soll?

 

[threadi]

Achte auf die richtige Reihenfolge der Pseudoklassen für Links.
http://de.selfhtml.org/css/formate/zentrale.htm#pseudoformate

Ansonsten wäre ein Link zur Seite sicherlich auch interessant.

 

[smyle]

Ich habe die Seite nicht im Internet. Sondert lokal und brauche Xampp.

Habe die Reihenfolge der Links in der CSS Datei, welche ich über

<link rel="stylesheet" type="text/css" href="../lib/style.css" />

in die index Datei einbinde, angepasst.

A.RechterLinkBereich:link {text-decoration: none; font-variant:small-caps; color:#CCCCCC;}
A.RechterLinkBereich:visited {text-decoration: none; color:#CCCCCC; font-variant:small-caps;}
A.RechterLinkBereich:hover {color:#FFCCCC; text-transform:lowercase; font-weight:500;}
A.RechterLinkBereich:active {color:#FFCCCC; text-decoration: none; font-weight:bold;}

Eigentlich ist das einzige was beim IE Link nicht funktioniert das text-transform:lowercase;. denn die Farbe ändert es und dicker wird die Schrifft auch.

 

[threadi]

Wie schreibst Du die Buchstaben im HTML-Code?

PROFIL EINSTELLUNGEN

oder

Profil Einstellungen

?

Wenn ersteres, dann verhält sich der IE völlig richtig.

Ansonsten solltest Du den Text per CSS groß machen - "text-transform: uppercase;" sehe ich nämlich nicht in deinem CSS. Dann würde auch das Gegenteil "lowercase" greifen.

 

[smyle]

Im HTML habe ich es mit Profil Einstellungen geschrieben.

Habe mal anstelle von "font-variant:small-caps;", "text-transform: uppercase;". Das hat funktioniert. Man hat den Unterschied gesehen.
Aber wenn das sie Lösung ist. Ist es schade... Denn es bewirkt nicht das selbe, wie ich auf dem Bild gezeigt habe. Aber wennigstens etwas.

Hast du noch einen Tip für mein Submit problem?

Habe es nochmals mit diesem Code versucht:

A.RechterLinkBereich:link {text-decoration: none; font-variant:small-caps; text-transform: uppercase; color:#CCCCCC;}
A.RechterLinkBereich:visited {text-decoration: none; color:#CCCCCC; font-variant:small-caps; text-transform: uppercase;}
A.RechterLinkBereich:hover {color:#FFCCCC; font-variant:normal; font-weight:500; text-transform:lowercase;}
A.RechterLinkBereich:active {color:#FFCCCC; text-decoration: none; font-weight:bold; font-variant:small-caps; text-transform: uppercase;}

Standard ist er Text Profil Einstellungen alle Buchstaben Gross und das P von Profil so wie das E von Einstellungen etwas grösser.
Was auch richtig ist.
sobald man mit der Maus darüber fährt, wird alle kleingeschreiben.

Wenn ich im hover anstelle von font-variant:normal; , font-variant:small-caps; dan ändert sich nur die Farbe.

Was es eigentlich machen sollte ist das P von Profil und das E von Einstellungen auf die gleiche Höhe / Grösse wie die restlichen Buchstaben stellen.

Aber ja.. wahrscheinlich geht das nur im Firefox und im IE nicht..
Oder?

 

[threadi]

Wenn Du den 1. Buchstaben innerhalb eines Elements anders Stylen willst, könntest Du auch die Pseudoklasse first-letter verwenden. Siehe:
http://www.w3schools.com/cssref/sel_firstletter.asp
Nachteil: kapiert der IE <8 gar nicht. Alternative wäre ein <span> um den ersten Buchstaben.

input:hover verstehen alle Browser, nur der IE < 8 nicht. Im IE8 und 9 sollte es klappen.

 

[smyle]

Werde das first-letter testen und bescheidgeben ob es funktioniert hat oder nicht.

Wegen dem Button und das hover problem. Ich benutze ja IE 8 aber funktioniert trotzdem nicht

Habe sogar anstelle von hover mit focus versucht. Aber funktionierten tut es leider im IE 8 trotzdem nicht.

 

[smyle]

Kann mir niemand mehr helfen?