Hallo zusammen,
der IE macht mir mal wieder Probleme:
Wenn in einem Formular Checkboxen und "normale" Inputfelder verwendet werden, dann geht das Miststück hin und baut um die Checkbox noch einen Rahmen, der dem Inputfeld entspricht. Der IE übernimmt also die Werte aus der Klasse
.csc-mailform-field input auch für die Checkboxen, die ja auch Inputfelder sind.
Aber im CSS habe ich den Rahmen für die Checkboxen nicht gesetzt.
Kennt jemand dieses Problem?
.csc-mailform-check
{
border: 1px solid;
border-color: #BDBDBD;
padding: 0px;
margin: 0px;
vertical-align: left;
text-align: left;
display: block;
/*width: 10px;*/
clear:both;
}
.csc-mailform-field input
{
background-color: #ffffff;
border: 1px solid;
border-color: #BDBDBD;
clear: right;
font-family: Tahoma, Verdana, sans-serif;
font-size: 12px;
line-height: 15px;
width: 200px;
}
Poste mal bitte den passenden HTML-Auszug!
Hallo Laptop24,
erbarmt sich ja doch jemand meiner :p
Danke im Voraus,
Andrea
Hier ist das gesamte CSS für das Formular
********************************* MAILFORM *********************************/
/* Felder und Submit Button für Email-Formulare */
fieldset
{
width: 450px;
margin-left: 0px;
}
.csc-mailform-field
{
clear: left;
border: none;
}
.csc-mailform-field label
{
margin: 2px;
font-size: 12px;
line-height: 15px;
color: #000000;
float: left;
text-align: left;
margin-right: 0px;
width: 300px;
font-family: Tahoma, Verdana, sans-serif;
}
.csc-mailform-field input
{
background-color: #ffffff;
border: 1px solid;
border-color: #BDBDBD;
clear: right;
font-family: Tahoma, Verdana, sans-serif;
font-size: 12px;
line-height: 15px;
width: 200px;
}
.csc-mailform-check
{
border: none;
padding: 0px;
margin-left: 0px;
vertical-align: left;
display: block;
width: 15px;
clear:left;
!important;
}
.csc-mailform-label
{
clear: left;
margin:2px;
font-size:12px;
line-height:15px;
color:#000000;
/*float: left;*/
text-align: left;
margin-right: 0px;
width: 250px;
display: block;
font-family: Verdana, Geneva, Helvetica, sans-serif;
padding-top: 5px;
padding-bottom:5px;
}
.csc-mailform-field textarea
{
background-color: #ffffff;
border: 1px solid;
border-color: #BDBDBD;
font-family: Tahoma, Verdana, sans-serif;
font-size: 12px;
line-height: 15px;
}
/*Ausrichtung eines einzelnen Checkbuttons via ID*/
#mailformTEST
{
border: none;
position: absolute;
left: 150px;
padding: 0px;
margin-left: 10px;
vertical-align: right;
/*text-align: left;*/
display: block;
width: 15px;
/*clear:both;*/
}
/*Ausrichtung des Submit Buttons*/
#mailformformtype_mail
{
margin-left: 0px;
margin-top: 15px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-color: #CCCCCC;
border-width: 1px;
border-top-color: #ffffff;
border-left-color: #ffffff;
border-bottom-color: #A2A2A2;
border-right-color: #A2A2A2;
border-style: solid;
width: 100px;
}
das ist ja nur das CSS, poste mal den HTML Code dazu
Sorry,
hier der HTML-Teil, etwas abgespeckt, aber alles wichtige drin.
Das Problem sind die oberen Checkboxen. Denn die sind ja auch Input-Felder. Und der IE verbindet diese beiden Klassen irgendwie.
Dann ist um die Checkbox herum nochmal ein Inputfeld mit den Maßen des Infputfeldes.
Viele Grüße
Andrea
<fieldset class="csc-mailform">
<div class="csc-mailform-label">
<strong>
Tagungspreise:
</strong>
</div>
<div class="csc-mailform-label">
Mitglied:
</div>
<div class="csc-mailform-field">
<label for="mailformmitglied_790">
Euro 790,--
</label>
<input type="checkbox" class="csc-mailform-check" id="mailformmitglied_790" name="mitglied_790" value="1" />
</div>
<div class="csc-mailform-field">
<label for="mailformTag29092006">
Euro 400,--
</label>
<input type="checkbox" class="csc-mailform-check" id="mailformTag29092006" name="Tag29092006" value="1" />
</div>
<div class="csc-mailform-label">
Alle genannten Preise inkl. 16% MwSt. Zahlbar nach Rechnungserhalt.
</div>
<div class="csc-mailform-field">
<label for="mailformFirma">
Firma:
</label>
<input type="text" value="" size="20" id="mailformFirma" name="Firma" />
</div>
<div class="csc-mailform-field">
<label for="mailformAnsprechpartner">
Ansprechpartner:
</label>
<input type="text" value="" size="20" id="mailformAnsprechpartner" name="Ansprechpartner" />
</div>
<div class="csc-mailform-field">
<label for="mailformStrasse">
Straße:
</label>
<input type="text" value="" size="20" id="mailformStrasse" name="Strasse" />
</div>
<div class="csc-mailform-field">
<label for="mailformPlz">
PLZ:
</label>
<input type="text" value="" size="20" id="mailformPlz" name="Plz" />
</div>
<div class="csc-mailform-field">
<label for="mailformOrt">
Ort:
</label>
<input type="text" value="" size="20" id="mailformOrt" name="Ort" />
</div>
<div class="csc-mailform-field">
<label for="mailformLand">
Land:
</label>
<input type="text" value="" size="20" id="mailformLand" name="Land" />
</div>
<div class="csc-mailform-field">
<label for="mailformTelefon">
Telefon:
</label>
<input type="text" value="" size="20" id="mailformTelefon" name="Telefon" />
</div>
<div class="csc-mailform-field">
<label for="mailformTelefax">
Telefax:
</label>
<input type="text" value="" size="20" id="mailformTelefax" name="Telefax" />
</div>
<div class="csc-mailform-field">
<label for="mailformEmail">
Email:
</label>
<input type="text" value="" size="20" id="mailformEmail" name="Email" />
</div>
<div class="csc-mailform-label">
<strong>
Wir haben über die Veranstaltung wie folgt erfahren:
</strong>
</div>
<div class="csc-mailform-field">
<label for="mailformTest">
Test
</label>
<input type="checkbox" class="csc-mailform-check" id="mailformTest" name="Test" value="1" />
</div>
<div class="csc-mailform-field">
<label for="mailformTest2">
Test2
</label>
<input type="checkbox" class="csc-mailform-check" id="mailformTest2" name="Test2" value="1" />
</div>
<div class="csc-mailform-field">
<input type="submit" class="csc-mailform-submit" value="anmelden" id="mailformformtype_mail" name="formtype_mail" />
</div>
</fieldset>
das liegt an folgendem eintrag:
.csc-mailform-field input
{
background-color: #ffffff;
border: 1px solid;
border-color: #BDBDBD;
clear: right;
font-family: Tahoma, Verdana, sans-serif;
font-size: 12px;
line-height: 15px;
width: 200px;
}
Damit sagst Du ja allen inputfeldern, dass sie einen rahmen haben sollen... das müsstest du dann schon etwas differenzierter machen...
z.B. zusätzlich noch folgenden code hinzufügen (auf Grundlage deines codes)
.csc-mailform-field input.csc-mailform-check
{
border: none;
}
Hi LineMan,
danke für die Antwort.
Das funktioniert soweit. Danke.
Allerdings ist es trotzdem sehr lästig.
Der Rahmen ist zwar weg, aber der Platz, den die Inputfelder einnehmen, z. B. 200px, nimmt die Checkbox trotzdem ein. Der Checkbutton ist quasi zentriert auf diesen 200px ausgerichtet.
Wenn ich also noch eine Breite angebe, dann gilt das aber leider für alle Checkboxen, auch die, die über IDs ausgerichtet werden.
Ich muss mich damit nochmal in Ruhe auseinandersetzen.
Danke für deine Hilfe,
Andrea
Dann gib doch Deinen input-Feldern, die 200px breit sein sollen, eine Klasse. Und nur dieser Klasse weist Du dann im CSS die 200px zu...