Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 11. Dezember 2012 15:04

jester
kennt CMS/ms
Registriert: 10. Juni 2011
Beiträge: 149

[GELÖST] Formbuilder: Stress mit IE9!

Hallo,

ich habe folgendes Problem:

Mit dem Formbuilder habe ich ein Kontaktformular erstellt, das in folgenden Browsern korrekt dargestellt wird:

Firefox 17
Opera 11.60
Chrome 23
Internet Explorer 8

Wer muss wieder aus der Reihe tanzen? Der Internet Explorer 9!

Alle stellen das Formular einspaltig dar, der IE9 fängt aber nach den Checkboxen und einem Dropdown-Auswahlfeld zweispaltig an und versetzt den Inhalt (siehe Screenshot).

Ich verwende nur das für die Farbgebung modifizierte mitgelieferte "FormBuilder Default Style".

Im Quelltext sind auch nur die "sauberen" DIVs zu sehen, keine zusätzlichen <br> oder so.

Ich hänge mal Screenshots zur Verdeutlichung an. Ich suche mir jetzt seit gestern eine Wolf und kann nicht herausfinden, woran das vielleicht liegt.

Darstellung im IE9
ie9.jpg
(sorry, leider etwas klein, ich musste einen Bekannten bitte, mir den Screenshot zu machen...)

Darstellung in Chrome23
chrome23.jpg

Hier der Quelltext aus dem FormBuilder:

{* and now the form itself *} 	{$fb_form_start} 	<div>{$fb_hidden}</div> 	<div{if $css_class != ''} class="{$css_class}"{/if}> 	{if $total_pages gt 1}<span>{$title_page_x_of_y}</span>{/if} 	{foreach from=$fields item=entry} 		{if $entry->display == 1} 			{strip} 			{if $entry->needs_div == 1} 				<div 				{if $entry->required == 1 || $entry->css_class != '' || $entry->valid == 0} class=" 					{if $entry->required == 1}required{/if} 					{if $entry->css_class != ''} {$entry->css_class}{/if} 					{if $entry->valid == 0} fb_invalid{/if} 					" 				{/if} 				> 			{/if} 			{if $entry->hide_name == 0} 				<label{if $entry->multiple_parts != 1} for="{$entry->input_id}"{/if}>{$entry->name} 				{if $entry->required_symbol != ''} 					{$entry->required_symbol} 				{/if} 				</label> 			{/if} 			{if $entry->multiple_parts == 1} 				{section name=numloop loop=$entry->input} 					{if $entry->label_parts == 1} 						<div>{$entry->input[numloop]->input}&nbsp;{$entry->input[numloop]->name}</div> 					{else} 						{$entry->input[numloop]->input} 					{/if} 					{if isset($entry->input[numloop]->op) && $entry->input[numloop]->op}{$entry->input[numloop]->op}{/if} 				{/section} 			{else} 				{if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if} 			{/if} 			{if $entry->helptext != ''}&nbsp;<a href="javascript:fbht('{$entry->field_helptext_id}')"><img src="modules/FormBuilder/images/info-small.gif" alt="Help" /></a> 					<span id="{$entry->field_helptext_id}" style="display:none" class="fbr_helptext">{$entry->helptext}</span>{/if} 			{if $entry->valid == 0} &lt;--- {$entry->error}{/if} 			{if $entry->needs_div == 1} 				</div> 			{/if} 			{/strip} 		{/if} 	{/foreach} 	{if $has_captcha == 1} 		<div class="captcha">{$graphic_captcha}{$title_captcha}<br />{$input_captcha}</div>

Und hier die Ausgabe des Quelltextes im Browser:

[== HTML ==]
<div> 	<div><input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__31[]" value="1"  id="auswahl_kontakt_0" /> 	&nbsp;<label for="auswahl_kontakt_0">Ich möchte die Flowkur buchen</label></div> 	<div><input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__31[]" value="2"  id="auswahl_kontakt_1" /> 	&nbsp;<label for="auswahl_kontakt_1">Ich möchte gerne ein Beratungsgespräch</label></div> 	<div><input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__31[]" value="3"  id="auswahl_kontakt_2" /> 	&nbsp;<label for="auswahl_kontakt_2">Ich möchte gratis den Newsletter abonnieren</label></div> 	</div>								 	 	<div class="required"> 	<label for="fbrp__32">Anrede*</label> 	<select class="cms_dropdown" name="cntnt01fbrp__32"  id="fbrp__32"><option value="" selected="selected">  	Anrede</option><option value="1">Herr</option><option value="2">Frau </option> 	</select> 	</div>								 	 	<div class="required"> 	<label for="fbrp__33">Vorname*</label> 	<input type="text" name="cntnt01fbrp__33" value="" size="25" maxlength="40"   id="fbrp__33" /> 	</div>								 	 	<div class="required"><label for="fbrp__34">Nachname*</label> 	<input type="text" name="cntnt01fbrp__34" value="" size="25" maxlength="60"   id="fbrp__34" /> </div>								<div><label for="fbrp__35">Straße Nr.</label><input type="text" name="cntnt01fbrp__35" value="" size="25" maxlength="60"   id="fbrp__35" /> </div>								<div><label for="fbrp__36">PLZ</label><input type="text" name="cntnt01fbrp__36" value="" size="5" maxlength="5"   id="fbrp__36" /> </div>								<div><label for="fbrp__37">Ort</label><input type="text" name="cntnt01fbrp__37" value="" size="25" maxlength="60"   id="fbrp__37" /> </div>								<div><label for="fbrp__38">Land</label><input type="text" name="cntnt01fbrp__38" value="" size="25" maxlength="60"   id="fbrp__38" /> </div>								<div><label for="fbrp__39">Telefon</label><input type="text" name="cntnt01fbrp__39" value="" size="25" maxlength="60"   id="fbrp__39" /> </div>								<div class="required"><label for="fbrp__40">E-Mail*</label><input type="text" name="cntnt01fbrp__40" value="" size="25" maxlength="100"   id="fbrp__40" /> </div>								<div><label for="fbrp__41">Wie haben Sie von uns gehört?</label><textarea name="cntnt01fbrp__41" cols="50" rows="2" class="cms_textarea" id="fbrp__41"></textarea></div>								<div><label for="fbrp__42">Platz für eine weitere Nachricht</label><textarea name="cntnt01fbrp__42" cols="50" rows="2" class="cms_textarea" id="fbrp__42"></textarea></div>						<div class="captcha"><input type="hidden" name="hncaptcha" value="23311221131122113231231323231322"/> <input type="hidden" name="hncaptcha_public_key" value="37b83"/> <img class="captchapict" src="/tmp/cache/hn_captcha_37b83.jpg" width="198" height="72" alt="This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)" title="">

Last but not least das nur für die Farbwerte modifizierte Standard-Stylesheet.

[== CSS ==]
/* Sample FormBuilder CSS base */ form {margin-top:0} form, td, th, li { font-size: 100%} form div {margin-bottom:0.5em} fieldset div { 	margin-bottom:0.5em; 	margin-left:1em; } fieldset div div { 	margin-top:0.5em; 	margin-left:1em } fieldset { 	margin-bottom:1em; 	border:1px solid #EB6702; 	padding:0.5em } fieldset label { 	width:auto; } legend { 	color:#FFF; 	background:#EB6702; 	font-style:italic; 	font-size:1.2em; 	margin-bottom:0.5em; 	padding:0.2em; 	width:auto; 	border:1px solid #CCC } textarea { 	margin: 0.5em 0; 	width:98%; 	height: 4em }  /* Apply this class to text/select input fields with shorter labels 	to help alignment */ .short-label label {float:left; width:10em} .short-label fieldset div input, .short-label fieldset div select {width:16em}  /* Pretty up your Captcha image output */ .captcha { 	margin:0.5em 0; 	width:200px; 	text-align:center } .captcha img {border:1px solid #F60; margin-bottom:0.5em} .captcha input {width:196px; margin-top:0.5em}  /* Just a bit more room for the Submit button */ .submit {margin-top:1em}  /* Apply this class to text/select input fields with shorter labels 	to help alignment */ .short-label label {float:left; width:10em} .short-label fieldset div input, .short-label fieldset div select {width:16em}  /* Pretty up your Captcha image output */ .captcha { 	margin:0.5em 0; 	width:200px; 	text-align:center } .captcha img {border:1px solid #EB6702; margin-bottom:0.5em} .captcha input {width:196px; margin-top:0.5em}  /* Just a bit more room for the Submit button */ .submit {margin-top:1em}  .contactform input {border: 1px solid #EB6702;} .contactform input.checkbox {border: none;} .contactform label { 	display: block; 	float: left; 	width: 320px; } .contactform label.label { 	display: inline; 	float: none; 	width: 50px; 	font-size: 14px; } .contactform textarea { 	background-color: #ffc; 	border: 1px solid #EB6702; } .formbuilderform .message { 	line-height: 16px; 	padding: 0 0 8px 0; }

Sowas macht mich fertig ...

Offline

#2 11. Dezember 2012 16:07

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.437

Re: [GELÖST] Formbuilder: Stress mit IE9!


Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)

Offline

#3 11. Dezember 2012 18:44

jester
kennt CMS/ms
Registriert: 10. Juni 2011
Beiträge: 149

Re: [GELÖST] Formbuilder: Stress mit IE9!

Oh, sorry!  ops

{* and now the form itself *} 	
{$fb_form_start} 	
<div>{$fb_hidden}</div> 	
<div{if $css_class != ''} class="{$css_class}"{/if}> 	
{if $total_pages gt 1}<span>{$title_page_x_of_y}</span>{/if} 	
{foreach from=$fields item=entry} 		
{if $entry->display == 1} 			
{strip} 			
{if $entry->needs_div == 1} 				
<div 				
{if $entry->required == 1 || $entry->css_class != '' || $entry->valid == 0} class=" 					
{if $entry->required == 1}required{/if} 					
{if $entry->css_class != ''} {$entry->css_class}{/if} 					
{if $entry->valid == 0} fb_invalid{/if} 					" 				
{/if} 				> 			
{/if} 			
{if $entry->hide_name == 0} 				
<label{if $entry->multiple_parts != 1} for="{$entry->input_id}"{/if}>{$entry->name} 				
{if $entry->required_symbol != ''} 					
{$entry->required_symbol} 				
{/if} 				
</label> 			
{/if} 			
{if $entry->multiple_parts == 1} 				
{section name=numloop loop=$entry->input} 					
{if $entry->label_parts == 1} 						
<div>{$entry->input[numloop]->input}&nbsp;{$entry->input[numloop]->name}</div> 					{else} 						
{$entry->input[numloop]->input} 					
{/if} 					
{if isset($entry->input[numloop]->op) && $entry->input[numloop]->op}{$entry->input[numloop]->op}{/if} 				
{/section} 			
{else} 				
{if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if} 			
{/if} 			
{if $entry->helptext != ''}&nbsp;
<a href="javascript:fbht('{$entry->field_helptext_id}')">
<img src="modules/FormBuilder/images/info-small.gif" alt="Help" /></a> 					
<span id="{$entry->field_helptext_id}" style="display:none" class="fbr_helptext">{$entry->helptext}</span>{/if} 			
{if $entry->valid == 0} &lt;--- {$entry->error}{/if} 			
{if $entry->needs_div == 1} 				
</div> 			
{/if} 			
{/strip} 		
{/if} 	{/foreach} 	{if $has_captcha == 1} 		
<div class="captcha">{$graphic_captcha}{$title_captcha}
<br />{$input_captcha}
</div>

Besser so? Mit diesen ganzen verschachtelten ifs komme ich überhaupt nicht klar.

Offline

#4 11. Dezember 2012 18:51

jester
kennt CMS/ms
Registriert: 10. Juni 2011
Beiträge: 149

Re: [GELÖST] Formbuilder: Stress mit IE9!

Ausgabe des Quelltexts im Browser:

[== HTML ==]
<div> 	
<div>
<input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__31[]" value="1"  id="auswahl_kontakt_0" /> 	
&nbsp;
<label for="auswahl_kontakt_0">Ich möchte die Flowkur buchen</label>
</div> 	

<div>
<input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__31[]" value="2"  id="auswahl_kontakt_1" /> 	
&nbsp;
<label for="auswahl_kontakt_1">Ich möchte gerne ein Beratungsgespräch</label>
</div> 	

<div>
<input type="checkbox" class="cms_checkbox" name="cntnt01fbrp__31[]" value="3"  id="auswahl_kontakt_2" /> 	
&nbsp;
<label for="auswahl_kontakt_2">Ich möchte gratis den Newsletter abonnieren</label>
</div> 	
</div>								 	 	

<div class="required"> 	
<label for="fbrp__32">Anrede*</label> 	
<select class="cms_dropdown" name="cntnt01fbrp__32"  id="fbrp__32">
<option value="" selected="selected">  	
Anrede</option>
<option value="1">Herr</option>
<option value="2">Frau </option> 	
</select> 	
</div>								 	 	

<div class="required"> 	
<label for="fbrp__33">Vorname*</label> 	
<input type="text" name="cntnt01fbrp__33" value="" size="25" maxlength="40"   id="fbrp__33" /> 	</div>								 	 	
<div class="required"><label for="fbrp__34">Nachname*</label> 	
<input type="text" name="cntnt01fbrp__34" value="" size="25" maxlength="60"   id="fbrp__34" /> </div>								

<div>
<label for="fbrp__35">Straße Nr.</label>
<input type="text" name="cntnt01fbrp__35" value="" size="25" maxlength="60"   id="fbrp__35" /> </div>								

<div>
<label for="fbrp__36">PLZ</label>
<input type="text" name="cntnt01fbrp__36" value="" size="5" maxlength="5"   id="fbrp__36" /> </div>								

<div>
<label for="fbrp__37">Ort</label>
<input type="text" name="cntnt01fbrp__37" value="" size="25" maxlength="60"   id="fbrp__37" /> </div>								

<div>
<label for="fbrp__38">Land</label><input type="text" name="cntnt01fbrp__38" value="" size="25" maxlength="60"   id="fbrp__38" /> 
</div>								

<div>
<label for="fbrp__39">Telefon</label><input type="text" name="cntnt01fbrp__39" value="" size="25" maxlength="60"   id="fbrp__39" /> 
</div>								
<div class="required"><label for="fbrp__40">E-Mail*</label>
<input type="text" name="cntnt01fbrp__40" value="" size="25" maxlength="100"   id="fbrp__40" /> </div>

<div>
<label for="fbrp__41">Wie haben Sie von uns gehört?</label>
<textarea name="cntnt01fbrp__41" cols="50" rows="2" class="cms_textarea" id="fbrp__41">
</textarea>
</div>								

<div>
<label for="fbrp__42">Platz für eine weitere Nachricht</label><textarea name="cntnt01fbrp__42" cols="50" rows="2" class="cms_textarea" id="fbrp__42">
</textarea>
</div>

<div class="captcha"><input type="hidden" name="hncaptcha" value="23311221131122113231231323231322"/> 
<input type="hidden" name="hncaptcha_public_key" value="37b83"/> 
<img class="captchapict" src="/tmp/cache/hn_captcha_37b83.jpg" width="198" height="72" alt="This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)" title="">

Offline

#5 11. Dezember 2012 18:54

jester
kennt CMS/ms
Registriert: 10. Juni 2011
Beiträge: 149

Re: [GELÖST] Formbuilder: Stress mit IE9!

Und hier noch das von mir modifizierte Standard-Stylesheet:


[== CSS ==]
/* Sample FormBuilder CSS base */ 

form {margin-top:0} 
form, td, th, li { font-size: 100%} 
form div {margin-bottom:0.5em} 
fieldset div { 	margin-bottom:0.5em; 	margin-left:1em; } 
fieldset div div { 	margin-top:0.5em; 	margin-left:1em } 
fieldset { 	margin-bottom:1em; 	border:1px solid #EB6702; 	padding:0.5em } 
fieldset label { 	width:auto; } 
legend { 	color:#FFF; 	background:#EB6702; 	font-style:italic; 	font-size:1.2em; 	margin-bottom:0.5em; 	padding:0.2em; 	width:auto; 	border:1px solid #CCC } 
textarea { 	margin: 0.5em 0; 	width:98%; 	height: 4em } 

/* Apply this class to text/select input fields with shorter labels 	to help alignment */ 

.short-label label {float:left; width:10em} 
.short-label fieldset div input, 
.short-label fieldset div select {width:16em}  

/* Pretty up your Captcha image output */ 

.captcha { 	margin:0.5em 0; 	width:200px; 	text-align:center } 
.captcha img {border:1px solid #F60; margin-bottom:0.5em} 
.captcha input {width:196px; margin-top:0.5em}  

/* Just a bit more room for the Submit button */ 

.submit {margin-top:1em}  

/* Apply this class to text/select input fields with shorter labels 	to help alignment */ 

.short-label label {float:left; width:10em} 
.short-label fieldset div input, 
.short-label fieldset div select {width:16em}  

/* Pretty up your Captcha image output */ 

.captcha { 	margin:0.5em 0; 	width:200px; 	text-align:center } 
.captcha img {border:1px solid #EB6702; margin-bottom:0.5em} 
.captcha input {width:196px; margin-top:0.5em}  

/* Just a bit more room for the Submit button */ 

.submit {margin-top:1em}  
.contactform input {border: 1px solid #EB6702;} 
.contactform input.checkbox {border: none;} 
.contactform label { 	display: block; 	float: left; 	width: 320px; } 
.contactform label.label { 	display: inline; 	float: none; 	width: 50px; 	font-size: 14px; } 
.contactform textarea { 	background-color: #ffc; 	border: 1px solid #EB6702; } 
.formbuilderform .message { 	line-height: 16px; 	padding: 0 0 8px 0; }

Offline

#6 11. Dezember 2012 21:48

Janl
Server-Pate
Ort: Freistadt, Österreich
Registriert: 13. Dezember 2010
Beiträge: 1.231
Webseite

Re: [GELÖST] Formbuilder: Stress mit IE9!

Es gibt in IE so ein compatibilitätsmodus, mal versucht?

mfg
Jan


Kubuntu 22.04 - Win 11 pro / Kubuntu 20.04  - win10 pro

Offline

#7 12. Dezember 2012 01:39

Andynium
Moderator
Ort: Dohna / SN / Deutschland
Registriert: 13. September 2010
Beiträge: 7.018
Webseite

Re: [GELÖST] Formbuilder: Stress mit IE9!

Janl schrieb:

Es gibt in IE so ein compatibilitätsmodus

[== HTML ==]
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >

Achtung! Muss als erster Eintrag im head-Bereich stehen.

Offline

#8 13. Dezember 2012 17:38

jester
kennt CMS/ms
Registriert: 10. Juni 2011
Beiträge: 149

Re: [GELÖST] Formbuilder: Stress mit IE9!

kiss
cool
kiss

Das war's! Danke, cyberman!

[Woher weiß man sowas???]

Offline

#9 13. Dezember 2012 21:10

nockenfell
Moderator
Ort: Gontenschwil, Schweiz
Registriert: 09. November 2010
Beiträge: 2.934
Webseite

Re: [GELÖST] Formbuilder: Stress mit IE9!

jester schrieb:

[Woher weiß man sowas???]

Das weiss man                .....            oder auch nicht.  wink
http://acidmartin.wordpress.com/2009/03 … -meta-tag/
http://msdn.microsoft.com/en-us/library … 85%29.aspx


[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog  /   Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox

Offline

#10 14. Dezember 2012 11:38

Janl
Server-Pate
Ort: Freistadt, Österreich
Registriert: 13. Dezember 2010
Beiträge: 1.231
Webseite

Re: [GELÖST] Formbuilder: Stress mit IE9!

Da zeigt diese 2. Link wie "standard-konform" IE ist.

Es ist unverständlich dass MS so etwas bastelt wenn man bedenkt dass die doch ebenso in das W3C vertreten sind.

Ach ja, es sei so.
Jan


Kubuntu 22.04 - Win 11 pro / Kubuntu 20.04  - win10 pro

Offline