Ich nutze das Powermail-Formular für das Kontaktformular auf meiner Webseite. Habe das Formular über das BE und dem BE Formular erstellt.
Nun will ich es per CSS anpassen. Habe das schon so ganz gut hinbekommen. Allerdings habe ich Probleme mit der Darstellung im IE & FF. Im IE ist alles so wie ich es will. Im FF nicht, da fehlen anscheinend die Anweisungen komplett.
Ich kann hier leider kein Screenshot einfügen, würde aber den Experten hier eine PM schicken mit dem direkten Link zum Formular!
Ich füge mal den HTML Code des Formulares hier ein:
BEGIN: Content of extension "powermail", plugin "tx_powermail_pi1"
-->
<div class="tx-powermail-pi1">
<div class="tx-powermail-pi1_formwrap tx-powermail-pi1_formwrap_767">
<form name="mjfcjam" id="xyz" action="index.php?id=117&tx_powermail_pi1[mailID]=767&cHash=36f51ab826" method="post" class="tx_powermail_pi1_form" enctype="multipart/form-data">
<fieldset class="tx-powermail-pi1_fieldset tx-powermail-pi1_fieldset_kontakt tx-powermail-pi1_fieldset_5" id="tx-powermail-pi1_fieldset_5">
<legend>Kontakt</legend>
<div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_text tx_powermail_pi1_fieldwrap_html_5">
<label for="uid5">Name:<span class="powermail_mandatory">*</span></label>
<input type="text" name="tx_powermail_pi1[uid5]" value="" class="required validate-alpha powermail_xyz powermail_text powermail_uid5" id="uid5" tabindex="1" />
</div>
<div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_text tx_powermail_pi1_fieldwrap_html_6">
<label for="uid6">Vorname:<span class="powermail_mandatory">*</span></label>
<input type="text" name="tx_powermail_pi1[uid6]" value="" class="required validate-alpha powermail_xyz powermail_text powermail_uid6" id="uid6" tabindex="2" />
</div>
<div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_text tx_powermail_pi1_fieldwrap_html_7">
<label for="uid7">Email:<span class="powermail_mandatory">*</span></label>
<input type="text" name="tx_powermail_pi1[uid7]" value="" class="required validate-email powermail_xyz powermail_text powermail_uid7" id="uid7" tabindex="3" />
</div>
<div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_textarea tx_powermail_pi1_fieldwrap_html_8">
<label for="uid8">Text:<span class="powermail_mandatory">*</span></label>
<textarea name="tx_powermail_pi1[uid8]" class="required powermail_xyz powermail_textarea powermail_uid8" id="uid8" tabindex="4" ></textarea>
</div>
<div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_captcha tx_powermail_pi1_fieldwrap_html_9">
<label for="uid9"><span class="powermail_mandatory">*</span></label>
<input type="text" value="" name="tx_powermail_pi1[uid9]" class="required powermail_xyz powermail_captcha powermail_uid9" id="uid9" tabindex="5" />
<img src="typo3conf/ext/captcha/captcha/captcha.php" alt="" class="powermail_captcha powermail_captcha_captcha" />
</div>
<div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_submit tx_powermail_pi1_fieldwrap_html_10">
<input type="submit" Absendenclass="powermail_xyz powermail_submit powermail_submit_uid10" tabindex="6" />
</div>
<div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_reset tx_powermail_pi1_fieldwrap_html_11">
<input type="reset" Löschenclass="powermail_mjfcjam powermail_reset powermail_reset_uid11" tabindex="7" />
</div>
</fieldset>
</form>
Hier der CSS Code:
.tx-powermail-pi1{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.tx-powermail-pi1{
margin:0 auto;
width:400px;
padding:14px;
border:solid 2px #4e5155;
background:#e3e3e3;
}
/* ----------- stylized ----------- */
.tx-powermail-pi1 h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
.tx-powermail-pi1 p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #4e5155;
padding-bottom:10px;
}
.tx-powermail-pi1 #uid9{
display:block;
font-weight:bold;
text-align:right;
width:135px;
float:left;
}
.tx-powermail-pi1 label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
.tx-powermail-pi1 .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
.tx-powermail-pi1 input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #4e5155;
width:200px;
margin:2px 0 20px 10px;
}
.tx-powermail-pi1 button{
clear:both;
margin-left:0px;
background:#666666;
text-align:center;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}