MachForm Community Forums » MachForm 2

1. dennis10512
   Member

   My form and header shows fine in the MachForm program but after I uploaded it and viewed it my logo header is missing and the form is way too wide. Form can be seen here: http://www.hammondphotodesign.com//forms/form.html. My CSS code is below. What am I doing wrong?

   Thanks

   #main_body
   {
   background:#fffff;
   font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
   font-size:small;
   margin:8px 0 16px;
   text-align:center;
   }

   #form_container
   {
   background:#fff;
   border:1px solid #ccc;
   margin:0 auto;
   text-align:left;
   width:640px;
   }

   #top
   {
   display:block;
   height:10px;
   margin:10px auto 0;
   width:650px;
   }

   #footer
   {
   width:640px;
   clear:both;
   color:#999999;
   text-align:center;
   width:640px;
   padding-bottom: 15px;
   font-size: 85%;
   }

   #footer a{
   color:#999999;
   text-decoration: none;
   border-bottom: 1px dotted #999999;
   }

   #bottom
   {
   display:block;
   height:10px;
   margin:0 auto;
   width:650px;
   }

   form.appnitro
   {
   margin:20px 20px 0;
   padding:0 0 20px;
   }

   /**** Logo Section *****/
   #main_body h1
   {
   background-color:#dedede;
   margin:0;
   min-height:0;
   padding:0;
   text-decoration:none;
   text-indent:-8000px;
   background-image: url('http://www.hammondphotodesign.com//forms/machform/images/logo.jpg');
   background-repeat: no-repeat;
   }

   #main_body h1 a
   {

   display:block;
   height:100%;
   min-height:150px;
   overflow:hidden;
   }

   #main_body img
   {
   behavior:url(css/iepngfix.htc);
   border:none;
   }

   /**** Form Section ****/
   .appnitro
   {
   font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
   font-size:small;
   }

   .appnitro li
   {
   width:61%;
   }

   #main_body form ul
   {
   font-size:100%;
   list-style-type:none;
   margin:0;
   padding:0;
   width:100%;
   }

   #main_body form li
   {
   display:block;
   margin:0;
   padding:4px 5px 2px 9px;
   position:relative;
   }

   #main_body form li:after
   {
   clear:both;
   content:".";
   display:block;
   height:0;
   visibility:hidden;
   }

   #main_body .buttons:after
   {
   clear:both;
   content:".";
   display:block;
   height:0;
   visibility:hidden;
   }

   #main_body .buttons
   {
   clear:both;
   display:block;
   margin-top:10px;
   }

   #main_body html form li div
   {
   display:inline-block;
   }

   #main_body form li div
   {
   color:#444;
   margin:0 4px 0 0;
   padding:0 0 8px;
   }

   #main_body form li span
   {
   color:#444;
   float:left;
   margin:0 4px 0 0;
   padding:0 0 8px;
   }

   #main_body form li div.left
   {
   display:inline;
   float:left;
   width:48%;
   }

   #main_body form li div.right
   {
   display:inline;
   float:right;
   width:48%;
   }

   #main_body form li div.left .medium
   {
   width:100%;
   }

   #main_body form li div.right .medium
   {
   width:100%;
   }

   #main_body .clear
   {
   clear:both;
   }

   #main_body form li div label
   {
   clear:both;
   color:#444;
   display:block;
   font-size:9px;
   line-height:9px;
   margin:0;
   padding-top:3px;
   }

   #main_body form li span label
   {
   clear:both;
   color:#444;
   display:block;
   font-size:9px;
   line-height:9px;
   margin:0;
   padding-top:3px;
   }

   #main_body form li .datepicker
   {
   cursor:pointer !important;
   float:left;
   height:16px;
   margin:.1em 5px 0 0;
   padding:0;
   width:16px;
   }

   #main_body .form_description
   {
   border-bottom:1px dotted #ccc;
   clear:both;
   display:inline-block;
   margin:0 0 1em;
   }

   #main_body .form_description[class]
   {
   display:block;
   }

   #main_body .form_description h2
   {
   clear:left;
   font-size:160%;
   font-weight:400;
   margin:0 0 3px;
   }

   #main_body .form_description p
   {
   font-size:95%;
   line-height:130%;
   margin:0 0 12px;
   }

   #main_body form hr
   {
   display:none;
   }

   #main_body form li.section_break
   {
   border-top:1px dotted #ccc;
   margin-top:9px;
   padding-bottom:0;
   padding-left:9px;
   padding-top:13px;
   width:97% !important;
   }

   #main_body form ul li.first
   {
   border-top:none !important;
   margin-top:0 !important;
   padding-top:0 !important;
   }

   #main_body form .section_break h3
   {
   font-size:110%;
   font-weight:400;
   line-height:130%;
   margin:0 0 2px;
   }

   #main_body form .section_break p
   {
   font-size:85%;

   margin:0 0 10px;
   }

   /**** Buttons ****/
   #main_body input.button_text
   {
   overflow:visible;
   padding:0 7px;
   width:auto;
   }

   #main_body .buttons input
   {
   font-size:120%;
   margin-right:5px;
   }

   /**** Inputs and Labels ****/
   #main_body label.description
   {
   border:none;
   color:#222;
   display:block;
   font-size:95%;
   font-weight:700;
   line-height:150%;
   padding:0 0 1px;
   }

   #main_body span.symbol
   {
   font-size:115%;
   line-height:130%;
   }

   #main_body input.text
   {
   background:#fff url(../../../images/shadow.gif) repeat-x top;
   border-bottom:1px solid #ddd;
   border-left:1px solid #c3c3c3;
   border-right:1px solid #c3c3c3;
   border-top:1px solid #7c7c7c;
   color:#333;
   font-size:100%;
   margin:0;
   padding:2px 0;
   }

   #main_body input.file
   {
   color:#333;
   font-size:100%;
   margin:0;
   padding:2px 0;
   }

   #main_body textarea.textarea
   {
   background:#fff url(../../../images/shadow.gif) repeat-x top;
   border-bottom:1px solid #ddd;
   border-left:1px solid #c3c3c3;
   border-right:1px solid #c3c3c3;
   border-top:1px solid #7c7c7c;
   color:#333;
   font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
   font-size:100%;
   margin:0;
   width:99%;
   }

   #main_body select.select
   {
   color:#333;
   font-size:100%;
   margin:1px 0;
   padding:1px 0 0;
   background:#fff url(../../../images/shadow.gif) repeat-x top;
   border-bottom:1px solid #ddd;
   border-left:1px solid #c3c3c3;
   border-right:1px solid #c3c3c3;
   border-top:1px solid #7c7c7c;
   }

   #main_body input.currency
   {
   text-align:right;
   }

   #main_body input.checkbox
   {
   display:block;
   height:13px;
   line-height:1.4em;
   margin:6px 0 0 3px;
   width:13px;
   }

   #main_body input.radio
   {
   display:block;
   height:13px;
   line-height:1.4em;
   margin:6px 0 0 3px;
   width:13px;
   }

   #main_body label.choice
   {
   color:#444;
   display:block;
   font-size:100%;
   line-height:1.4em;
   margin:-1.55em 0 0 25px;
   padding:4px 0 5px;
   width:90%;
   }

   #main_body select.select[class]
   {
   margin:0;
   padding:1px 0;
   }

   *:first-child+html select.select[class]
   {
   margin:1px 0;
   }

   #main_body .safari select.select
   {
   font-size:120% !important;
   margin-bottom:1px;
   }

   #main_body input.small
   {
   width:25%;
   }

   #main_body select.small
   {
   width:25%;
   }

   #main_body input.medium
   {
   width:50%;
   }

   #main_body select.medium
   {
   width:50%;
   }

   #main_body input.large
   {
   width:99%;
   }

   #main_body select.large
   {
   width:100%;
   }

   #main_body textarea.small
   {
   height:5.5em;
   }

   #main_body textarea.medium
   {
   height:10em;
   }

   #main_body textarea.large
   {
   height:20em;
   }

   /**** Errors ****/
   #error_message
   {
   background:#fff;
   border:1px dotted red;
   margin-bottom:1em;
   padding-left:0;
   padding-right:0;
   padding-top:4px;
   text-align:center;
   width:97%;
   }

   #error_message_title
   {
   color:#DF0000;
   font-size:125%;
   margin:7px 0 5px !important;
   padding:0 !important;
   }

   #error_message_desc
   {
   color:#000;
   font-size:100%;
   margin:0 0 .8em !important;
   }

   #error_message_desc strong
   {
   background-color:#FFDFDF;
   color:red;
   padding:2px 3px;
   }

   #main_body form li.error
   {
   background-color:#FFDFDF !important;
   border-bottom:1px solid #EACBCC;
   border-right:1px solid #EACBCC;
   margin:3px 0;
   }

   #main_body form li.error label
   {
   color:#DF0000 !important;
   }

   #main_body form p.error
   {
   clear:both;
   color:red;
   font-size:10px;
   font-weight:700;
   margin:0 0 5px !important;
   }

   #main_body form .required
   {
   color:red !important;
   float:none !important;
   font-weight:700;
   }

   /**** Guidelines and Error Highlight ****/
   #main_body form li.highlighted
   {
   background-color:#fff7c0;
   }

   #main_body form .guidelines
   {
   background:#f5f5f5;
   border:1px solid #e6e6e6;
   color:#444;
   font-size:80%;
   left:100%;
   line-height:130%;
   margin:0 0 0 8px !important;
   padding:8px 10px 9px;
   position:absolute;
   top:0;
   visibility:hidden;
   width:42%;
   z-index:1000;
   }

   #main_body form .guidelines small
   {
   font-size:105%;
   }

   #main_body form li.highlighted .guidelines
   {
   visibility:visible;
   }

   #main_body form li:hover .guidelines
   {
   visibility:visible;
   }

   .no_guidelines .guidelines
   {
   display:none !important;
   }

   .no_guidelines form li
   {
   width:97%;
   }

   .no_guidelines li.section
   {
   padding-left:9px;
   }

   /*** Success Message ****/
   .form_success
   {
   clear: both;
   margin: 0;
   padding: 90px 0pt 100px;
   text-align: center
   }

   .form_success h2 {
   clear:left;
   font-size:160%;
   font-weight:normal;
   margin:0pt 0pt 3px;
   }

   /*** Password ****/
   #main_body ul.password{
   margin-top:60px;
   margin-bottom: 60px;
   text-align: center;
   }
   .password h2{
   color:#DF0000;
   font-weight:bold;
   margin:0pt auto 10px;
   }

   .password input.text {
   font-size:170% !important;
   width:380px;
   text-align: center;
   }
   .password label{
   display:block;
   font-size:120% !important;
   padding-top:10px;
   font-weight:bold;
   }

   #li_captcha{
   padding-left: 5px;
   }

   #li_captcha span{
   float:none;
   padding: 0px !important;
   }

   #li_captcha div{
   padding: 0px !important;
   }
   #captcha_image{
   padding-top: 5px;
   padding-bottom: 10px;
   }
   #captcha_response_field{
   margin-bottom: 10px;
   }
   #dummy_captcha_internal{
   height: 8px;
   }
   /** Embedded Form **/

   .embed #top, .embed #bottom, .embed h1{
   display: none;
   }

   .embed #form_container{
   border: none;
   width: 100%;
   background: none;
   }

   .embed #footer{
   text-align: left;
   padding-left: 10px;
   width: 99%;
   }

   .embed #footer.success{
   text-align: center;
   }

   .embed form.appnitro
   {
   margin:0px 0px 0;

   }

   /** Integrated Form **/
   .integrated *{
   font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
   color: #000;
   }

   .integrated #top, .integrated #bottom, .integrated h1{
   display: none;
   }

   .integrated #form_container{
   border: none;
   width: 99%;
   background: none;
   }

   .integrated #footer{
   text-align: left;
   padding-left: 10px;
   width: 99%;
   }

   .integrated #footer.success{
   text-align: center;
   }

   .integrated form.appnitro
   {
   margin:0px 0px 0;

   }

   .integrated form .section_break h3
   {
   border: none !important;
   }

   .integrated #error_message h3
   {
   border: none !important;

   }

   /*** Calendar **********************/
   div.calendar { position: relative; }

   .calendar table {
   cursor:pointer;
   border:1px solid #ccc;
   font-size: 11px;
   color: #000;
   background: #fff;
   font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
   }

   .calendar table .title,.calendar table .button{
   font-size: 11px;
   }

   .calendar * {
   font-size: 11px;
   font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
   }

   .calendar .button {
   text-align: center;
   padding: 2px;
   }

   .calendar .nav {
   background:#f5f5f5;
   }

   .calendar thead .title {
   font-weight: bold;
   text-align: center;
   background: #dedede;
   color: #000;
   padding: 2px 0 3px 0;
   }

   .calendar thead .headrow {
   background: #f5f5f5;
   color: #444;
   font-weight:bold;
   }

   .calendar thead .daynames {
   background: #fff;
   color:#333;
   font-weight:bold;
   }

   .calendar thead .name {
   border-bottom: 1px dotted #ccc;
   padding: 2px;
   text-align: center;
   color: #000;
   }

   .calendar thead .weekend {
   color: #666;
   }

   .calendar thead .hilite {
   background-color: #444;
   color: #fff;
   padding: 1px;
   }

   .calendar thead .active {
   background-color: #d12f19;
   color:#fff;
   padding: 2px 0px 0px 2px;
   }

   .calendar tbody .day {
   width:1.8em;
   color: #222;
   text-align: right;
   padding: 2px 2px 2px 2px;
   }
   .calendar tbody .day.othermonth {
   font-size: 80%;
   color: #bbb;
   }
   .calendar tbody .day.othermonth.oweekend {
   color: #fbb;
   }

   .calendar table .wn {
   padding: 2px 2px 2px 2px;
   border-right: 1px solid #000;
   background: #666;
   }

   .calendar tbody .rowhilite td {
   background: #FFF1AF;
   }

   .calendar tbody .rowhilite td.wn {
   background: #FFF1AF;
   }

   .calendar tbody td.hilite {
   padding: 1px 1px 1px 1px;
   background:#444 !important;
   color:#fff !important;
   }

   .calendar tbody td.active {
   color:#fff;
   background: #529214 !important;
   padding: 2px 2px 0px 2px;
   }

   .calendar tbody td.selected {
   font-weight: bold;
   border: 1px solid #888;
   padding: 1px 1px 1px 1px;
   background: #f5f5f5 !important;
   color: #222 !important;
   }

   .calendar tbody td.weekend {
   color: #666;
   }

   .calendar tbody td.today {
   font-weight: bold;
   color: #529214;
   background:#D9EFC2;
   }

   .calendar tbody .disabled { color: #999; }

   .calendar tbody .emptycell {
   visibility: hidden;
   }

   .calendar tbody .emptyrow {
   display: none;
   }

   .calendar tfoot .footrow {
   text-align: center;
   background: #556;
   color: #fff;
   }

   .calendar tfoot .ttip {
   background: #222;
   color: #fff;
   font-size:10px;
   border-top: 1px solid #dedede;
   padding: 3px;
   }

   .calendar tfoot .hilite {
   background: #aaf;
   border: 1px solid #04f;
   color: #000;
   padding: 1px;
   }

   .calendar tfoot .active {
   background: #77c;
   padding: 2px 0px 0px 2px;
   }

   .calendar .combo {
   position: absolute;
   display: none;
   top: 0px;
   left: 0px;
   width: 4em;
   border: 1px solid #ccc;
   background: #f5f5f5;
   color: #222;
   font-size: 90%;
   z-index: 100;
   }

   .calendar .combo .label,
   .calendar .combo .label-IEfix {
   text-align: center;
   padding: 1px;
   }

   .calendar .combo .label-IEfix {
   width: 4em;
   }

   .calendar .combo .hilite {
   background: #444;
   color:#fff;
   }

   .calendar .combo .active {
   border-top: 1px solid #999;
   border-bottom: 1px solid #999;
   background: #dedede;
   font-weight: bold;
   }

   /** Form Review **/
   #machform_review_table tbody tr:hover
   {
   background-color: #FFF7C0;
   }
   .alt{
   background: #efefef;
   }
   #machform_review_table td
   {
   text-align: left;
   border-bottom:1px solid #DEDEDE;
   padding:5px 10px;
   }

   Posted 15 years ago #

2. Saghalie
   Pro Member

   Not sure what you mean by "uploading the form". Did you do a copy and paste of the form source code in to a page or did you use the embed feature?

   You have an error in your URL also - there is a double "/" (e.g. http://www.hammondphotodesign.com//forms). I think that this would cause your problem if the page can't find your data folder then you will get this because no formating from the css is being applied.

   If you uploaded this to a blank .php or .html then make sure that (link rel="stylesheet" type="text/css" href="./data/form_1/css/view.css" media="all") points to the css file. In this case I would assume that you need to add "forms/machform/" to the href in order to have the correct path to your css file.

   Also - make sure that you've got the correct path in the css to all the required files/images that the form requires (see http://www.phpform.org/ for more info).

   Hope this helps!

   Saghalie
   http://www.kcmhosting.com

   Posted 15 years ago #
3. 

   yuniar

   Try to change your form code.

   Change your current code:

   <iframe height="3224" allowTransparency="true" frameborder="0" scrolling="no"
   style="width:100%;border:none" src="http://www.hammondphotodesign.com/forms/machform/embed.php?id=1"
   title="Well, Hello There!"><a href="http://www.hammondphotodesign.com/forms/machform/view.php?id=1"
   title="Well, Hello There!">Well, Hello There!</a></iframe>

   to become this one:

   <iframe height="3224" allowTransparency="true" frameborder="0" scrolling="no"
   style="width:100%;border:none" src="http://www.hammondphotodesign.com/forms/machform/view.php?id=1"
   title="Well, Hello There!"><a href="http://www.hammondphotodesign.com/forms/machform/view.php?id=1"
   title="Well, Hello There!">Well, Hello There!</a></iframe>

   If the problem persist or you need any further assistance, feel free to contact us directly.

   ---

   MachForm Founder

   Posted 15 years ago #

RSS feed for this topic

Reply

You must log in to post.