Twitter bootstrap form fields too small Twitter bootstrap form fields too small wordpress wordpress

Twitter bootstrap form fields too small


It looks like you have two problems. The input type=text problem and the radio button problem. Without seeing your code, it appears as though your textbox problem is related to DOCTYPE and your radio button problem is related to overriding CSS styles (can confirm if you post the inspector output for the radio buttons).

If your variables are showing as the correct values (eg. 18px height), which they are, then it is most definitely a DOCTYPE issue.

From this article on A List Apart:

You’ve done all the right stuff, but your site doesn’t look or work asit should in the latest browsers.

You’ve written valid XHTML and CSS. You’ve used the W3C standardDocument Object Model (DOM) to manipulate dynamic page elements. Yet,in browsers designed to support these very standards, your site isfailing. A faulty DOCTYPE is likely to blame.

This little article will provide you with DOCTYPEs that work, and explain the practical,real–world effect of these seemingly abstract tags.

Here's the recommended list of DOCTYPEs as per W3C:

http://www.w3.org/QA/2002/04/valid-dtd-list.html


If anyone's interested, here's what I added to fix the problem:

input, input[type="text"], input[type="radio"], isindex, .uneditable-input {    padding: 4px;    border-bottom-width: 1px;    border-bottom-style: solid;    border-bottom-color: #CCC;    border-left-width: 1px;    border-left-style: solid;    border-left-color: #CCC;    border-right-width: 1px;    border-right-style: solid;    border-right-color: #CCC;     border-top-width: 1px;    border-top-style: solid;    border-top-color: #CCC;    border-top-left-radius: 3px;    border-top-right-radius: 3px;    border-bottom-left-radius: 3px;    border-bottom-right-radius: 3px;}.input-append .add-on, .input-append .btn {    margin-left: -6px;}input[type=checkbox] {        -webkit-appearance: checkbox;}