CSS submit button IE

Seyonne · 21 Juni 2011

Hi,

Ganz einfaches Problem, überall (Google suche) steht es geht aber bei mir net..

Submit-Button Textfarbei bei hover im IE..
Mozilla, G. Chrome, Opera alles wunderbar.

Im IE ist der button zwar dunkelgrau und die Schriftfarbe weiss aber der Rest, insbesondere :hover geht net.

Ich will nur 2 buttons entsprechend ändern, also nicht für alle form anpassen.

PHP:

.submitlogin{
  border: none;
  margin-right: 1em;
  margin-top: 0.4em;
  padding: 3px;
  text-decoration: none;
  font-size: 10px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #2E3640;
  color: white;
  -moz-box-shadow: 0 1px 0 white;
}
.submitlogin:hover{
  border: none;
  margin-right: 1em;
  margin-top: 0.4em;
  padding: 3px;
  text-decoration: none;
  font-size: 10px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #000000;
  color: #FF9955;
  -moz-box-shadow: 0 1px 0 white;
  cursor: pointer;
}

Desweiteren habe ich in nem Tutorial etwas gesehen wie:
input[type=submit]:hover{}
Aber da scheint der IE auch nicht zu wissen um welches Element es sich handelt?

Cheffchen · 21 Juni 2011

Hallo,

dann würde ich mal darauf tippen das dein code nicht valide ist :O).
Das was zeigst ist ok und funktioniert, halt das mit den rundungen naturlich nicht im IE :O).

input[type=submit]:hover{}
Aber da scheint der IE auch nicht zu wissen um welches Element es sich handelt?

also das macht alle senden inputs und funktioniert so auch im IE ohne probleme.

Cheffchen

Seyonne · 21 Juni 2011

das dein code nicht valide ist

PHP:

<input type="submit" name="submit" value="Login" style="width:145px" class="submitlogin" />

PHP:

body {
background: #FEF3DE;
bbackground-image: url("../pics/bg3.png");
background-repeat: fixed;
}
html,input,textarea {
  font-family: Arial, Helvetica, sans-serif; font-size: 100.01%;
}
hr {
  border: none; border-top: 1px dotted; border-color: #FF9933;
}
h1 {
  font-size: 1.3em; margin: 0em; padding: 0em;
}
h2 {
  font-size: 1.1em; margin: 0em; padding: 0.2em;
  background-color: #FFEEDD;
}
legend {
  font-weight: bold; border: 1px solid #FF9933; padding: 0.2em 0.4em;
  background-color: #FFEEDD;
}
table {
  width: 100%;
}
th,td {
  vertical-align: top;
}
#login_form {
  display: block;
}
.submitlogin{
  border: none;
  margin-right: 1em;
  margin-top: 0.4em;
  padding: 3px;
  text-decoration: none;
  font-size: 10px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #2E3640;
  color: white;
  -moz-box-shadow: 0 1px 0 white;
}
.submitlogin:hover{
  border: none;
  margin-right: 1em;
  margin-top: 0.4em;
  padding: 3px;
  text-decoration: none;
  font-size: 10px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #000000;
  color: #FF9955;
  -moz-box-shadow: 0 1px 0 white;
  cursor: pointer;
}
#page {
  width: 100%; margin: auto;
}
#header {
  height: 140px;
  margin-bottom: 0em; border-bottom: 0px solid; padding: 0em;
  background-color: #FF9933;
  background-image: url("../pics/headbg.png");
  text-align: center;
}
#main {
  border-right: 0px solid; border-left: 0px solid; padding-left: 1em;
  padding-right: 1em;
}
#navi {
  width: 160px; height: 400px; float: left;
  background-image: url("../pics/extraboxbg.png");
}
#extra {
  width: 10em; float: right; padding-bottom:0em;
}
#content {
  height: 400px;
  border-left: 1px dotted #FF9933; padding-left: 1em;
  border-right: 1px dotted #FF9933; padding-right: 1em;
  margin-left: 11em; margin-right: 11em;
  background-color: #FEF3DE;
}
#footer {
  clear: both; font-size: 0.8em; text-align: center; font-style: italic;
  margin-top: 1em; padding: 0.4em; border: 1px solid; font-size: 0.8em;
  background-color: #FFDDCC; margin-top: 2em; position: relative; bottom: 10px; vertical-align: center;
}
#navi ul {
  margin: 1em; padding: 0;
}
#navi li {
  list-style: none; margin-left: -0.4em; padding: 0.2em; display: block;
  margin-bottom: 0.4em; background-color: #FFEEDD;
  border: 1px solid #FF9933;
}
#navi li a {
  text-decoration: none; color: #000000;
}
.extrabox1 {
  float: right;
  background: #FEF3DE;
  font-size: 0.8em; text-decoration: none; color: #FFFFFF;
  margin-bottom: 0.2em; margin-top: 0em;
  border: 0px dotted; color:#F8A529 ;
}
.extrabox {
  background: #FEF3DE;
  font-size: 0.8em; text-decoration: none; color: #FFFFFF;
  margin-bottom: 0em; margin-top: 0em;
  border: 1px dotted; color:#F8A529 ;
}
.error {
  background-color: #FF9933; border: 1px solid #FF9933;
  padding: 0.2em; color: #FF9933;
}

T!P-TOP · 21 Juni 2011

Beim hover soll sich nur die Hintergrund- und Schriftfarbe ändern?
Dann tausche...

PHP:

.submitlogin{
  border: none;
  margin-right: 1em;
  margin-top: 0.4em;
  padding: 3px;
  text-decoration: none;
  font-size: 10px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #2E3640;
  color: white;
  -moz-box-shadow: 0 1px 0 white;
}
.submitlogin:hover{
  border: none;
  margin-right: 1em;
  margin-top: 0.4em;
  padding: 3px;
  text-decoration: none;
  font-size: 10px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #000000;
  color: #FF9955;
  -moz-box-shadow: 0 1px 0 white;
  cursor: pointer;
}

...durch folgendes aus...

PHP:

input.submitlogin{
  border: none;
  margin-right: 1em;
  margin-top: 0.4em;
  padding: 3px;
  text-decoration: none;
  font-size: 10px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #2E3640;
  color: white;
  cursor: pointer;
}

input.submitlogin:hover{
  background: #000000;
  color: #FF9955;
}

Seyonne · 21 Juni 2011

Das ändert leider nichts.
Einziger Hinweis das es sich um 'nem Link bzw button handelt is der Mauszeiger.

Aber danke fürs entfernen der überflüssigen Zeilen

Brauch man das input vor .class?

Cheffchen · 21 Juni 2011

Hallo,

am css sehe ich keine fehler, also liegt der fehler im html teil.
Wie gesagt bei mir funzt das.

mach doch mal eine leere Seite mit allen css und nur den standard sachen doctype, html, head, body und den submit, funktioniert das dann immer noch nicht?
also alles löschrn ausser die submit bzw rest submit.

Ist die Seite Valide?

Cheffchen

T!P-TOP · 21 Juni 2011

Brauch man das input vor .class?

Naja, nicht umbedingt. Wenn ein Selektor nicht greift, kann man ihm damit halt mehr Gewicht verleihen.
Überschreibst du vielleicht die CSS Eigenschaften? Setzt mal n !important dran:

PHP:

input.submitlogin:hover{
  background: #000000 !important;
  color: #FF9955 !important;
}

Seyonne · 21 Juni 2011

PHP:

<html>
<head>
 <title>Codeigniter TEST</title>
 <link rel="stylesheet" href="http://localhost/ci202/css/style.css">
</head>
<body>
  <h1>Login</h1>
  <form action="http://localhost/ci202/index.php/register/validate_login" method="post" accept-charset="utf-8">
  <input type="submit" name="submit" value="Login" style="width:145px" class="submitlogin" />
  </form>
</body>
</html>

Auch mit !important und basic HTML keine Änderung.

T!P-TOP · 21 Juni 2011

machs mal mit Doctype und schreib anstatt...

HTML:

<link rel="stylesheet" href="http://localhost/ci202/css/style.css">

folgendes...

HTML:

<link rel="stylesheet" type="text/css" href="http://localhost/ci202/css/style.css">

Cheffchen · 21 Juni 2011

HA, hab disch :O)

na ohne doctype ist klar.
deswegen meine Frage wegen Valide :O)

es kann manchmal doch so einfach sein :O)

Cheffchen

Seyonne · 21 Juni 2011

HTML:

<link rel="stylesheet" type="text/css" href="http://localhost/ci202/css/style.css">

Änderte nichts, <!DOCTYPE html> ist aber die Lösung!

Ich wnur das Frontpage das immer rein gemacht hatte, muss mal schauen was Doctype eigentlich macht oO.

Vielen Dank!

blubb · 16 November 2011

hat jemand dieses problem gelöst?
habes es ebenfalls mit den hinweisen von hier versucht, aber auch bei mir funktioniert es im IE nicht. jemand noch ne lösungsmöglichkeit?

<html>
<head>
<link rel="stylesheet" type="text/css" href="style_test.css">

</head>
<body bgcolor="red">
<input type= "submit" value="test" class="button">

</body>
</html>

css:

.button
{
font-family: Arial;
font-size: 15 px;
color: white;
border:none;
background: none;
background-image: url(bt.png);
background-repeat:no-repeat;
/*background-attachment:fixed;*/
width: 142px;
height: 21 px;
}
.button:hover
{
border:none ;
background-image: url(bt_onClick.png);
text-decoration: underline ;
}

threadi · 16 November 2011

Im letzten Beitrag wurde geschrieben, dass der Doctype die Lösung war. Hast Du den auch angegeben?

blubb · 16 November 2011

damit hab ich leider keine erfahrung. was is damit gemeint?

threadi · 16 November 2011

Siehe:
SELFHTML: HTML/XHTML / Allgemeine Regeln fr HTML / Grundgerst einer HTML-Datei

CSS submit button IE

Seyonne

Mitglied

Cheffchen

Senior HTML'ler

Seyonne

Mitglied

T!P-TOP

Mitglied

Seyonne

Mitglied

Cheffchen

Senior HTML'ler

T!P-TOP

Mitglied

Seyonne

Mitglied

T!P-TOP

Mitglied

Cheffchen

Senior HTML'ler

Seyonne

Mitglied

blubb

Neues Mitglied

threadi

Moderator

blubb

Neues Mitglied

threadi

Moderator

Neueste Beiträge