totally weird and I couldn't fix it so that it was centered...finally I played around with different width % and came to the conclusion that decreasing the % allowed it to center....but it seems backwards....can someone just explain why its doing this....i mean I got it to work but I don't want to burn that technique in my brain if its only a coincedence or something....please explain
HTML CODE
<form action="mailto:info#saucysbulldogs.com" method="post">
<input type="text" id="fName" maxlength="20" size="30" placeholder="First Name" required="required" autocomplete="on"><br />
<input type="text" id="lName" maxlength="20" size="30" placeholder="Last Name" required="required" autocomplete="on"><br />
<input type="email" id="email" maxlength="30" size="30" placeholder="Email" required="required" autocomplete="on"><br />
<textarea name="message" rows="5" cols="30" maxlength="100" wrap="hard" placeholder="Message..." required="required" /></textarea></p>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="clear" value="Clear" />
</form>
</body>
</html>
Here is the css code for the form....I tried 100% and it didn't work...then finally had to get down to 25% in order to center it....you can see it at www.saucysbulldogs.com
form {
padding:10px;
width:25%;
margin-left:auto;
margin-right:auto;
}
thanks
That you can't center an element with a width of 100% should be pretty clear for you.
When you keep the percentage lower and the margin at 0 auto it get's centered.
But there is no need to go down to 25%.
When I look to your url I see no problem. Your form there has a width of 85% and is centered in its parent container.
Related
I'm having trouble getting items to vertically align in my DIV on Mac Chrome. Ideally I'd like to get this to work on browsers that run on Mac, but I'll start with Mac Chrome. My JSFiddle is here -- https://jsfiddle.net/f77ajz4d/ . This is my HTML
<div id="search_form">
<form id="search-form" action="/users/lookup_races" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input type="text" name="first_name" id="first_name" placeholder="First Name">
<input type="text" name="last_name" id="last_name" placeholder="Last Name">
<input type="text" name="item" id="item" placeholder="Item">
<input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form>
</div>
and here's my style
#search_form
{
background-color:red;
display:table-cell;
text-align: center;
vertical-align:middle;
}
It is not an option to assign a fixed height to the DIV. Given this, what am I missing in order to get my items to vertically align?
You can do something like:
#search_form {
background: red;
padding: 5px;
}
input {
vertical-align: middle;
}
<div id="search_form">
<form id="search-form" action="/users/lookup_races" accept-charset="UTF-8" method="get">
<input name="utf8" type="hidden" value="✓">
<input type="text" name="first_name" id="first_name" placeholder="First Name">
<input type="text" name="last_name" id="last_name" placeholder="Last Name">
<input type="text" name="item" id="item" placeholder="Item">
<input alt="Search" type="image" src="/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button">
</form>
</div>
This ensures that all input elements are vertically aligned to eachother, with an even padding around them.
This is my html
<form action="" id="form">
<label for="name">NAME:</label>
<input class="inputfield" type="text" name="name" placeholder="Full name">
<br>
<label for="email">E-MAIL:</label>
<input class="inputfield" type="email" name="email" placeholder="Email adress">
<br>
<label for="subject">SUBJECT:</label>
<input class="inputfield" type="text" name="subject" placeholder="Subject">
<br>
<label for="message">MESSAGE:</label>
<textarea cols="50" rows="4" class="textarea" name="message" placeholder="Message"></textarea>
<br>
<input class="submitform" type="submit" name="submit" value="Send">
</form>
and it linked to bootstrap. and to another simple css file.
It works good in all the other sizes. I tried some things but nothing works.
Thanks.
Chances are you're additional stylesheet is overriding the Bootstrap CSS because of a media query you may have added to it.
Or have you done anything to the Bootstrap CSS itself instead of using a new stylesheet to override it?
Check your stylesheet and if your stylesheet isn't too large you should post it if you still need help.
I have a honeypot ('Work Phone') field in a simple contact form. I am hiding (hacking) the element by positioning it fixed and -1000% off the screen.
The form HTML:
<aside class="enquiry-form">
<h3 class="heading">Enquire Now</h3>
<form id="EnquiryForm_EnquiryForm" action="/products/filtered-water-taps/EnquiryForm" method="post" enctype="application/x-www-form-urlencoded">
<div class="inputs">
<input type="text" name="Name" class="text" id="EnquiryForm_EnquiryForm_Name" required="required" aria-required="true" placeholder="Name" />
<input type="email" name="Email" class="email text" id="EnquiryForm_EnquiryForm_Email" required="required" aria-required="true" placeholder="Email" />
<input type="text" name="Work Phone" class="text" id="EnquiryForm_EnquiryForm_Work-Phone" style="position: fixed; left: -1000%;" tabIndex="-1" />
<input type="text" name="Phone" class="text" id="EnquiryForm_EnquiryForm_Phone" required="required" aria-required="true" placeholder="Phone" />
<input type="text" name="Product" value="Filtered Water Taps" class="product" id="EnquiryForm_EnquiryForm_Product" placeholder="Product" />
</div>
<div class="message">
<textarea name="Message" class="textarea" id="EnquiryForm_EnquiryForm_Message" required="required" aria-required="true" placeholder="Message" rows="5" cols="20"></textarea>
</div>
<input class="button dark" type="submit" value="Send" />
</form>
</aside>
The problem is, in ie8 the whole page breaks and I get a white screen, I cannot inspect the element using dev tools which makes debugging very dfficult.
My gut feel is that it has something to do with html5shiv.
Any help is appreciated.
I would suggest this method:
#EnquiryForm_EnquiryForm_Work-Phone {
position: absolute;
top: -9999px;
left: -9999px;
}
By the way, I think its better to use a "website" as honeypot field. This is something a spambot allways want's to fill out.
I am using placeholders for all my form elements and it's showing up in them all apart from the textarea. Just looked at it in safari now, and have realised that my input of type="number" isn't showing the placeholder either.
The page is here and you need to click the 'book now' link at the top of the page.
My html:
<form id="booking" action="single-workshops.php">
<input type="text" required="required" placeholder="name"/><br />
<input type="text" required="required" placeholder="your phone number"/><br />
<input type="email" required="required" placeholder="email"/><br />
<input type="number" required="required" placeholder="how many in your party" /><br />
<textarea rows="5" cols="30" placeholder="enter optional message">
</textarea><br />
<input type="button" value="submit"/>
</form>
Because you have something as text in your textarea with a linebreak in it.
<textarea rows="5" cols="30" placeholder="enter optional message">
</textarea><br />
Should be:
<textarea rows="5" cols="30" placeholder="enter optional message"></textarea><br />
I have the following code that basically is a input form as I have it now the spacing between the title of each field and the field are all lined up properly when executed on my browser but when I try it on another browser some of the spacing is off, what is the best way to align the input so that it will render the same on all browsers?
<div style="z-index:12; position:absolute">
<font style="color:#FF6600; font-family:pirulen">
*Name: <input type="text" name="name" style=" margin-left:70px" size="30px" /><br/>
*Email: <input type="email" name="email" style="margin-left:70px; margin-top:5px; " size="30px" /><br/>
Company: <input type="text" name="company" style="margin-left:28px; margin-top:5px" size="30px" /><br/>
Address: <input type="text" name="address" style="margin-left:30px; margin-top:5px" size="30px" /><br/>
Address 2: <input type="text" name="address2" style="margin-left:10px; margin-top:5px" size="30px" /><br/>
City: <input type="text" name="city" style="margin-left:92px; margin-top:5px" size="30px" /><br/>
State: <input type="text" name="state" style="margin-left:65px; margin-top:5px" size="30px" /><br/>
Zip: <input type="text" name="zip" style="margin-left:106px; margin-top:5px" size="30px" /><br/>
*Phone: <input type="text" name="phone" style="margin-left:58px; margin-top:5px" size="30px" /><br/>
*Comments:<textarea style=" margin-left:12px; margin-top:5px; vertical-align:top; resize:none" name="comments" cols="30" rows="10" draggable="false"></textarea><br/>
<input type="submit" value="Submit" style="margin-left:150px" />
Thanks
This pretty well covers it:
http://www.alistapart.com/articles/prettyaccessibleforms
A styled unordered list, labels and inputs.
Just use a table, with labels (titles) in one column, fields in another. Having done that, you can then easily test different stylistic settings. The default rendering (fields aligned to the left) is not too bad, but consider right-aligning the labels; you may find this even better. You won’t need any pixel widths, since browsers automatically make each column as wide as needed for its widest cell contents. No other approach does this, except the use of CSS to simulate an HTML table (a clumsier way, which does not work on many versions of IE still in use).