May 22, 201214 yr Very weird problem with a <form> If I change the id from id="form" , to id="contact-form" , the lay out becomes a mess as shown on the attached picture. How to explain this ? what difference makes to change the id , how can this change interfere on layout ? <form id="contact-form" method="post" action="php/mailer.php" enctype="multipart/form-data"> <fieldset> <label><strong>Nome:</strong><input type="text" value=""></label> <label><strong>E-mail:</strong><input type="text" value=""></label> <label><strong>Mensagem:</strong><textarea></textarea></label> <div class="btns"> <a href="#" class="button">Clear</a> <a class="button" href="javascript:" onClick="document.getElementById('contact-form').submit()">Enviar</a> </fieldset> </form> </div> Edited May 22, 201214 yr by ronwolpa
May 23, 201214 yr Author post the css too Here it goes : /*C S S */ html, body {width:100%; padding:0; margin:0;} body {font:14px/25px Arial,Helvetica,sans-serif;color:#cccccc;min-width:1264px;background:#131313;} .ic {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0} .main {width:100%; background:#272727; } /***********************************************************************/ a {text-decoration:none; cursor:pointer;} a:hover {text-decoration:none;} a.button {background:#ff9900; font-size:20px; line-height:24px; color:#fff; display:inline-block; padding:5px 23px 5px 23px; } /*******************lower nav bar smaller button class****************************************/ a.button2 {background:#ff9900; font-weight:bold; font-size:14px; line-height:24px; color:#fff; display:inline-block; padding:5px 17px 5px 17px; } a.button2:hover {background:#131313; } a.thispage {background:#ff0000; font-weight:bold; font-size:14px; line-height:24px; color:#fff; display:inline-block; padding:5px 17px 5px 17px; } /*******************lower nav bar smaller button class****************************************/ /*******************lower nav bar smaller II button class****************************************/ a.button3 {background:#ff9900; font-weight:bold; font-size:12px; line-height:24px; color:#fff; display:inline-block; padding:5px 23px 5px 23px; } a.button3:hover {background:#131313; } /*******************lower nav bar smaller II button class****************************************/ a.button:hover {background:#131313; } a.link {text-decoration:none; cursor:pointer; color:#ff9900; } a.link:hover {text-decoration:underline;} .color-1 { color:#fff;} a.color-1:hover {text-decoration:underline;} .font-3 {font-size:17px; line-height:33px; color:#292929;} h2 { font-size:36px; line-height:45px; color:#fff; font-weight:normal; letter-spacing:-1px;} h3 { font-size:24px; line-height:30px; color:#fff; font-weight:normal; } ul {margin:0; padding:0;list-style-image:none;} /******************* R E D #ff0000 ****************************************/ ul.list-1 li {padding:0px 0 0px 11px; line-height:25px; background:url(../images/marker_red.gif) 0 10px no-repeat;} ul.list-1 li a { font-size:14px; color:#fff; line-height:25px;} ul.list-1 li a:hover {color:#ff0000;} /******************* B L U E #2098F5 ****************************************/ ul.list-1b li {padding:0px 0 0px 11px; line-height:25px; background:url(../images/marker_blue.gif) 0 10px no-repeat;} ul.list-1b li a { font-size:14px; color:#fff; line-height:25px;} ul.list-1b li a:hover {color:#2098F5;} /******************* G R E E N 33cc00 ****************************************/ ul.list-1d li {padding:0px 0 0px 11px; line-height:25px; background:url(../images/marker_green.gif) 0 10px no-repeat;} ul.list-1d li a { font-size:14px; color:#fff; line-height:25px;} ul.list-1d li a:hover {color:#33cc00;} /******************* O R A N G E ff9900 ****************************************/ ul.list-1c li {padding:0px 0 0px 11px; line-height:25px; background:url(../images/marker_orange.gif) 0 10px no-repeat;} ul.list-1c li a { font-size:14px; color:#fff; line-height:25px;} ul.list-1c li a:hover {color:#ff9900;} ul.list-1nobullet li {padding:0px 0 0px 28px; line-height:25px; 0 10px no-repeat; } .iamhere { font-size:14px; color:#ffcc00; line-height:25px;} /* may 19 2012 - experiments DELETE IF NOT USED */ ul.imges li{ background-image: url(../images/page2-img1.jpg); background-repeat: no-repeat; background-position: 0px; width: 132px; height: 90px; } .imagesimagesmay192012 li { position: relative; } .imagesimagesmay192012 p { position: absolute; top: 50% /* wherever you want it.. */ } .txtbelowimage1 { right:432px; } /* */ /******************************************************************/ .clear {clear:both; line-height:0; font-size:0; width:100%;} .wrapper {width:100%; overflow:hidden; position:relative} .wrap {overflow:hidden; position:relative} .extra-wrap {overflow:hidden;} .fleft {float:left;} .fright {float:right;} .img-indent {float:left; margin:3px 30px 17px 0;} .last {margin-right:0px !important;} .img-radius {border-radius:4px;} .top-1 {margin-top:37px;} .top-2 {margin-top:29px;} .top-3 {margin-top:21px;} .top-4 {margin-top:31px;} .top-5 {margin-top:12px;} .left-1 {padding-left:30px;} .bot-0 {padding-bottom:0 !important; margin-bottom:0 !important;} .bot-1 {margin-bottom:39px;} .bot-2 {margin-bottom:29px;} .pad-1 {margin:13px 0px 12px 0px;} .p1 {padding-bottom:25px;} .p2 {padding-bottom:15px;} .p3 {padding-bottom:12px;} .p4 {padding-bottom:20px;} .p5 {padding-bottom:23px;} .p6 {padding-bottom:8px;} /*********************************header*************************************/ header {width:100%; z-index:101; } header>div {width:1264px; margin:0 auto; position:relative; } h1 {position:absolute; left:132px; top:0px; display:inline-block; z-index:100;} .social-icons {overflow:hidden; text-align:right; padding:17px 162px 13px 0 } .social-icons span {display:inline-block; font-size:24px; line-height:28px; color:#fff; margin:-1px 20px 0 0; letter-spacing:-1px;} .social-icons a {display:inline-block; width:23px; height:23px; float:right;} .icon-1 {background:url(../images/icon-2.png) 0 0 no-repeat;} .icon-2 {background:url(../images/icon-1.png) 0 0 no-repeat; margin-left:7px;} .icon-3 {background:url(../images/icon-3.png) 0 0 no-repeat; margin-left:7px;} .social-icons a:hover {background-color:#ff9900;} nav {position:absolute; left:132px; bottom:0; z-index:100; background:url(../images/nav-bg.png) 0 0 repeat;} ul.menu {margin:0 29px 0 30px;} ul.menu li {float:left; line-height:35px; margin:0px 0 0px 0px; background:transparent;} ul.menu li a {font-size:28px; line-height:35px; color:#fff; display:block; padding: 17px 33px 18px 33px; } /* change font size 28 to smaller in accordance to the number of items on menu */ ul.menu li:hover , ul.menu li.current {background:#ff9900;} /*********************************content*************************************/ #content {width:960px; margin:0 auto; padding-bottom:78px;} /*********************************content*************************************/ #content_alternative {width:960px; margin:0 auto; padding-bottom:78px;} /*********************************content*************************************/ /*********************************UPNAVBAR***********************************/ .upnavbar {margin-top:27px;} .upnavbar2 {margin-top:30px; margin-bottom:200px;} /********************************* / UPNAVBAR*************************************/ /*ORIGINAL LINE */ .line-1 {background:url(../images/line.png) 0 bottom repeat-x; padding-bottom:29px; margin-bottom:24px;} /* LINES IN RED BLUE GREEN ORANGE */ .line-1red {background:url(../images/linered.png) 0 bottom repeat-x; padding-bottom:29px; margin-bottom:24px;} .line-1blue {background:url(../images/lineblue.png) 0 bottom repeat-x; padding-bottom:29px; margin-bottom:24px;} .line-1green {background:url(../images/linegreen.png) 0 bottom repeat-x; padding-bottom:29px; margin-bottom:24px;} .line-1orange {background:url(../images/lineorange.png) 0 bottom repeat-x; padding-bottom:29px; margin-bottom:24px;} .line-1grey{background:url(../images/linegrey.png) 0 bottom repeat-x; padding-bottom:29px; margin-bottom:24px;} .line-1spacer{ 0 bottom repeat-x; padding-bottom:29px; margin-bottom:24px;} /* LINES IN RED BLUE GREEN ORANGE */ .img-border {border:#fff 4px solid;} .img-video {border:#ccc 4px solid; background:url(../images/img-videobg.png)} .block-1>div {float:left; width:180px; margin-right:40px;} .block-1>div h3 {margin:14px 0 4px 0;} .block-1>div a.button {margin:18px 0 0px 0;} .form-1 {} .form-1 label {font:14px/25px Arial, Helvetica, sans-serif; color:#939393; padding-bottom:5px; } .form-1 input {font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#535353; background:#131313; padding:8px 10px 9px 15px;outline: medium none; width: 245px; height:17px; float:left; margin-bottom:12px;} .form-1 .select-1 {width:270px; margin-bottom:12px;} .form-1 .select-2 {width:128px; margin-right:14px; float:left;} .form-1>a.button {margin-top:30px; padding-left:36px; padding-right:37px;} .lists {overflow:hidden;} .lists ul {float:left; margin-right:15px; width:150px;} .lists-2 {margin:23px 0 23px 0; overflow:hidden;} .lists-2 ul {float:left; margin-right:40px; width:180px;} .sponsor ul {float:left; margin-right:15px; width:120px;} .block-2>a {float:left; margin-right:20px; display:inline-block;} /****************************footer************************/ footer { width:100%; position:relative; overflow:hidden; text-align:center; padding:32px 0 45px 0; background:#131313;} footer p, footer a {color:#939393;} footer a:hover {text-decoration:underline;} /**********************form**********************/ dl {margin:0px 0px 0 0px;} dl dt {} dl dd span { display:block; width:99px; float:left;} dl dd {} dl dd a {} #form { margin: 0px 0 0px 0px; width:620px; } #form input {background:#131313;font: 14px Arial, Helvetica, sans-serif;color:#535353;padding:7px 10px 10px 15px;outline: medium none;width: 355px;height:17px;float:left;} #form textarea {background:#131313; font: 14px Arial, Helvetica, sans-serif;color:#535353;height: 246px;outline: medium none;overflow: auto;padding: 7px 0px 0px 10px;width: 610px;resize:none;margin:0px 0 0 0;float:left;} #form label {position:relative;overflow:hidden; display: block; padding-bottom:12px;} #form label strong {font-weight:normal; display:block; padding-bottom:5px;} .btns {text-align:left; width:620px; padding-top:18px;} .btns a {display:inline-block; margin:0 20px 0 0px;}
May 23, 201214 yr I think it should be a mess whether you have <form id="contact-form" or <form id="form" in the html as the CSS has a class, not an id and a different name "form-1". If you make the html <form class="form-1" to suit all the css beginning with .form-1 does that sort it or is there another problem?
May 23, 201214 yr Author I think it should be a mess whether you have <form id="contact-form" or <form id="form" in the html as the CSS has a class, not an id and a different name "form-1". If you make the html <form class="form-1" to suit all the css beginning with .form-1 does that sort it or is there another problem? Nope ! it does not work. If I declare the class="form-1" on form tag the whole thing gets a mess: <form class="form-1" id="contact-form" method="post" action="php/mailer.php"> ~~~~ <a class="button" href="javascript:" onClick="document.getElementById('contact-form').submit()">send</a> Finally I left <form id="form" and <a class="button" href="javascript:" onClick="document.getElementById('form').submit()">Enviar</a> This time it worked fine. How does this work , after all , ? By the way , can you recommend a jscript to validate forms ? Thank you Edited May 23, 201214 yr by ronwolpa
May 23, 201214 yr It changes because you have styles hooked to #form. When you change "id=form" to id="contact-form" you take away those styles so it has no styling. You also have styles applied to a class of "form-1", when you change the class for the form to class="form-1" you now get those styles. Here's the validation plugin I use. It rocks. Goodluck, ~evu.
May 24, 201214 yr Author I see , it seems a bit strange to me that the form id is the responsible for the class on the form. Now I have another trouble with checkboxes which are not renderized. In the places where they should be there is a blank. Certainly is the lack of a proper style. <label><strong>Whatever ...... txt :</strong> <input type="checkbox" name="check[]" value="whatever" > </label>
May 24, 201214 yr I see , it seems a bit strange to me that the form id is the responsible for the class on the form. You have styles for .form-1 and #form (class and id) and if they are used in the same element but duplicate certain styles, then the last in the css order applies. For instance you have .form-1 input with width: 245px; and no float but #form input has width: 355px;height:17px;float:left; so the #form styles will apply for those bits which are different to .form-1
May 24, 201214 yr Now I have another trouble with checkboxes which are not renderized. In the places where they should be there is a blank. Certainly is the lack of a proper style. What's that small rectangle after check in name="check" ? Apart from that the code looks OK.
May 24, 201214 yr Author What's that small rectangle after check in name="check" ? Apart from that the code looks OK. Removed the double brackets ( <input type="checkbox" name="check[]" value="whatever" > and nothing happened, the radiobuttons keep not being renderized. It is supposed to be the css but I do not manage to discover. I have had a hard time with this form. Thank you all for your support
May 24, 201214 yr Author I keep picking my brains on this form; The damn radiobuttons and checkboxes are not shown; <label> <strong> <span class="spanform">**</span> Text :</strong> <input type="radio" name="" id="text"> </label> As radiobuttons are a kind of input and there is a class #form input I suspect that some format has to be added to #form input; #form input { background:#131313; font: 14px Arial, Helvetica, sans-serif; color:#535353;padding:7px 10px 10px 15px; outline: medium none; width: 420px; height:17px;float:left; } Exactly what I have no idea.
May 25, 201214 yr Author Can you provide a link to the site? Get Dropbox if you don't have a host. ~evu. As requested I uploaded on my server @ http://erpinformatica.com.br/for_you_evu/inscricao.html Please take a look on the source I commented the invisible radiobuttons. What a headache I am having.
May 25, 201214 yr I've looked at your page in Firefox and IE9 and IE7 and the radio buttons and the select box show. Sexo ** Masculino : ** Feminino : ** Estado civil : and the select box (selecione) with the options Solteiro and the others. EDIT: I tested first with javascript disabled, but with javascript enabled, they don't show. That's the problem - somewhere in javascript. Which javascript affects the form? Probably not the slider or jQuery but does the cufon affect the form? However, both radio boxes for sex can be clicked so someone can be both sexes. You need to add the same name to both like name="sexo" in both masculino and feminino input html at present name="" is empty. Do the same with another name for the two lower radio input html. Edited May 25, 201214 yr by Wickham
May 25, 201214 yr With jqTransform, it should hide the radio buttons and replace them with an <a> element with a background image. Looking at your code, most of the jqTransform CSS is missing so it's not setting the properties for radio buttons. Either put all the jqTransform CSS back, or tell it not to transform radio buttons.
May 25, 201214 yr Author I've looked at your page in Firefox and IE9 and IE7 and the radio buttons and the select box show. Sexo ** Masculino : ** Feminino : ** Estado civil : and the select box (selecione) with the options Solteiro and the others. EDIT: I tested first with javascript disabled, but with javascript enabled, they don't show. That's the problem - somewhere in javascript. Which javascript affects the form? Probably not the slider or jQuery but does the cufon affect the form? However, both radio boxes for sex can be clicked so someone can be both sexes. You need to add the same name to both like name="sexo" in both masculino and feminino input html at present name="" is empty. Do the same with another name for the two lower radio input html. 1- No , js/cufon-yui.js is currently commented as I discovered that it prevents accented vowels (á ã é í ú and ç too). By commenting cufon out of the code I haven´t noticed any difference except that the accented vowels are now visible. Then I commented each one of the scripts and discovered that the culprit is : <!--<script src="js/jquery.jqtransform.js"></script>--> Without jqTransform the slider does not work. Considering that the subscription form is that site flagship , I am in a deep trouble. In next future , as the ONG have more financial resources , I intend to hire a developer to create the dynamic version for this site and to process the form. Meanwhile the subscriptions will be processed by means a common form. 2- Thank for your correction , the way radiobuttons are acting like checkboxes. Thank you very much. Edited May 25, 201214 yr by ronwolpa
May 25, 201214 yr Author With jqTransform, it should hide the radio buttons and replace them with an <a> element with a background image. Looking at your code, most of the jqTransform CSS is missing so it's not setting the properties for radio buttons. Either put all the jqTransform CSS back, or tell it not to transform radio buttons. Let me try to read more about jqTransform so that I can post later my doubts. Thank you for the tip.
May 27, 201214 yr Author Mighty Pirate™ , a special thank you for your short but right to the point answer. I compared my form with other one (http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/) and learned how it works. I just expect that this forum does not close this discussion as I need to post further questions. regards. Thank you all for the support
Create an account or sign in to comment