<input>-Formatierung in älteren IE-Versionen

[MaHzeL]

Guten Tag,

ich habe da ein kleines Problem mit meiner Homepage, welche leider nur im Firm Intranet läuft.

Es geht aber um folgendes.

Ich habe ein Forumlar, in dem unten natürlich auch ein Input Button ist.

Per CSS alles schön angepasst und in FF funktioniert auch alles Einwand frei.

Wenn man dann aber mit dem Cursor in den Bereich des Form Feldes geht, wird der Input Button mit einem zusätzlichen Rahmen angezeigt, ein normaler Rahmen ist bereits vorhanden.

Ich dachte erst es liegt daran, dass IE < 8 kein focus bei input Felder kann, jedoch funktioert auch da die JS Variante nicht, bzw das ist nicht der Fehler (Per JS Hintergrund bei Focus geädnert, funktioniert Einwand frei)

Es muss also an etwas anderen liegen.

Hoffe Ihr versteht mein Problem und könnt mir helfen.

MFG

Ach ja hier noch ein wenig Quell coder

.input_over {
color:#C5004B;
background: #FFFFFF;
font-family: Arial;
font-weight: bold;
font-size: 12px;
border:1px solid #BEBEBE;
}

input, input:focus, input:active, input:visited{
background: #FFFFFF;
color: #6E6E6E;
font-family: Arial;
font-weight: bold;
font-size: 12px;
border:1px solid #BEBEBE;
}

<input type="Submit" name="ProdukteBtn" value="Anzeigen" onmouseover="this.className='input_over'" onmouseout="this.className='input'"/>

 

[Maik]

Hi,

setz hier mal jeweils einen Punkt vor "input", damit der Klassenbezeichner korrekt benannt wird, der beim onmouseout-Event aufgerufen werden soll:

.input, .input:focus, .input:active {
background: #FFFFFF;
color: #6E6E6E;
font-family: Arial;
font-weight: bold;
font-size: 12px;
border:1px solid #BEBEBE;
}

und notiere im <input>-Element das Attribut class="input".

Die Pseudoklasse :visited (für bereits besuchte Seiten) ergibt bei einem Formular-Button wenig Sinn.

mfg Maik

 

[MaHzeL]

Ne funktioniert noch immer nicht.

Hatte ich im vorhinein auch shcon probiert.

Ich denke es liegt an der form. Gibt es dort bestimmte Einstellungen, die man vornehmen muss. Sowas wie bei focus no change oder so?

Weil das ist absolut wichtig.

Das eine Firm interne Applications Homepage und die muss absolut an dem Application Guide angelehnt sein.

Und aus den CSS bzw Quellcode der bereits vorhandenen Homepages sehe ich keinen Unterschied zu mir.

!

 

[Maik]

Mit meinen beiden Ratschlägen funktioniert es erwartungsgemäß einwandfrei.

Das <form>-Element spielt hierbei überhaupt keine Rolle. Es gibt da auch keine sonderlichen Einstellungen, die zu beachten wären.

mfg Maik

 

[MaHzeL]

Das dachte ich auch.

Das Input Feld nimmt die Klasse ja problemlos an.

Es geht darum wenn man zb in dem Formularbereich auf Text oder so klickt, ändert sich der Button und bekommt einen Rahmen.

Klickt man weider auserhalb der form Bereiches ist es wieder normal.

Das ist bei ff nicht der Fall...

 

[Maik]

Ich weiß leider nicht so recht, worauf du nun mit Blick auf den Firefox-Browser hinaus willst.

Vielleicht hilft dir hier auch der Event-Handler onfocus weiter:

onfocus="this.className='input_over'"

Da du hier JS für die älteren IE-Versionen heranziehst, sollte dir anstelle des Tauschens der Klassenbezeichner http://code.google.com/p/ie7-js/ mit dem :focus-Beispiel http://ie7-js.googlecode.com/svn/test/focus.html weiterhelfen.

mfg Maik

 

[MaHzeL]

Das mit dem focus von dem Button hat es nicht zu tun.

Es ist wenn ich neben den Button oder auf iwelche Schrift gehe, die in dem <form> tag steht, dann bekommt der Button einen schwarzen Rahmen.

Klicke ich außerhalb des <form> Tag auf irgend etwas, ist der Button weider normal.

Das macht für mich alles keinen Sinn..

 

[Maik]

Für mich ergibt das zunächst mal ebenso keinen Sinn.

mfg Maik

 

[Maik]

... es sei denn, der Text ist jeweils in ein <label>-Element eingebettet - siehe http://de.selfhtml.org/html/formulare/anzeige/label.htm

mfg Maik

 

[MaHzeL]

Ne ist es auch nicht.

es sind lediglich 2 select felder und abschließend unten der Button alles in einem <form> eingebunden und per CSS mit <div> gestaltet.

Auch bei Tabellendesign kommt der Fehler.

Und er kommt bei jedem Button.

Wenn ich aber ein select Feld oder textfeld oder ein Bild als Button habe, ist dies nicht der Fall nur bei type="submit".

Aber da ich dei select Felder ja per POST auslese brauche ich den Button.

Und ein Bild möchte ich nicht nehmen, da die nicht Variable gestaltet ist.

Hier der Code von dem Forumlar:

<form name="Eingabe" method="POST" action="index.php?content=produkte">

<h2>IT Output Management</h2>
<h3>Produkte</h3>
<div class="form"><p>Druckerstandartbereich:</p></div>
<div class="form_end">
<select name="std" size="1">
<option value='Melsungen'>Melsungen</option>
<option value='Tuttlingen'>Tuttlingen</option>
<option value='2'>Alle</option>
</select>
</div>
<div class="form"><p>HoMuFu:</p></div>
<div class="form_end">
<select name="home" size="1">
<option value='1'>Ja</option>
<option value='*'>Nein</option>
<option value='2'>Alle</option>
</select>
</div>
<div class="form"></div>
<div class="form_end"><div><input name="ProdukteBtn" type="submit" value="Anzeigen" class="input" onmouseover="this.className='input_over'" onmouseout="this.className='input'"/></div></div>
<div>
<p>Druckerstandartbereich Melsungen umfasst: Melsungen, Glandorf, Berlin...<br>
Druckerstandartbereich Tuttlingen umfasst: Tuttlingen...</p>
</div>
</form>

UPDATE

Mittler Weile habe ich das problem analysiert. Es liegt einfach am IE.

Das ist auf jeder Seite so wo Buttons sind.

Doch nur duch meine Button Anpassung mit CSS hat der nicht so einen optisch schönen Rahmen gemacht, sondern nen hässlichen schwarzen Rahmen.

Es ist aber nicht der onfocus, muss nur noch wissen wo ich das jetzt bearbeiten kann.

Kleine test an Euch:

geht mit IE auf eine Page mit einem Formular, guckt Euch den Button und geht dann in irgend ein Eingabefeld, dann verändert sich der Button. Der Rahmen ist bei mir eben nur schwarz.

Wie heißt da die Klasse um das anzupassen

MFG