kleines input-problem

[Socrates]

Ja hallo!
Ich habe hier den css-Quelltext um buttoms, inputfelder und textareas anzupassen. klappt im FF auch echt super aber wie immer macht der IE stress! Kann mir da jemand helfen?
Der hover effekt funktioniert vorallem nicht!
MfG, Andy

textarea { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#dfdfdf; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
input { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#dfdfdf; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
input:hover { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#aaaaaa; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
input[type=text] { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#dfdfdf; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
input[type=password] { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#dfdfdf; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
input[type=file] { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#dfdfdf; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
input[type=submit] { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#dfdfdf; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
input[type=submit]:hover { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#aaaaaa; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
input[type=submit]:active { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#aaaaaa; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
input[type=reset] { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#dfdfdf; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
input[type=reset]:hover { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#aaaaaa; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
input[type=reset]:active { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#aaaaaa; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
input[type=button] { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#dfdfdf; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
input[type=button]:hover { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#aaaaaa; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
input[type=button]:active { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#aaaaaa; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }
select { font-family:arial,helvetica,Verdana,Tahoma,sans-serif; font-size:13px; color:#000000; font-weight:bold; background-color:#dfdfdf; border-color:#555555; border-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; }

[|Coding]

Moin!

Das liegt wohl daran, dass der IE keine attributbedingten Formatierungen kennt. Ausserdem kann der IE keine Pseudoklassen ab, abgesehen von Verweisen. Du müsstest es also über Klassen regeln und bei IE-Usern auf die Pseudoklassenverwendung verzichten, bzw. es hinnehmen, dass er das nicht kann.

Wenn ich noch etwas anmerken darf. Du kannst bei deinem CSS eine ganze Menge "wegkürzen" in dem Du mehrere Elemente per Komma trennst. Hier mal ein Beispiel:

a { color: #000; }
p {
color: #000;
text-decoration: underline;
}
span {
color: #000;
font-style: italic;
}

Wird zu:

a, p, span { color: #000; }
p { text-decoration: underline; }
span { font-style: italic; }

[feuervogel]

Ja hallo!
Ich habe hier den css-Quelltext um buttoms, inputfelder und textareas anzupassen. klappt im FF auch echt super aber wie immer macht der IE stress! Kann mir da jemand helfen?
Der hover effekt funktioniert vorallem nicht!
MfG, Andy


ich weiß ja nicht, woher du dein wissen über css beziehst, aber ich u.a. hier:

http://www.css4you.de/hover.html

dort steht ausdrücklich

Leider unterstützen Opera und der Internet Explorer bis zur Version 6 :hover nur für <a>-Tags.

[Socrates]

@feuervogel: Danke! Wusste ich nicht!
@ |Coding: Gut zu wissen!
MfG, Andy

[Socrates]

Hallo!
Ich habe eure ratschläge beachtet und richtige klassen benutz. funktioniert prima! danke! Doch wie bekomme ich es hin einem textfeldeine bestimmte farbe zu geben, wenn der cursor nicht über ihm ist, aber in ihm geschrieben wird bzw es angeklickt ist? Wäre euch für eure Hilfe sehr dankbar!
MfG, Andy

[feuervogel]

input:focus

funktioniert aber nicht in allen browsern.

[Andes]

Du könntest bei Event onkeypress, onkeydown oder onfocus eine andere Farbe zuweisen und bei onblur wieder zurücksetzen.
Musst halt schauen welcher Event (onkeypress, onkeydown oder onfocus) in den meisten Browsern funktioniert.

[Socrates]

Danke erstmal! Im Moment habe ich die klasse normal und besuchen, die ich mit onmouseover onmouseout und class einbinde:

class="normal" onmouseover="className='besuchen';" onmouseout="className='normal';"

Jetzt müsste ich also eine neue klasse schreiben einführen:

class="normal" onfocus="className='schreiben';" onblur="className='normal';"

würde dass so funktionieren und viel interessanter funktioniert das in allen Browsern?
MfG, Andy

[Andes]

So kann man über einen Event keine Class-Namen ändern. Bei onmouseover und -out würde es aber nicht funktionieren, wenn die Felder mit der Tab-Taste angesteuert werden.

So könnte man es machen.

function farbwechsel(b) {
var feld = document.getElementById('inp');
//alert(feld.focus);
if(b === true) feld.style.background = '#ff0000';
else feld.style.background = '#fff';
}

<input type="text" value="" name="txt" id="inp" onfocus="farbwechsel(true)" onblur="farbwechsel(false)" />

Ich hab nun aber nicht alle möglichen Browser getestet. Im IE 6 und FF2 funktioniert es.

[Socrates]

versteh ich nicht! also ich habe es mit dem oberen probiert und das funktioniert hervorragend ich müsste allerdings dann wissen, wie das mit onfocus und onblur funktionieren sollte! Wäre für ein kleines beispiel, eine hilfestellung oder ein kleines tutorial dankbar! :-) kurz: bitte eine kleine wissensspende!!! :-D
MfG, Andy

[Andes]

Bin etwas verblüfft. Das habe ich auch noch nicht gekannt, dass dies so funktioniert.
Dann brauchst du ja bloß statt onmouseover onfocus und statt onmouseout onblur verwenden.