Hallo zusammen,
ich habe ein großes Prob mit einem fertigen CGI von Domainfactory. Es handelt sich um einen Formmailer. Nun möchte ich die Sende und Löschen Buttons meinem Design anpasssen. Hier fängt es dann an....beim Firefox geht es und beim IE klappt es nicht
Ich muss dazu sagen, dass es Buttons mit "Hover-Effekt" sind. Tut aber eigentlich nix zur Sache, da ich welche auch in meiner Navi habe und hier keine Probleme mit dem IE habe. Habt Ihr mir vielleicht nen Tipp, an was es liegen kann. Wie muss ich die Zeile formatieren, dass ich einen Hover-Button im IE hinbekomme?
Code:
<input type="SUBMIT" name="Submit" value="Senden" class="form11">
Bin für jeden Tipp dankbar.
Creez sveni
Edit:
Hier habe ich zur Ergänzung mein HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="css/cont06.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
<div class="box_re">
<form action="/system-cgi/formmail.pl" method="post">
<input type="hidden" name="recipient" value="EMAIL">
<input type="hidden" name="subject" value="Kontaktformular">
<input type="hidden" name="required" value="Vorname,Name,email,nachricht">
<div class="box_re3">
<label for="Name" class="label">Name*:</label>
<label for="Vorname" class="label">Vorname*:</label>
<label for="Firma" class="label">Firma;</label>
<label for="Strasse" class="label">Strasse & Nr.:</label>
<label for="PLZ" class="label">PLZ:</label>
<label for="Ort" class="label">Ort:</label>
<label for="email" class="label">E-Mail*:</label>
<label for="Telefon" class="label">Telefon:</label>
</div><!--ende box_re3-->
<div class="box_re2">
<input type="text" id="Name" name="Name" size="30" class="input"><br>
<input type="text" id="Vorname" name="Vorname" size="30" class="input"><br>
<input type="text" id="Firma" name="Firma" size="25" class="input"><br>
<input type="text" id="Strasse" name="Strasse" size="30" class="input"><br>
<input type="text" id="PLZ" name="PLZ" size="5" class="input"><br>
<input type="text" id="Ort" name="Ort" size="30" class="input"><br>
<input type="text" id="email" name="email" size="30" class="input"><br>
<input type="text" id="Telefon" name="Telefon" size="30" class="input"><br>
</div><!--ende box_re3-->
<div class="box_re3">
<label for="Betreff" class="label">Betreff:</label>
<label for="nachricht" class="label">Ihre Nachricht*:</label>
</div><!--ende box_re3-->
<div class="box_re2">
<input type="text" id="Betreff" name="Betreff" size="40" class="input"><br>
<textarea name="Ihre Nachricht" id="nachricht" rows="10" cols="29" class="input2"></textarea>
</div><!--ende box_re2-->
<p class="p_bem">Felder mit * müssen ausfefüllt werden</p>
<ul class="form10">
<li class="form11"><input type="SUBMIT" name="Submit" value="Senden" class="form11"></li>
<!--<li class="form11"><input type="SUBMIT" name="Submit" value="Senden" class="form11"></li>-->
</ul><!--ende form-->
</form>
</div><!--Ende Box re-->
</div><!--Ende Content-->
</body>
</html>
Und hier mein CSS
Code:
/*Stylesheet Contentbereich Contact Stand 131106*/
/*Allgemeine Anweisungen (Text, Tabelle, Überschriften, etc.)*/
/*Hier sind die spezifischen Anweisungen für das 2Spalten-Design angegeben (höhenabhängige Anweisungen)*/
#content {
border-color: Black;
border-style: solid;
border-width: 1px;
background-color: White;
width: 765px;
height: 1460px;
margin: auto;
}
.textbox {
border-color: Green;
border-style: solid;
border-width: 1px;
width: 320px;
height: 500px;
float: left;
/*padding: 0;
margin: 0;*/
}
/*Box für die Hintergrundfarbe in der linken Spalte*/
.textbox2 {
border-color: Green;
border-style: solid;
border-width: 1px;
background-color: #E0F0FF;
width: 245px;
padding-left: 30px;
}
/*Trennbalken senkrecht zwischen li und re Spalte*/
.balken01 {
background-image: url(../grafiken/trennb_senkr.jpg);
background-repeat: repeat-y;
width: 1px;
height: 1460px;
float: left;
margin-top: 0;
}
.balken03 {
/*border-color: Red;
border-style: solid;
border-width: 1px;*/
background-image: url(../grafiken/rahmen-li.jpg);
background-repeat: repeat-y;
width: 5px;
height: 1460px;
float: left;
padding: 0;
margin: 0;
}
.balken04 {
/*border-color: Red;
border-style: solid;
border-width: 1px;*/
background-image: url(../grafiken/rahmen-re.jpg);
background-repeat: repeat-y;
width: 5px;
height: 1460px;
float: right;
margin-top: 0;
}
.balken05 {
background-image: url(../grafiken/rahmen_unten.jpg);
background-repeat: repeat-x;
width: 745px;
height: 5px;
padding: 0;
overflow: hidden;
float: left;
clear: right;
}
/*Diese Anweisung wird benötigt, damit der Pfeil im Navibutton (Header) bei aktivem
Zustand erhalten bleibt. Diese Anweisung muss bei jeder Site seperat zugewiesen werden*/
li .a6:visited {
background-image: url(../grafiken/header/b_kont.jpg);
background-repeat: no-repeat;
background-position: 0 -29px;
width: 115px;
height: 29px;
}
/*----------------------------Definition des Formularbereiches---------------------------------------*/
/*Box für die Formularbezeichnungen, damit sich die Formularfelder zuum Ausfüllen re neben der ersten
Beschreibung ausrichten*/
/*Definition des gesamten re Bereichs (Formularbereich)*/
.box_re {
border-color: Blue;
border-style: solid;
border-width: 1px;
background-image: url(../grafiken/back02.jpg);
background-repeat: repeat;
width: 400px;
height: 600px;
float: left;
}
/*Box für die Formularfelder zum Ausfüllen, damit eine gleichmäßige Linksausrichtung gewährleistet ist*/
.box_re2 {
border-color: Blue;
border-style: solid;
border-width: 1px;
float: left;
margin-top: 30px;
}
/*Box für die Formularbezeichnungen*/
.box_re3{
/*border-color: Red;
border-style: solid;
border-width: 1px;*/
float: left;
clear: left;
margin-top: 30px;
padding: 0;
width: 115px;
}
/*Definition der Formularbezeichnungen*/
.label {
/*border-color: Blue;
border-style: solid;
border-width: 1px;*/
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: normal;
font-style: normal;
text-align: left;
color: Black;
float: left;
clear: left;
display: inline;
margin-top: 5px;
margin-bottom: 6px;
margin-left: 20px;
white-space: nowrap;
}
/*Definition der Formularbezeichnungen*/
.form01 {
/*border-color: Blue;
border-style: solid;
border-width: 1px;*/
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: normal;
font-style: normal;
text-align: left;
color: Black;
float: left;
clear: left;
display: inline;
}
/*Definition der Formularfelder zum Ausfüllen*/
.input {
/*font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: normal;
font-style: normal;
text-align: left;
color: Black;*/
float: left;
clear: left;
display: inline;
/*border-style: solid;
border-width: 1px;
border-color: Blue;*/
margin-top: 5px;
margin-bottom: 0px;
margin-left: 10px;
height: auto;
}
/*Definition des Nachrichtenfelds zum Ausfüllen*/
.input2 {
/*font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: normal;
font-style: normal;
text-align: left;
color: Black;*/
float: left;
clear: left;
display: inline;
/*border-style: solid;
border-width: 1px;
border-color: Blue;*/
margin-top: 5px;
margin-bottom: 0px;
margin-left: 10px;
}
/*Definition für Pflichtfelder des Formulars*/
.p_bem {
border-style: solid;
border-width: 1px;
border-color: Blue;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-style: normal;
text-align: center;
color: Black;
float: left;
display: inline;
margin-left: 125px;
margin-top: 10px;
padding: 0;
}
/*-----------------------------Definition der Formularbuttons Senden und Löschen---------------------*/
ul.form10 {
list-style-type: none;
margin: 0;
padding: 0;
}
li submit {
border-color: Black;
border-style: solid;
border-width: 1px;
font-size: 10px;
font-family: "Trebuchet MS", Arial, sans-serif;
font-style: normal;
font-weight: bold;
text-decoration: none;
text-indent: 15px;
line-height: 25px;
vertical-align: middle;
color: Black;
display: block;
}
/*Defintion des Button-Hover-Active-Effekts*/
li .form11 {
background-image: url(../grafiken/form_buttons_kompl1.jpg);
background-repeat: no-repeat;
width: 65px;
height: 25px;
}
li .form11:hover, li .form11:active {
background-image: url(../grafiken/form_buttons_kompl1.jpg);
background-repeat: no-repeat;
background-position: 0 -25px;
width: 65px;
height: 25px;
}
/*
li input {
background-image: url(../grafiken/form_buttons_kompl1.jpg);
background-repeat: no-repeat;
width: 65px;
height: 25px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
text-align: center;
color: Black;
text-decoration: none;
line-height: 25px;
vertical-align: middle;
margin: 0;
float: left;
color: Black;
display: block;
}
*/
Hier sieht man dann im IE, dass der HOvereffekt nicht funzt
Hat jemand nen Tipp? Danke vielmals.