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.
Code from the zip file attatchment
(Formatting murdered by vBulletin!)
<!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:
@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!!! 
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/
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.
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.
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.