https://www.machform.com/forums/ MachForm Community Forums Topic: Centering the whole form content! en Wed, 06 May 2026 11:38:09 +0000 https://www.machform.com/forums/topic/centering-the-whole-form-content#post-3712 Tue, 18 Nov 2008 00:24:04 +0000 isak 3712@https://www.machform.com/forums/ <p>It looks centered to me on Safari OSX </p> https://www.machform.com/forums/topic/centering-the-whole-form-content#post-3684 Sun, 16 Nov 2008 20:28:53 +0000 Effect 3684@https://www.machform.com/forums/ <p>anyone? </p> https://www.machform.com/forums/topic/centering-the-whole-form-content#post-3683 Sat, 15 Nov 2008 22:33:18 +0000 Effect 3683@https://www.machform.com/forums/ <p>body<br /> {<br /> background:#cccccc;<br /> font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;<br /> font-size:small;<br /> margin:8px 0 0px;<br /> text-align:center;</p> <p>#form_container<br /> {<br /> background:#fff;<br /> border:1px solid #ccc;<br /> margin:0 auto;<br /> text-align:center;<br /> width:640px;<br /> }</p> <p>#top<br /> {<br /> display:block;<br /> height:10px;<br /> margin:10px auto 0;<br /> width:650px;<br /> }</p> <p>#footer<br /> {<br /> width:640px;<br /> clear:both;<br /> color:#999999;<br /> text-align:center;<br /> width:640px;<br /> padding-bottom: 15px;<br /> font-size: 85%;<br /> }</p> <p>#footer a{<br /> color:#999999;<br /> text-decoration: none;<br /> border-bottom: 1px dotted #999999;<br /> }</p> <p>#bottom<br /> {<br /> display:block;<br /> height:10px;<br /> margin:0 auto;<br /> width:650px;<br /> }</p> <p>form.appnitro<br /> {<br /> margin:20px 20px 0;<br /> padding:0 0 20px;<br /> }</p> <p>/**** Logo Section *****/<br /> h1<br /> {<br /> background-color:#efefef;<br /> margin:0;<br /> min-height:0;<br /> padding:0;<br /> text-decoration:none;<br /> text-indent:-8000px;</p> <p>}</p> <p>h1 a<br /> {</p> <p> display:block;<br /> height:100%;<br /> min-height:40px;<br /> overflow:hidden;<br /> }</p> <p>img<br /> {<br /> behavior:url(css/iepngfix.htc);<br /> border:none;<br /> }</p> <p>/**** Form Section ****/<br /> .appnitro<br /> {<br /> font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;<br /> font-size:small;<br /> }</p> <p>.appnitro li<br /> {<br /> width:97%;<br /> }</p> <p>form ul<br /> {<br /> font-size:100%;<br /> list-style-type:none;<br /> margin:0;<br /> padding:0;<br /> width:100%;<br /> }</p> <p>form li<br /> {<br /> display:block;<br /> margin:0;<br /> padding:4px 5px 2px 9px;<br /> position:relative;<br /> }</p> <p>form li:after<br /> {<br /> clear:both;<br /> content:".";<br /> display:block;<br /> height:0;<br /> visibility:hidden;<br /> }</p> <p>.buttons:after<br /> {<br /> clear:both;<br /> content:".";<br /> display:block;<br /> height:0;<br /> visibility:hidden;<br /> }</p> <p>.buttons<br /> {<br /> clear:both;<br /> display:block;<br /> margin-top:10px;<br /> }</p> <p>* html form li<br /> {<br /> height:1%;<br /> }</p> <p>* html .buttons<br /> {<br /> height:1%;<br /> }</p> <p>* html form li div<br /> {<br /> display:inline-block;<br /> }</p> <p>form li div<br /> {<br /> color:#444;<br /> margin:0 4px 0 0;<br /> padding:0 0 8px;<br /> }</p> <p>form li span<br /> {<br /> color:#444;<br /> float:left;<br /> margin:0 4px 0 0;<br /> padding:0 0 8px;<br /> width:100%;<br /> }</p> <p>form li div.left<br /> {<br /> display:inline;<br /> float:left;<br /> width:48%;<br /> }</p> <p>form li div.right<br /> {<br /> display:inline;<br /> float:right;<br /> width:48%;<br /> }</p> <p>form li div.left .medium<br /> {<br /> width:100%;<br /> }</p> <p>form li div.right .medium<br /> {<br /> width:100%;<br /> }</p> <p>.clear<br /> {<br /> clear:both;<br /> }</p> <p>form li div label<br /> {<br /> clear:both;<br /> color:#444;<br /> display:block;<br /> font-size:9px;<br /> line-height:9px;<br /> margin:0;<br /> padding-top:3px;<br /> }</p> <p>form li span label<br /> {<br /> clear:both;<br /> color:#444;<br /> display:block;<br /> font-size:9px;<br /> line-height:9px;<br /> margin:0;<br /> padding-top:3px;<br /> }</p> <p>form li .datepicker<br /> {<br /> cursor:pointer !important;<br /> float:left;<br /> height:16px;<br /> margin:.1em 5px 0 0;<br /> padding:0;<br /> width:16px;<br /> }</p> <p>.form_description<br /> {<br /> border-bottom:1px dotted #ccc;<br /> clear:both;<br /> display:inline-block;<br /> margin:0 0 1em;<br /> }</p> <p>.form_description[class]<br /> {<br /> display:block;<br /> }</p> <p>.form_description h2<br /> {<br /> clear:left;<br /> font-size:160%;<br /> font-weight:400;<br /> margin:0 0 3px;<br /> }</p> <p>.form_description p<br /> {<br /> font-size:95%;<br /> line-height:130%;<br /> margin:0 0 12px;<br /> }</p> <p>form hr<br /> {<br /> display:none;<br /> }</p> <p>form li.section_break<br /> {<br /> border-top:1px dotted #ccc;<br /> margin-top:9px;<br /> padding-bottom:0;<br /> padding-left:9px;<br /> padding-top:13px;<br /> width:97% !important;<br /> }</p> <p>form ul li.first<br /> {<br /> border-top:none !important;<br /> margin-top:0 !important;<br /> padding-top:0 !important;<br /> }</p> <p>form .section_break h3<br /> {<br /> font-size:110%;<br /> font-weight:400;<br /> line-height:130%;<br /> margin:0 0 2px;<br /> }</p> <p>form .section_break p<br /> {<br /> font-size:85%;</p> <p> margin:0 0 10px;<br /> }</p> <p>/**** Buttons ****/<br /> input.button_text<br /> {<br /> overflow:visible;<br /> padding:0 7px;<br /> width:auto;<br /> }</p> <p>.buttons input<br /> {<br /> font-size:120%;<br /> margin-right:5px;<br /> }</p> <p>/**** Inputs and Labels ****/<br /> label.description<br /> {<br /> border:none;<br /> color:#222;<br /> display:block;<br /> font-size:95%;<br /> font-weight:700;<br /> line-height:150%;<br /> padding:0 0 1px;<br /> }</p> <p>span.symbol<br /> {<br /> font-size:115%;<br /> line-height:130%;<br /> }</p> <p>input.text<br /> {<br /> background:#fff url(../../../images/shadow.gif) repeat-x top;<br /> border-bottom:1px solid #ddd;<br /> border-left:1px solid #c3c3c3;<br /> border-right:1px solid #c3c3c3;<br /> border-top:1px solid #7c7c7c;<br /> color:#333;<br /> font-size:100%;<br /> margin:0;<br /> padding:2px 0;<br /> }</p> <p>input.file<br /> {<br /> color:#333;<br /> font-size:100%;<br /> margin:0;<br /> padding:2px 0;<br /> }</p> <p>textarea.textarea<br /> {<br /> background:#fff url(../../../images/shadow.gif) repeat-x top;<br /> border-bottom:1px solid #ddd;<br /> border-left:1px solid #c3c3c3;<br /> border-right:1px solid #c3c3c3;<br /> border-top:1px solid #7c7c7c;<br /> color:#333;<br /> font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;<br /> font-size:100%;<br /> margin:0;<br /> width:99%;<br /> }</p> <p>select.select<br /> {<br /> color:#333;<br /> font-size:100%;<br /> margin:1px 0;<br /> padding:1px 0 0;<br /> background:#fff url(../../../images/shadow.gif) repeat-x top;<br /> border-bottom:1px solid #ddd;<br /> border-left:1px solid #c3c3c3;<br /> border-right:1px solid #c3c3c3;<br /> border-top:1px solid #7c7c7c;<br /> }</p> <p>input.currency<br /> {<br /> text-align:right;<br /> }</p> <p>input.checkbox<br /> {<br /> display:block;<br /> height:13px;<br /> line-height:1.4em;<br /> margin:6px 0 0 3px;<br /> width:13px;<br /> }</p> <p>input.radio<br /> {<br /> display:block;<br /> height:13px;<br /> line-height:1.4em;<br /> margin:6px 0 0 3px;<br /> width:60%;<br /> }</p> <p>label.choice<br /> {<br /> color:#444;<br /> display:block;<br /> font-size:100%;<br /> line-height:1.4em;<br /> margin:-1.55em 0 0 25px;<br /> padding:4px 0 5px;<br /> width:90%;<br /> }</p> <p>select.select[class]<br /> {<br /> margin:0;<br /> padding:1px 0;<br /> }</p> <p>*:first-child+html select.select[class]<br /> {<br /> margin:1px 0;<br /> }</p> <p>.safari select.select<br /> {<br /> font-size:120% !important;<br /> margin-bottom:1px;<br /> }</p> <p>input.small<br /> {<br /> width:25%;<br /> }</p> <p>select.small<br /> {<br /> width:25%;<br /> }</p> <p>input.medium<br /> {<br /> width:50%;<br /> }</p> <p>select.medium<br /> {<br /> width:50%;<br /> }</p> <p>input.large<br /> {<br /> width:99%;<br /> }</p> <p>select.large<br /> {<br /> width:100%;<br /> }</p> <p>textarea.small<br /> {<br /> height:5.5em;<br /> }</p> <p>textarea.medium<br /> {<br /> height:10em;<br /> }</p> <p>textarea.large<br /> {<br /> height:20em;<br /> }</p> <p>/**** Errors ****/<br /> #error_message<br /> {<br /> background:#fff;<br /> border:1px dotted red;<br /> margin-bottom:1em;<br /> padding-left:0;<br /> padding-right:0;<br /> padding-top:4px;<br /> text-align:center;<br /> width:99%;<br /> }</p> <p>#error_message_title<br /> {<br /> color:#DF0000;<br /> font-size:125%;<br /> margin:7px 0 5px;<br /> padding:0;<br /> }</p> <p>#error_message_desc<br /> {<br /> color:#000;<br /> font-size:100%;<br /> margin:0 0 .8em;<br /> }</p> <p>#error_message_desc strong<br /> {<br /> background-color:#FFDFDF;<br /> color:red;<br /> padding:2px 3px;<br /> }</p> <p>form li.error<br /> {<br /> background-color:#FFDFDF !important;<br /> border-bottom:1px solid #EACBCC;<br /> border-right:1px solid #EACBCC;<br /> margin:3px 0;<br /> }</p> <p>form li.error label<br /> {<br /> color:#DF0000 !important;<br /> }</p> <p>form p.error<br /> {<br /> clear:both;<br /> color:red;<br /> font-size:10px;<br /> font-weight:700;<br /> margin:0 0 5px;<br /> }</p> <p>form .required<br /> {<br /> color:red;<br /> float:none;<br /> font-weight:700;<br /> }</p> <p>/**** Guidelines and Error Highlight ****/<br /> form li.highlighted<br /> {<br /> background-color:#fff7c0;<br /> }</p> <p>form .guidelines<br /> {<br /> background:#f5f5f5;<br /> border:1px solid #e6e6e6;<br /> color:#444;<br /> font-size:80%;<br /> left:100%;<br /> line-height:130%;<br /> margin:0 0 0 8px !important;<br /> padding:8px 10px 9px;<br /> top:0;<br /> visibility:hidden;<br /> width:94%;<br /> z-index:1000;<br /> }</p> <p>form .guidelines small<br /> {<br /> font-size:105%;<br /> }</p> <p>form li.highlighted .guidelines<br /> {<br /> visibility:visible;<br /> }</p> <p>form li:hover .guidelines<br /> {<br /> visibility:visible;<br /> }</p> <p>.no_guidelines .guidelines<br /> {<br /> display:none !important;<br /> }</p> <p>.no_guidelines form li<br /> {<br /> width:97%;<br /> }</p> <p>.no_guidelines li.section<br /> {<br /> padding-left:9px;<br /> }</p> <p>/*** Success Message ****/<br /> .form_success<br /> {<br /> clear: both;<br /> margin: 0;<br /> padding: 90px 0pt 100px;<br /> text-align: center<br /> }</p> <p>.form_success h2 {<br /> clear:left;<br /> font-size:160%;<br /> font-weight:normal;<br /> margin:0pt 0pt 3px;<br /> }</p> <p>/*** Password ****/<br /> ul.password{<br /> margin-top:60px;<br /> margin-bottom: 60px;<br /> text-align: center;<br /> }<br /> .password h2{<br /> color:#DF0000;<br /> font-weight:bold;<br /> margin:0pt auto 10px;<br /> }</p> <p>.password input.text {<br /> font-size:170% !important;<br /> width:380px;<br /> text-align: center;<br /> }<br /> .password label{<br /> display:block;<br /> font-size:120% !important;<br /> padding-top:10px;<br /> font-weight:bold;<br /> }</p> <p>#li_captcha{<br /> padding-left: 5px;<br /> }</p> <p>#li_captcha span{<br /> float:none;<br /> }</p> <p>/** Embedded Form **/</p> <p>.embed #form_container{<br /> border: none;<br /> }</p> <p>.embed #top, .embed #bottom, .embed h1{<br /> display: none;<br /> }</p> <p>.embed #form_container{<br /> width: 100%;<br /> }</p> <p>.embed #footer{<br /> text-align: left;<br /> padding-left: 10px;<br /> width: 99%;<br /> }</p> <p>.embed #footer.success{<br /> text-align: center;<br /> }</p> <p>.embed form.appnitro<br /> {<br /> margin:0px 0px 0;</p> <p>}</p> <p>/*** Calendar **********************/<br /> div.calendar { position: relative; }</p> <p>.calendar table {<br /> cursor:pointer;<br /> border:1px solid #ccc;<br /> font-size: 11px;<br /> color: #000;<br /> background: #fff;<br /> font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;<br /> }</p> <p>.calendar .button {<br /> text-align: center;<br /> padding: 2px;<br /> }</p> <p>.calendar .nav {<br /> background:#f5f5f5;<br /> }</p> <p>.calendar thead .title {<br /> font-weight: bold;<br /> text-align: center;<br /> background: #dedede;<br /> color: #000;<br /> padding: 2px 0 3px 0;<br /> }</p> <p>.calendar thead .headrow {<br /> background: #f5f5f5;<br /> color: #444;<br /> font-weight:bold;<br /> }</p> <p>.calendar thead .daynames {<br /> background: #fff;<br /> color:#333;<br /> font-weight:bold;<br /> }</p> <p>.calendar thead .name {<br /> border-bottom: 1px dotted #ccc;<br /> padding: 2px;<br /> text-align: center;<br /> color: #000;<br /> }</p> <p>.calendar thead .weekend {<br /> color: #666;<br /> }</p> <p>.calendar thead .hilite {<br /> background-color: #444;<br /> color: #fff;<br /> padding: 1px;<br /> }</p> <p>.calendar thead .active {<br /> background-color: #d12f19;<br /> color:#fff;<br /> padding: 2px 0px 0px 2px;<br /> }</p> <p>.calendar tbody .day {<br /> width:1.8em;<br /> color: #222;<br /> text-align: right;<br /> padding: 2px 2px 2px 2px;<br /> }<br /> .calendar tbody .day.othermonth {<br /> font-size: 80%;<br /> color: #bbb;<br /> }<br /> .calendar tbody .day.othermonth.oweekend {<br /> color: #fbb;<br /> }</p> <p>.calendar table .wn {<br /> padding: 2px 2px 2px 2px;<br /> border-right: 1px solid #000;<br /> background: #666;<br /> }</p> <p>.calendar tbody .rowhilite td {<br /> background: #FFF1AF;<br /> }</p> <p>.calendar tbody .rowhilite td.wn {<br /> background: #FFF1AF;<br /> }</p> <p>.calendar tbody td.hilite {<br /> padding: 1px 1px 1px 1px;<br /> background:#444 !important;<br /> color:#fff !important;<br /> }</p> <p>.calendar tbody td.active {<br /> color:#fff;<br /> background: #529214 !important;<br /> padding: 2px 2px 0px 2px;<br /> }</p> <p>.calendar tbody td.selected {<br /> font-weight: bold;<br /> border: 1px solid #888;<br /> padding: 1px 1px 1px 1px;<br /> background: #f5f5f5 !important;<br /> color: #222 !important;<br /> }</p> <p>.calendar tbody td.weekend {<br /> color: #666;<br /> }</p> <p>.calendar tbody td.today {<br /> font-weight: bold;<br /> color: #529214;<br /> background:#D9EFC2;<br /> }</p> <p>.calendar tbody .disabled { color: #999; }</p> <p>.calendar tbody .emptycell {<br /> visibility: hidden;<br /> }</p> <p>.calendar tbody .emptyrow {<br /> display: none;<br /> }</p> <p>.calendar tfoot .footrow {<br /> text-align: center;<br /> background: #556;<br /> color: #fff;<br /> }</p> <p>.calendar tfoot .ttip {<br /> background: #222;<br /> color: #fff;<br /> font-size:10px;<br /> border-top: 1px solid #dedede;<br /> padding: 3px;<br /> }</p> <p>.calendar tfoot .hilite {<br /> background: #aaf;<br /> border: 1px solid #04f;<br /> color: #000;<br /> padding: 1px;<br /> }</p> <p>.calendar tfoot .active {<br /> background: #77c;<br /> padding: 2px 0px 0px 2px;<br /> }</p> <p>.calendar .combo {<br /> position: absolute;<br /> display: none;<br /> top: 0px;<br /> left: 0px;<br /> width: 4em;<br /> border: 1px solid #ccc;<br /> background: #f5f5f5;<br /> color: #222;<br /> font-size: 90%;<br /> z-index: 100;<br /> }</p> <p>.calendar .combo .label,<br /> .calendar .combo .label-IEfix {<br /> text-align: center;<br /> padding: 1px;<br /> }</p> <p>.calendar .combo .label-IEfix {<br /> width: 4em;<br /> }</p> <p>.calendar .combo .hilite {<br /> background: #444;<br /> color:#fff;<br /> }</p> <p>.calendar .combo .active {<br /> border-top: 1px solid #999;<br /> border-bottom: 1px solid #999;<br /> background: #dedede;<br /> font-weight: bold;<br /> }</p> <p>NEARLY </p> <p>could someone just re post the whole code for me please</p> <p>the site is thepicup.com</p> <p>thanks so much </p> https://www.machform.com/forums/topic/centering-the-whole-form-content#post-3681 Sat, 15 Nov 2008 14:48:27 +0000 redityo 3681@https://www.machform.com/forums/ <p>Hi,</p> <p>I see, guidelines give a problem for this case, try to search and replace some below CSS properties code, It should fix it, but the guidelines must show in the bottom of the element.</p> <pre><code>#form_container { background:#fff; border:1px solid #ccc; margin:0 auto; text-align:center; width:640px; } .appnitro li { width:97%; } #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; top:0; visibility:hidden; width:94%; z-index:1000; } #main_body form li span { color:#444; float:left; margin:0 4px 0 0; padding:0 0 8px; width:100%; } #main_body input.radio { display:block; height:13px; line-height:1.4em; margin:6px 0 0 3px; width:60%; }</code></pre> https://www.machform.com/forums/topic/centering-the-whole-form-content#post-3672 Sat, 15 Nov 2008 00:00:49 +0000 Effect 3672@https://www.machform.com/forums/ <p><a href="http://thepicup.com/" rel="nofollow">http://thepicup.com/</a></p> <p>ive tried what you put and it hasnt really centerd everything? </p> https://www.machform.com/forums/topic/centering-the-whole-form-content#post-3669 Fri, 14 Nov 2008 23:15:40 +0000 Effect 3669@https://www.machform.com/forums/ <p>thanks upping for more awnsers </p> https://www.machform.com/forums/topic/centering-the-whole-form-content#post-3653 Fri, 14 Nov 2008 07:45:02 +0000 redityo 3653@https://www.machform.com/forums/ <p>Hi,</p> <p>I'm not sure by adding a border to whole form? by default machform already have the border. anyway you can edit your CSS form to change form layout, search these block and change some value there </p> <pre><code>#main_body { background:#fffff; font-family:&quot;Lucida Grande&quot;, Tahoma, Arial, Verdana, sans-serif; font-size:small; margin:8px 0 0px; /* change here from 16px to 0 px*/ text-align:center; } #form_container { background:#fff; border:1px solid #ccc; margin:0 auto; text-align:center; /* change here from left to center*/ width:640px; }</code></pre> https://www.machform.com/forums/topic/centering-the-whole-form-content#post-3652 Fri, 14 Nov 2008 04:10:31 +0000 Effect 3652@https://www.machform.com/forums/ <p>oh and adding a border to the whole form? </p> https://www.machform.com/forums/topic/centering-the-whole-form-content#post-3651 Fri, 14 Nov 2008 04:01:12 +0000 Effect 3651@https://www.machform.com/forums/ <p>also how do i get rid of the big padding on the bottom? </p> https://www.machform.com/forums/topic/centering-the-whole-form-content#post-3650 Fri, 14 Nov 2008 03:50:55 +0000 Effect 3650@https://www.machform.com/forums/ <p>how do i center the whole forms content? </p>