SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Text fields moving

    I want to know to stop the text fields on the top from being distorted and going onto a new row when being zoomed out, please help me.
    Attached Files Attached Files

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Code from the zip file attatchment
    (Formatting murdered by vBulletin!)

    HTML Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Test</title>     <link rel="stylesheet" type="text/css" href="view.css" media="all">      <link rel="stylesheet" type="text/css" media="all" href="animate.css"></head><body id="main_body" >
        <div id="form_container">                   <form id="form_664184" class="appnitro"  method="post" action="">                    <div class="form_description">            <h2><b>Contact  Us</b></h2>        </div>                <div id="message">                                <li id="li_2" >        <label class="description" for="element_2">Name </label>        <span>            <input type="name" id="element_3"  name="element_2_1" class="element text" value="Title"  onblur="if (this.value == '') {this.value = 'Title';}" onfocus="if (this.value == 'Title') {this.value = '';}" required/>
            </span>                   <span>            <input type="name" id="element_2_2"  name="element_2_2" class="element text" maxlength="255" size="8" " value="First Name"  onblur="if (this.value == '') {this.value = 'First Name';}" onfocus="if (this.value == 'First Name') {this.value = '';}" required/>        </span>                         <span>            <input type="text" id="element_2_2"  name="element_2_2" class="element text" maxlength="255" size="8"  type="text" value="Middle Name"  onblur="if (this.value == '') {this.value = 'Middle Name';}" onfocus="if (this.value == 'Middle Name') {this.value = '';}" />             <label class="css3-blink">Optional</label>
    
            </span>             <span>            <input type="text" id="element_2_3"  name="element_2_3" class="element text" maxlength="255" size="8"  type="text" value="Last Name"  onblur="if (this.value == '') {this.value = 'Last Name';}" onfocus="if (this.value == 'Last Name') {this.value = '';}" />        </span>        <span>                               <input type="text" id="element_3"  name="element_2_4" class="element text"  type="text" value="Suffix"  onblur="if (this.value == '') {this.value = 'Suffix';}" onfocus="if (this.value == 'Suffix') {this.value = '';}" />              <label class="css3-blink">Optional</label>
            </span>                 </li>                <li id="li_1" >        <label class="description" for="element_1">Message </label>        <div>            <textarea id="element_1" name="element_1" class="element textarea medium"></textarea>         </div>         </li>        <li id="li_3" >        <label class="description" for="element_3"></label>        <div>        <label class="description" for="element_1">Email </label>                        <input type="email"  id="element_33"  class="element text large"  value="Electronic Mail Address"  onblur="if (this.value == '') {this.value = 'Electronic Mail Address';}" onfocus="if (this.value == 'Electronic Mail Address') {this.value = '';}" required /> 
            </li>            </div>                    <li class="buttons">                <input type="hidden" name="form_id" value="664184" />                                                                                <input type="submit" class="button" value="Send Message" />                                                              <input class="button" type="reset" value="Reset Fields"/>                                                              </div>
            </li>            </ul>        <div id="footer">                    </div>    </div>   </body></html>
    CSS:
    Code:
    @font-face
    {
    font-family: prociono;
    src: url('theleagueof-prociono-f9d9680/Prociono.otf');
    
    
    } 
    body
    {
        background:#222222;
        font-family: prociono;
        font-size:small;
        margin:8px 0 16px;
        text-align:center;
    }
    H2{
    border:none;
        color:#222;
        font-size:95%;
        font-weight:700;
    }
    h3{
        color:rgb(241, 241, 241);
    text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;
        font-size:9.5px;
        text-align:center;
        line-height: 2em;
        letter-spacing:1px;
            background:#404040;
    
    
        padding:0px;
        margin:0px;
            font-family: prociono;
    
    
    }
    p{
    font-family: prociono;
    }
    #form_container
    {
        animation: fadein 4s;
        -moz-animation: fadein 4s; /* Firefox */
        -webkit-animation: fadein 4s; /* Safari and Chrome */
        -o-animation: fadein 4s; /* Opera */
        margin:0 auto;
        text-align:left;
        width:640px;
    }
    
    
    @keyframes fadein {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-moz-keyframes fadein { /* Firefox */
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-webkit-keyframes fadein { /* Safari and Chrome */
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-o-keyframes fadein { /* Opera */
        from {
            opacity:0;
        }
        to {
            opacity: 1;
        }
    }
    span{
    text-align:center;
    
    
    }
    #top
    {
        display:block;
        height:10px;
        margin:10px auto 0;
        width:650px;
    }
    #element text{
    outline:none;
    }
    #element_2_2{
    min-width:157.5px;
    
    
    }
    #element_2_3{
    min-width:157.5px;
    }
    #element_3{
    width:42px;
    clear:both;
    }
    #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  *****/
    h1
    {
        background-color:#444444;
        margin:0;
        font-family: prociono;
        font-size:3em;
        background:#404040;
        color:#303030;
        height:48px;
        padding:0px;
    margin:0px;
    }
    
    
    h1 a
    {
        
        font-family: test;
      
        display:block;
        height:100%;
        overflow:hidden;
        background:#404040;
    color:#303030;
    text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;
    
    
        text-align:center;
        line-height: 1.5em;
        letter-spacing:1px;
        font-weight:bold;
        padding:0px;
    margin:0px;
    }
    
    
    #unity{
     background:#404040;
    color:rgb(241, 241, 241);
    text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;
    padding-bottom:0px;
    margin:0px;
    text-decoration: underline;
    }
    #form_container{
      box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.3);
      background-color:rgb(241, 241, 241);
        margin-top:20px;
        }
    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:100%;
    }
    
    
    form ul
    {
        font-size:100%;
        list-style-type:none;
        margin:0;
        padding:0;
        width:100%;
    }
    
    
    form li
    {
        display:block;
        margin:0;
        padding:4px 5px 2px 9px;
        position:relative;
    }
    
    
    form li:after
    {
        clear:both;
        content:".";
        display:block;
        height:0;
        visibility:hidden;
    }
    
    
    .buttons:after
    {
        clear:both;
        content:".";
        display:block;
        height:0;
        visibility:hidden;
    }
    
    
    .buttons
    {
        clear:both;
        display:block;
        margin-top:10px;
        text-align:center;
    }
    
    
    * html form li
    {
        height:1%;
    }
    
    
    * html .buttons
    {
        height:1%;
    }
    
    
    * html form li div
    {
        display:inline-block;
    }
    
    
    form li div
    {
        color:#444;
        margin:0 4px 0 0;
        padding:0 0 8px;
    
    
    }
    
    
    form li span
    {
        color:#444;
        float:left;
        margin:0 4px 0 0;
        padding:0 0 8px;
    }
    
    
    form li div.left
    {
        display:inline;
        float:left;
        width:48%;
    }
    
    
    form li div.right
    {
        display:inline;
        float:right;
        width:48%;
    }
    
    
    form li div.left .medium
    {
        width:100%;
    }
    
    
    form li div.right .medium
    {
        width:100%;
    }
    
    
    .clear
    {
        clear:both;
    }
    
    
    form li div label
    {
        clear:both;
        color:#444;
        display:block;
        font-size:9px;
        line-height:9px;
        margin:0;
        padding-top:3px;
    }
    
    
    form li span label
    {
        clear:both;
        color:#444;
        display:block;
        font-size:9px;
        line-height:9px;
        margin:0;
        padding-top:3px;
    }
    
    
    form li .datepicker
    {
        cursor:pointer !important;
        float:left;
        height:16px;
        margin:.1em 5px 0 0;
        padding:0;
        width:16px;
    }
    
    
    .form_description
    {
        border-bottom:1px dotted #ccc;
        clear:both;
        display:inline-block;
        margin:0 0 1em;
    }
    #message{
        border-bottom:1px dotted #ccc;
    
    
    }
    .form_description[class]
    {
        display:block;
    }
    
    
    .form_description h2
    {
        clear:left;
        font-size:160%;
        font-weight:400;
        margin:-15px 0 3px;
    }
    
    
    .form_description p
    {
        font-size:95%;
        line-height:130%;
        margin:0 0 12px;
    }
    
    
    form hr
    {
        display:none;
    }
    
    
    form li.section_break
    {
        border-top:1px dotted #ccc;
        margin-top:9px;
        padding-bottom:0;
        padding-left:9px;
        padding-top:13px;
        width:97% !important;
    }
    
    
    form ul li.first
    {
        border-top:none !important;
        margin-top:0 !important;
        padding-top:0 !important;
    }
    
    
    form .section_break h3
    {
        font-size:110%;
        font-weight:400;
        line-height:130%;
        margin:0 0 2px;
    }
    
    
    form .section_break p
    {
        font-size:85%;
    
    
        margin:0 0 10px;
    }
    
    
    /**** Buttons ****/
    input.button_text
    {
        overflow:visible;
        padding:0 7px;
        width:auto;
    }
    
    
    .buttons input
    {
        margin-right:5px;
    }
    
    
    /**** Inputs and Labels ****/
    label.description
    {
        border:none;
        color:#222;
        display:block;
        font-size:95%;
        font-weight:700;
        line-height:150%;
        padding:0 0 1px;
    }
    
    
    span.symbol
    {
        font-size:115%;
        line-height:130%;
    }
    
    
    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;
    }
    
    
    input.file
    {
        color:#333;
        font-size:100%;
        margin:0;
        padding:2px 0;
    }
    
    
    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: prociono;
    
    
        font-size:100%;
        margin:0;
        width: 580px;
        height:315px;
        overflow:auto;
         resize: none;
         outline:0;
    }
    
    
    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;
    }
    
    
    
    
    input.currency
    {
        text-align:right;
    }
    
    
    input.checkbox
    {
        display:block;
        height:13px;
        line-height:1.4em;
        margin:6px 0 0 3px;
        width:13px;
    }
    
    
    input.radio
    {
        display:block;
        height:13px;
        line-height:1.4em;
        margin:6px 0 0 3px;
        width:13px;
    }
    
    
    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%;
    }
    
    
    select.select[class]
    {
        margin:0;
        padding:1px 0;
    }
    
    
    *:first-child+html select.select[class]
    {
        margin:1px 0;
    }
    
    
    .safari select.select
    {
        font-size:120% !important;
        margin-bottom:1px;
    }
    
    
    input.small
    {
        width:25%;
    }
    
    
    select.small
    {
        width:25%;
    }
    
    
    input.medium
    {
        width:50%;
    }
    
    
    select.medium
    {
        width:50%;
    }
    
    
    input.large
    {
        width:578px;
    }
    
    
    select.large
    {
        width:100%;
    }
    
    
    textarea.small
    {
        height:5.5em;
    }
    
    
    textarea.medium
    {
        height:315px;
    }
    
    
    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:99%;
    }
    
    
    #error_message_title
    {
        color:#DF0000;
        font-size:125%;
        margin:7px 0 5px;
        padding:0;
    }
    
    
    #error_message_desc
    {
        color:#000;
        font-size:100%;
        margin:0 0 .8em;
    }
    
    
    #error_message_desc strong
    {
        background-color:#FFDFDF;
        color:red;
        padding:2px 3px;
    }
    
    
    form li.error
    {
        background-color:#FFDFDF !important;
        border-bottom:1px solid #EACBCC;
        border-right:1px solid #EACBCC;
        margin:3px 0;
    }
    
    
    form li.error label
    {
        color:#DF0000 !important;
    }
    
    
    form p.error
    {
        clear:both;
        color:red;
        font-size:10px;
        font-weight:700;
        margin:0 0 5px;
    }
    
    
    form .required
    {
        color:red;
        float:none;
        font-weight:700;
    }
    
    
    /**** Guidelines and Error Highlight ****/
    form li.highlighted
    {
        background-color:#fff7c0;
    }
    
    
    form .guidelines
    {
        background:#f5f5f5;
        border:1px solid #e6e6e6;
        color:#444;
        font-size:80%;
        left:100%;
        line-height:130%;
        margin:0 0 0 8px;
        padding:8px 10px 9px;
        position:absolute;
        top:0;
        visibility:hidden;
        width:42%;
        z-index:1000;
    }
    
    
    form .guidelines small
    {
        font-size:105%;
    }
    
    
    form li.highlighted .guidelines
    {
        visibility:visible;
    }
    
    
    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 ****/
    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;
    }
    
    
    
    
    /** Embedded Form **/
    
    
    .embed #form_container{
        border: none;
    }
    
    
    .embed #top, .embed #bottom, .embed h1{
        display: none;
    }
    
    
    .embed #form_container{
        width: 100%;
    }
    
    
    .embed #footer{
        text-align: left;
        padding-left: 10px;
        width: 99%;
    }
    
    
    .embed #footer.success{
        text-align: center;
    }
    
    
    .embed form.appnitro
    {
        margin:0px 0px 0;
        
    }
    
    
    /* webkit solution */
    ::-webkit-input-placeholder { text-align:center;
            font-family: prociono;
      }
    /* mozilla solution */
    input:-moz-placeholder { text-align:center; 
            font-family: prociono;
      }
    
    
    input[type='text']{
    text-align:center;
     color:gray;
     font-family: prociono;
    
    
    }
    
    
    input[type='text']:focus{
    text-align:left;
            font-family: prociono;
    
    
    }
    
    
    input[type='email']{
        text-align:center;
         color:gray;
         font-family: prociono;
    
    
    }
    
    
    input[type='name']:focus{
    text-align:left;
    }
    input[type='name']{
        text-align:center;
         color:gray;
         font-family: prociono;
    }
    
    
    input[type='email']:focus{
    text-align:left;
    }
    
    
    
    
    
    
    .button
        {
            font-size:13px;
            display: inline-block;
            background-color: #444444;
            color: #fff;
            border: 0;
            cursor: pointer;
            outline: 0;
            -moz-transition: background-color .25s ease-in-out;
            -webkit-transition: background-color .25s ease-in-out;
            -o-transition: background-color .25s ease-in-out;
            -ms-transition: background-color .25s ease-in-out;
            transition: background-color .25s ease-in-out;
        }
    
    
            .button:hover
            {
                
                color:rgb(48,48,48);
                
            }
            
            .button:active
            {
                background-color: #444444;
                
            }
        
            
            @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } 
            .css3-blink { 
            -webkit-animation-name: blinker;
            -webkit-animation-iteration-count: infinite;
             -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
             -webkit-animation-duration: 1s; 
             }
             @-moz-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } 
            .css3-blink { 
            -moz-animation-name: blinker;
            -moz-animation-iteration-count: infinite;
             -moz-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
             -moz-animation-duration: 1s; 
             }
             
    .appnitro input:required:valid, .appnitro textarea:required:valid {
        box-shadow: 0 0 5px #5cd053;
        border-color: #28921f;
    }
             
    
    
    .appnitro input:focus:invalid, .appnitro textarea:focus:invalid { /* when a field is considered invalid by the browser */
        box-shadow: 0 0 5px #5d45252;
        border-color: #b03535;
    }
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spikeZ View Post
    Code from the zip file attatchment
    (Formatting murdered by vBulletin!)

    HTML Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Test</title>     <link rel="stylesheet" type="text/css" href="view.css" media="all">      <link rel="stylesheet" type="text/css" media="all" href="animate.css"></head><body id="main_body" >
        <div id="form_container">                   <form id="form_664184" class="appnitro"  method="post" action="">                    <div class="form_description">            <h2><b>Contact  Us</b></h2>        </div>                <div id="message">                                <li id="li_2" >        <label class="description" for="element_2">Name </label>        <span>            <input type="name" id="element_3"  name="element_2_1" class="element text" value="Title"  onblur="if (this.value == '') {this.value = 'Title';}" onfocus="if (this.value == 'Title') {this.value = '';}" required/>
            </span>                   <span>            <input type="name" id="element_2_2"  name="element_2_2" class="element text" maxlength="255" size="8" " value="First Name"  onblur="if (this.value == '') {this.value = 'First Name';}" onfocus="if (this.value == 'First Name') {this.value = '';}" required/>        </span>                         <span>            <input type="text" id="element_2_2"  name="element_2_2" class="element text" maxlength="255" size="8"  type="text" value="Middle Name"  onblur="if (this.value == '') {this.value = 'Middle Name';}" onfocus="if (this.value == 'Middle Name') {this.value = '';}" />             <label class="css3-blink">Optional</label>
    
            </span>             <span>            <input type="text" id="element_2_3"  name="element_2_3" class="element text" maxlength="255" size="8"  type="text" value="Last Name"  onblur="if (this.value == '') {this.value = 'Last Name';}" onfocus="if (this.value == 'Last Name') {this.value = '';}" />        </span>        <span>                               <input type="text" id="element_3"  name="element_2_4" class="element text"  type="text" value="Suffix"  onblur="if (this.value == '') {this.value = 'Suffix';}" onfocus="if (this.value == 'Suffix') {this.value = '';}" />              <label class="css3-blink">Optional</label>
            </span>                 </li>                <li id="li_1" >        <label class="description" for="element_1">Message </label>        <div>            <textarea id="element_1" name="element_1" class="element textarea medium"></textarea>         </div>         </li>        <li id="li_3" >        <label class="description" for="element_3"></label>        <div>        <label class="description" for="element_1">Email </label>                        <input type="email"  id="element_33"  class="element text large"  value="Electronic Mail Address"  onblur="if (this.value == '') {this.value = 'Electronic Mail Address';}" onfocus="if (this.value == 'Electronic Mail Address') {this.value = '';}" required /> 
            </li>            </div>                    <li class="buttons">                <input type="hidden" name="form_id" value="664184" />                                                                                <input type="submit" class="button" value="Send Message" />                                                              <input class="button" type="reset" value="Reset Fields"/>                                                              </div>
            </li>            </ul>        <div id="footer">                    </div>    </div>   </body></html>
    CSS:
    Code:
    @font-face
    {
    font-family: prociono;
    src: url('theleagueof-prociono-f9d9680/Prociono.otf');
    
    
    } 
    body
    {
        background:#222222;
        font-family: prociono;
        font-size:small;
        margin:8px 0 16px;
        text-align:center;
    }
    H2{
    border:none;
        color:#222;
        font-size:95%;
        font-weight:700;
    }
    h3{
        color:rgb(241, 241, 241);
    text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;
        font-size:9.5px;
        text-align:center;
        line-height: 2em;
        letter-spacing:1px;
            background:#404040;
    
    
        padding:0px;
        margin:0px;
            font-family: prociono;
    
    
    }
    p{
    font-family: prociono;
    }
    #form_container
    {
        animation: fadein 4s;
        -moz-animation: fadein 4s; /* Firefox */
        -webkit-animation: fadein 4s; /* Safari and Chrome */
        -o-animation: fadein 4s; /* Opera */
        margin:0 auto;
        text-align:left;
        width:640px;
    }
    
    
    @keyframes fadein {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-moz-keyframes fadein { /* Firefox */
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-webkit-keyframes fadein { /* Safari and Chrome */
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-o-keyframes fadein { /* Opera */
        from {
            opacity:0;
        }
        to {
            opacity: 1;
        }
    }
    span{
    text-align:center;
    
    
    }
    #top
    {
        display:block;
        height:10px;
        margin:10px auto 0;
        width:650px;
    }
    #element text{
    outline:none;
    }
    #element_2_2{
    min-width:157.5px;
    
    
    }
    #element_2_3{
    min-width:157.5px;
    }
    #element_3{
    width:42px;
    clear:both;
    }
    #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  *****/
    h1
    {
        background-color:#444444;
        margin:0;
        font-family: prociono;
        font-size:3em;
        background:#404040;
        color:#303030;
        height:48px;
        padding:0px;
    margin:0px;
    }
    
    
    h1 a
    {
        
        font-family: test;
      
        display:block;
        height:100%;
        overflow:hidden;
        background:#404040;
    color:#303030;
    text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;
    
    
        text-align:center;
        line-height: 1.5em;
        letter-spacing:1px;
        font-weight:bold;
        padding:0px;
    margin:0px;
    }
    
    
    #unity{
     background:#404040;
    color:rgb(241, 241, 241);
    text-shadow: -1px -1px 0px #101010, 1px 1px 0px #505050;
    padding-bottom:0px;
    margin:0px;
    text-decoration: underline;
    }
    #form_container{
      box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.3);
      background-color:rgb(241, 241, 241);
        margin-top:20px;
        }
    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:100%;
    }
    
    
    form ul
    {
        font-size:100%;
        list-style-type:none;
        margin:0;
        padding:0;
        width:100%;
    }
    
    
    form li
    {
        display:block;
        margin:0;
        padding:4px 5px 2px 9px;
        position:relative;
    }
    
    
    form li:after
    {
        clear:both;
        content:".";
        display:block;
        height:0;
        visibility:hidden;
    }
    
    
    .buttons:after
    {
        clear:both;
        content:".";
        display:block;
        height:0;
        visibility:hidden;
    }
    
    
    .buttons
    {
        clear:both;
        display:block;
        margin-top:10px;
        text-align:center;
    }
    
    
    * html form li
    {
        height:1%;
    }
    
    
    * html .buttons
    {
        height:1%;
    }
    
    
    * html form li div
    {
        display:inline-block;
    }
    
    
    form li div
    {
        color:#444;
        margin:0 4px 0 0;
        padding:0 0 8px;
    
    
    }
    
    
    form li span
    {
        color:#444;
        float:left;
        margin:0 4px 0 0;
        padding:0 0 8px;
    }
    
    
    form li div.left
    {
        display:inline;
        float:left;
        width:48%;
    }
    
    
    form li div.right
    {
        display:inline;
        float:right;
        width:48%;
    }
    
    
    form li div.left .medium
    {
        width:100%;
    }
    
    
    form li div.right .medium
    {
        width:100%;
    }
    
    
    .clear
    {
        clear:both;
    }
    
    
    form li div label
    {
        clear:both;
        color:#444;
        display:block;
        font-size:9px;
        line-height:9px;
        margin:0;
        padding-top:3px;
    }
    
    
    form li span label
    {
        clear:both;
        color:#444;
        display:block;
        font-size:9px;
        line-height:9px;
        margin:0;
        padding-top:3px;
    }
    
    
    form li .datepicker
    {
        cursor:pointer !important;
        float:left;
        height:16px;
        margin:.1em 5px 0 0;
        padding:0;
        width:16px;
    }
    
    
    .form_description
    {
        border-bottom:1px dotted #ccc;
        clear:both;
        display:inline-block;
        margin:0 0 1em;
    }
    #message{
        border-bottom:1px dotted #ccc;
    
    
    }
    .form_description[class]
    {
        display:block;
    }
    
    
    .form_description h2
    {
        clear:left;
        font-size:160%;
        font-weight:400;
        margin:-15px 0 3px;
    }
    
    
    .form_description p
    {
        font-size:95%;
        line-height:130%;
        margin:0 0 12px;
    }
    
    
    form hr
    {
        display:none;
    }
    
    
    form li.section_break
    {
        border-top:1px dotted #ccc;
        margin-top:9px;
        padding-bottom:0;
        padding-left:9px;
        padding-top:13px;
        width:97% !important;
    }
    
    
    form ul li.first
    {
        border-top:none !important;
        margin-top:0 !important;
        padding-top:0 !important;
    }
    
    
    form .section_break h3
    {
        font-size:110%;
        font-weight:400;
        line-height:130%;
        margin:0 0 2px;
    }
    
    
    form .section_break p
    {
        font-size:85%;
    
    
        margin:0 0 10px;
    }
    
    
    /**** Buttons ****/
    input.button_text
    {
        overflow:visible;
        padding:0 7px;
        width:auto;
    }
    
    
    .buttons input
    {
        margin-right:5px;
    }
    
    
    /**** Inputs and Labels ****/
    label.description
    {
        border:none;
        color:#222;
        display:block;
        font-size:95%;
        font-weight:700;
        line-height:150%;
        padding:0 0 1px;
    }
    
    
    span.symbol
    {
        font-size:115%;
        line-height:130%;
    }
    
    
    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;
    }
    
    
    input.file
    {
        color:#333;
        font-size:100%;
        margin:0;
        padding:2px 0;
    }
    
    
    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: prociono;
    
    
        font-size:100%;
        margin:0;
        width: 580px;
        height:315px;
        overflow:auto;
         resize: none;
         outline:0;
    }
    
    
    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;
    }
    
    
    
    
    input.currency
    {
        text-align:right;
    }
    
    
    input.checkbox
    {
        display:block;
        height:13px;
        line-height:1.4em;
        margin:6px 0 0 3px;
        width:13px;
    }
    
    
    input.radio
    {
        display:block;
        height:13px;
        line-height:1.4em;
        margin:6px 0 0 3px;
        width:13px;
    }
    
    
    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%;
    }
    
    
    select.select[class]
    {
        margin:0;
        padding:1px 0;
    }
    
    
    *:first-child+html select.select[class]
    {
        margin:1px 0;
    }
    
    
    .safari select.select
    {
        font-size:120% !important;
        margin-bottom:1px;
    }
    
    
    input.small
    {
        width:25%;
    }
    
    
    select.small
    {
        width:25%;
    }
    
    
    input.medium
    {
        width:50%;
    }
    
    
    select.medium
    {
        width:50%;
    }
    
    
    input.large
    {
        width:578px;
    }
    
    
    select.large
    {
        width:100%;
    }
    
    
    textarea.small
    {
        height:5.5em;
    }
    
    
    textarea.medium
    {
        height:315px;
    }
    
    
    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:99%;
    }
    
    
    #error_message_title
    {
        color:#DF0000;
        font-size:125%;
        margin:7px 0 5px;
        padding:0;
    }
    
    
    #error_message_desc
    {
        color:#000;
        font-size:100%;
        margin:0 0 .8em;
    }
    
    
    #error_message_desc strong
    {
        background-color:#FFDFDF;
        color:red;
        padding:2px 3px;
    }
    
    
    form li.error
    {
        background-color:#FFDFDF !important;
        border-bottom:1px solid #EACBCC;
        border-right:1px solid #EACBCC;
        margin:3px 0;
    }
    
    
    form li.error label
    {
        color:#DF0000 !important;
    }
    
    
    form p.error
    {
        clear:both;
        color:red;
        font-size:10px;
        font-weight:700;
        margin:0 0 5px;
    }
    
    
    form .required
    {
        color:red;
        float:none;
        font-weight:700;
    }
    
    
    /**** Guidelines and Error Highlight ****/
    form li.highlighted
    {
        background-color:#fff7c0;
    }
    
    
    form .guidelines
    {
        background:#f5f5f5;
        border:1px solid #e6e6e6;
        color:#444;
        font-size:80%;
        left:100%;
        line-height:130%;
        margin:0 0 0 8px;
        padding:8px 10px 9px;
        position:absolute;
        top:0;
        visibility:hidden;
        width:42%;
        z-index:1000;
    }
    
    
    form .guidelines small
    {
        font-size:105%;
    }
    
    
    form li.highlighted .guidelines
    {
        visibility:visible;
    }
    
    
    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 ****/
    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;
    }
    
    
    
    
    /** Embedded Form **/
    
    
    .embed #form_container{
        border: none;
    }
    
    
    .embed #top, .embed #bottom, .embed h1{
        display: none;
    }
    
    
    .embed #form_container{
        width: 100%;
    }
    
    
    .embed #footer{
        text-align: left;
        padding-left: 10px;
        width: 99%;
    }
    
    
    .embed #footer.success{
        text-align: center;
    }
    
    
    .embed form.appnitro
    {
        margin:0px 0px 0;
        
    }
    
    
    /* webkit solution */
    ::-webkit-input-placeholder { text-align:center;
            font-family: prociono;
      }
    /* mozilla solution */
    input:-moz-placeholder { text-align:center; 
            font-family: prociono;
      }
    
    
    input[type='text']{
    text-align:center;
     color:gray;
     font-family: prociono;
    
    
    }
    
    
    input[type='text']:focus{
    text-align:left;
            font-family: prociono;
    
    
    }
    
    
    input[type='email']{
        text-align:center;
         color:gray;
         font-family: prociono;
    
    
    }
    
    
    input[type='name']:focus{
    text-align:left;
    }
    input[type='name']{
        text-align:center;
         color:gray;
         font-family: prociono;
    }
    
    
    input[type='email']:focus{
    text-align:left;
    }
    
    
    
    
    
    
    .button
        {
            font-size:13px;
            display: inline-block;
            background-color: #444444;
            color: #fff;
            border: 0;
            cursor: pointer;
            outline: 0;
            -moz-transition: background-color .25s ease-in-out;
            -webkit-transition: background-color .25s ease-in-out;
            -o-transition: background-color .25s ease-in-out;
            -ms-transition: background-color .25s ease-in-out;
            transition: background-color .25s ease-in-out;
        }
    
    
            .button:hover
            {
                
                color:rgb(48,48,48);
                
            }
            
            .button:active
            {
                background-color: #444444;
                
            }
        
            
            @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } 
            .css3-blink { 
            -webkit-animation-name: blinker;
            -webkit-animation-iteration-count: infinite;
             -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
             -webkit-animation-duration: 1s; 
             }
             @-moz-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } 
            .css3-blink { 
            -moz-animation-name: blinker;
            -moz-animation-iteration-count: infinite;
             -moz-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
             -moz-animation-duration: 1s; 
             }
             
    .appnitro input:required:valid, .appnitro textarea:required:valid {
        box-shadow: 0 0 5px #5cd053;
        border-color: #28921f;
    }
             
    
    
    .appnitro input:focus:invalid, .appnitro textarea:focus:invalid { /* when a field is considered invalid by the browser */
        box-shadow: 0 0 5px #5d45252;
        border-color: #b03535;
    }
    Very Nice, thank you so much spikeZ!!!!

  4. #4
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile update

    I've made a simple version, if you don't feel like reading all the code simply look at this example on jsfiddle - http://jsfiddle.net/xepDX/

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by beemo View Post
    I want to know to stop the text fields on the top from being distorted and going onto a new row when being zoomed out, please help me.
    Hi,

    I had a look at your Fiddle, but cannot reproduce the issue you describe.
    What do you mean by distorted?
    What do you mean by zoomed out?
    Which browser is this happening in?

    If you can provide us with a little more information, I'm sure we can soon get to the bottom of it.

  6. #6
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Quote Originally Posted by Pullo View Post
    Hi,

    I had a look at your Fiddle, but cannot reproduce the issue you describe.
    What do you mean by distorted?
    What do you mean by zoomed out?
    Which browser is this happening in?

    If you can provide us with a little more information, I'm sure we can soon get to the bottom of it.
    Please ignore the fiddle, it's not a great example basically use the code provided in the zip or the website and you will notice the form inputs (suffix moves to line below) moving around depending on the level of zoom, I don't want that happening.Screen Shot 2013-07-18 at 10.00.11 PM.png

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    What do you mean level of zoom?
    Is it when you increase the page size by pressing (for example) Ctrl + Plus

    I cannot reproduce this on Chrome.
    Which browser are you having problems with?

  8. #8
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,

    What do you mean level of zoom?
    Is it when you increase the page size by pressing (for example) Ctrl + Plus

    I cannot reproduce this on Chrome.
    Which browser are you having problems with?
    yes by pressing Ctrl - too much.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Ok, I can reproduce this error by pressing Ctrl - in Chrome and reducing the page to 25% of its original size.

    Is this really a problem that you need to fix?
    When you look at the page on a mobile device (for example), it displays just fine.

    Can you reproduce the error in any other browsers with less draconian measures?

    If you really do want to address this, the first thing to look at is the markup of your test page.
    Run it through the W3C Validator.
    When I did this, I got 27 errors.
    These will need fixing.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •