Template CSS ruined in IE while Chrono plugin is enabled

Hey,

I use your component Chrono Forms and I have problem in Internet Explorer. When I enable chronocontact plugin, it ruins my template (right module gets displayed under the content), but that happens only in IE, in Firefox and Chrome works normally. It also works normally if I disable chronocontact plugin...

Hi Tadej,

I see the problem only in IE6. Not sure what it is, the sidebar is being pushed down below the center column div.

It could be the clear statements in the ChronoForms CSS, or an overwidth div or page element.

Bob

Hey Bob,

Thanks for quick reply. I use IE8, which also has a problem displaying Chronoform with plugin. The problem also exist in other ie browsers...

Here is the code of the form and I dont see any problem in here:

<div class="form_item">
<div class="form_element cf_heading">
<h1 class="cf_text">Naročilo / poizvedba - Terminal TIK</h1>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_text"><span class="cf_text">Izpolnite spodnji obrazec v skladu z vašimi zahtevami, mi pa vam bomo na povpraševanje odgovorili s ponudbo.</span></div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label" style="width: 150px;">Naziv podjetja:</label> <input class="cf_inputbox required" maxlength="250" size="30" title="Vpisati morate naziv podjetja." id="text_2" name="tik_company" type="text" /></div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label" style="width: 150px;">Ulica:</label> <input class="cf_inputbox required" maxlength="150" size="30" title="Vpisati morate veljaven naslov podjetja (ulica)." id="text_4" name="tik_street" type="text" /></div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label" style="width: 150px;">Poštna številka:</label> <input class="cf_inputbox required validate-number" maxlength="150" size="30" title="Vpisati morate veljaven naslov podjetja (poštna številka)." id="text_5" name="tik_post_code" type="text" /></div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label" style="width: 150px;">Mesto:</label> <input class="cf_inputbox required validate-alpha" maxlength="150" size="30" title="Vpisati morate veljaven naslov podjetja (mesto)" id="text_3" name="tik_city" type="text" /></div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label" style="width: 150px;">Kontaktna oseba:</label> <input class="cf_inputbox required validate-alpha" maxlength="150" size="30" title="Vpisati morate veljavno kontaktno osebo." id="text_6" name="tik_contact" type="text" /></div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label" style="width: 150px;">Telefonska številka:</label> <input class="cf_inputbox required" maxlength="150" size="30" title="Vpisati morate veljavno telefosnko številko" id="text_8" name="tik_telephone" type="text" /></div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label" style="width: 150px;">Email naslov:</label> <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="Vpisati morate veljaven email naslov." id="text_7" name="tik_email" type="text" /></div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_radiobutton"><label class="cf_label" style="width: 150px;">TIK Paket:</label>
<div class="float_left"><input value="TIK XS (10U,1A)" title="Obvezno morate izbrati en paket." class="radio validate-one-required" id="radio00" name="radio0" type="radio" /> <label for="radio00" class="radio_label">TIK XS (10U,1A)</label> <br /> <input value="TIK S  (20U,2A)" title="Obvezno morate izbrati en paket." class="radio validate-one-required" id="radio01" name="radio0" type="radio" /> <label for="radio01" class="radio_label">TIK S  (20U,2A)</label> <br /> <input value="TIK M  (50U,5A)" title="Obvezno morate izbrati en paket." class="radio validate-one-required" id="radio02" name="radio0" type="radio" /> <label for="radio02" class="radio_label">TIK M  (50U,5A)</label> <br /> <input value="TIK L  (100U,10A)" title="Obvezno morate izbrati en paket." class="radio validate-one-required" id="radio03" name="radio0" type="radio" /> <label for="radio03" class="radio_label">TIK L  (100U,10A)</label> <br /> <input value="TIK XL (>100U,>10A)" title="Obvezno morate izbrati en paket." class="radio validate-one-required" id="radio04" name="radio0" type="radio" /> <label for="radio04" class="radio_label">TIK XL (>100U,>10A)</label></div>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png" /></a>
<div class="tooltipdiv">TIK Paket: :: Glede na število zaposlenih izberite primeren paket. xxU pomeni število uporabnikov, xxA pa število administratorjev</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_checkbox"><label class="cf_label" style="width: 150px;">Čitalec prstnih odtisov:</label>
<div class="float_left"><input value="Vključite v ponudbo" class="radio" id="check10" name="check1[]" type="checkbox" /> <label for="check10" class="check_label">Vključite v ponudbo</label></div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label" style="width: 150px;">Število RFID kartic:</label> <input class="cf_inputbox validate-number" maxlength="150" size="30" title="Vpišite veljavno število." id="text_11" name="tik_rfid_cards" type="text" /></div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textbox"><label class="cf_label" style="width: 150px;">Število TIK terminalov:</label> <input class="cf_inputbox required validate-number" maxlength="150" size="30" title="Vpisati morate veljavno število." id="text_12" name="tik_terminals_number" type="text" /> <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png" /></a>
<div class="tooltipdiv">Število TIK terminalov: :: En terminal je vključen v paket, vsak dodaten pa se obračuna po trenutno veljavni ceni.</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_checkbox"><label class="cf_label" style="width: 150px;">Dodatni moduli:</label>
<div class="float_left"><input value="DELOVNI NALOGI - analiza ur po nalogih" class="radio" id="check20" name="check2[]" type="checkbox" /> <label for="check20" class="check_label">DELOVNI NALOGI - analiza ur po nalogih</label> <br /> <input value="SALDO - Vodenje delovnih ur in dopustov" class="radio" id="check21" name="check2[]" type="checkbox" /> <label for="check21" class="check_label">SALDO - Vodenje delovnih ur in dopustov</label> <br /> <input value="IZVOZ - Izvoz v poslovne programe" class="radio" id="check22" name="check2[]" type="checkbox" /> <label for="check22" class="check_label">IZVOZ - Izvoz v poslovne programe</label> <br /> <input value="POSLOVNE ENOTE - TIK na več lokacijah" class="radio" id="check23" name="check2[]" type="checkbox" /> <label for="check23" class="check_label">POSLOVNE ENOTE - TIK na več lokacijah</label> <br /> <input value="TIKON - elektronsko odpiranje vrat" class="radio" id="check24" name="check2[]" type="checkbox" /> <label for="check24" class="check_label">TIKON - elektronsko odpiranje vrat</label></div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_checkbox"><label class="cf_label" style="width: 150px;">Ostale storitve:</label>
<div class="float_left"><input value="Montaža terminala TIK" class="radio" id="check30" name="check3[]" type="checkbox" /> <label for="check30" class="check_label">Montaža terminala TIK</label> <br /> <input value="2 urno šolanje za 5 oseb" class="radio" id="check31" name="check3[]" type="checkbox" /> <label for="check31" class="check_label">2 urno šolanje za 5 oseb</label></div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_textarea"><label class="cf_label" style="width: 150px;">Vaš komentar:</label> <textarea class="cf_inputbox" rows="10" id="text_15" cols="50" name="tik_comment" style="width: 500px; height: 160px; margin: 8px;"></textarea></div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_captcha"><label class="cf_label" style="width: 150px;">Varnostna koda</label> <span>{imageverification}</span> <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png" /></a>
<div class="tooltipdiv">Varnostna koda :: Zaradi varnosti vas prosimo da prepišete varnostno kodo in tako potrdite da ste človek.</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown"><label class="cf_label" style="width: 140px;">Za vas smo izvedeli</label> <select class="cf_inputbox" id="select_19" size="1" name="tik_refferer"> <option>Izberite</option> <option value="preko spletnega oglasa.">preko spletnega oglasa.</option> <option value="na spletnem iskalniku.">na spletnem iskalniku.</option> <option value="preko email sporočila.">preko email sporočila.</option> <option value="po priporočilu.">po priporočilu.</option> <option value="drugje.">drugje.</option> </select></div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_text"><span class="cf_text">Poizvedba v nobenem primeru ni zavezujoča. Po prejemu ponudbe lahko to še vedno prilagodimo vašim potrebam.</span></div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_button"><input value="Pošlji" name="button_16" type="submit" /></div>
<div class="cfclear"> </div>
</div>

Can you please help?

Greetings, Tadej

Hi theanimalix ,

IE7 and IE8 both look OK here.

Bob

I forgot to mention that the component works fine, there is only problem with plugin displaying forms.

Here are 2 links to exactly the same form, the only difference is that this 2 forms are displayed as component and not as plugin:
http://www.epiko.si/index.php/poizvedba/nakup
http://www.epiko.si/index.php/poizvedba/izposoja

Hi theanimalix ,

IE7 and IE8 both look OK here.

Bob

I would not agree with that; I made a screenshoot to convince you.🙂

Hi theanimalix ,

Sorry, I can see that now. But the answer is still the same. There is some element that is breaking your page template. I can’t see what that is though.



Bob

It is strange, because component shows the form right (http://www.epiko.si/index.php/poizvedba/nakup), without breaking the template css, but when trying to display with chrono plugin, it messes up the template (http://www.epiko.si/index.php/produkti-in-storitve/terminal-tik-elektronski-sistem-za-obvladovanje-delovnega-casa).