✔ Absenden-Button mit Hover und IE versteht es nicht!

[ray2mi]

Hallo

Habe ein kleines Kontaktformular mit einem Absenden Button.

Im FF sieht er aus wie er aussehen soll, hat seine Breite und Höhe und einen Hover effekt.

Der IE6 macht gleich gar nichts, also nichts mit hover effekt. Und der IE7 macht ganz seltsame Dinge...
er macht den Hover, dichtet aber beim Aktualisieren eine Borderline dazu und wenn man einfach so in das Fenster geht, dann setzt er die BorderLine an eine andere Stelle.

Ich habe auch ein Bild davon...die oberen 2 Varianten sind aus dem IE7, mal stellt er den Button so mal anders dar.

Die letzten beiden Buttons aus dem FF, wie sie aussehen sollen.

Jemand eine Idee?

 <div>
                    <input type="submit" id="button" value="Absenden" />
                  </div>

input#button {
  background-color: lightgrey;
  color: black;
   text-decoration: none;
   outline: none;
   font-size:90%;
   text-align: left;	
    height: 20px;
	width: 105px;
  border: none;
  border-right: 8px solid black;
  padding: 2px 0 4px 4px;;
    margin-top: 7px; /* Margingesamt zur Textarea 10px*/
}

input#button:hover,
input#button:focus {
  background-color: #bbb;
  color: black;
  border-color: cyan;
   cursor: pointer;
}

 

[Maik]

Hi,

du hast im ersten Regelblock nach der padding-Eigenschaft zwei Semikolons notiert, und der Farbname lightgray wird mit einem "a" geschrieben.

Was den IE6 angeht, sei darauf hingewiesen, dass er, wie schon seine Vorgänger, die :hover-Pseudoklasse ausschliesslich für das a-Element unterstützt. Abhilfe schafft hier http://code.google.com/p/ie7-js/ -> http://ie7-js.googlecode.com/svn/test/hover.html.

Zum Submit-Button und dem "seltsamen" Rahmen empfehle ich dir, dieses Element mal ohne jegliche CSS-Formatierung im IE7 genauer zu betrachten, und notfalls seine Zoom-Funktion zu nutzen, um das Element zu vergrößern - dann wirst du feststellen, dass auch hier die Rahmenecken von ihm "abgerundet" dargestellt werden.

Der grundsätzlichen Problematik, Formular-Elemente system- und browserübergreifend einheitlich zu gestalten, hat sich Roger Johansson in dem Artikel Styling form controls angenommen, und u.a. für Styled submit buttons die unterschiedlichen Browserinterpretationen vorgestellt.

mfg Maik

 

[ray2mi]

mhh na okay, wenn der ie6 das nicht will, dann muss ich es da eben raus nehmen aber der ie7 bekommt es nicht hin, auch nicht in der geänderten variante von dir.

Wenn ich ktualisiere dann sieht das Bild aus wie die buttons oben und wenn ich in ein anderen Tab gehe und dann wieder auf die Seite dann sieht der button so aus wie das zweite Paar der Buttons

ich verstehs nicht...kann man diesen button, Absenden, nicht auch ähnlich wie ein Link gestalten also mit a href und so weiter? Also wie bei einer Naviagtion?

 

[Maik]

ich verstehs nicht...kann man diesen button, Absenden, nicht auch ähnlich wie ein Link gestalten also mit a href und so weiter? Also wie bei einer Naviagtion?

Klar

http://de.selfhtml.org/javascript/objekte/forms.htm#submit rufst du per Link auf.

mfg Maik

 

[ray2mi]

und wo bzw. wie muss ich den Link mit dem Linknamen dann einfügen, weil in dem Beispiel wird ja nach einer Minute das ganze automatisch versendet :s

 

[Maik]

Mitdenken darfst du hier ruhig auch, was ich empfohlen habe.

<form name="Testform" action="/cgi-bin/auswert.pl" method="get">
<input type="text" size="40" name="Feld1"><br>
<input type="text" size="40" name="Feld2"><br>
<a href="#" onclick="document.Testform.submit()">Absenden</a>
</form>

mfg Maik

 

[D34DL1NES]

Versuch mal folgendes:

input#button:hover,
input#button:focus {
  background-color: #bbb;
  color: black;
  border-right: 8px solid cyan;
   cursor: pointer;
}

das müsste funktionieren.

 

[Maik]

Versuch mal folgendes:

input#button:hover,
input#button:focus {
  background-color: #bbb;
  color: black;
  border-right: 8px solid cyan;
   cursor: pointer;
}

das müsste funktionieren.

Das war auch mein erster Gedanke bzw. Vorschlag, den ich aber revidiert habe, da er keinerlei Besserung im IE7 zu Tage fördert.

mfg Maik

 

[ray2mi]

danke danke...und bei dem Linkziel muss dann praktisch mein CGI Programm rein bzw. ich habe da erstmal eine Domain zu einer Website an die das Formular gesendet wird und von da aus bekomme ich es dann als mail.

Muss ich dann überhaupt noch in der <form> ein action vergeben? Wenn ich es mit so einem Link mache?

 

[Maik]

Was steht denn in dem Beispiel im action-Attribut?

Im href-Attribut des Links wird kein Verweisziel zum CGI-Script angegeben.

mfg Maik