I am working on a site and have a Google CSE input that works fine, except the input field text does not display properly in Firefox. It looks fine in Chrome and Safari. But is absolutely microscopic in FF. The input field is in the upper right corner of the page.
Here is the code:
<form action="http://dev.rouviere.com/search-results/" id="cse-search-box">
<div>
<label for="q">search</label>
<input type="hidden" name="cx" value="017425724926122041548:nrhzbynfo9u" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="q" autocomplete="on" size="31" style="font-size: 13px; color:#797979;" />
</div>
</form>
Here is the CSS:
form input#q {
height: 20px !important;
font-size: 13px !important;
color: #797979;
float: right;
margin-top: 5px;
}
Note on the inline styling. Because Google applies some styling and my css styling was not having effect, I added the inline styling as well.
It's not rendering microscopic, it's being hidden by your padding/input height.
If you change the following rules it should work:
input#q {
height: 25px !important;
...
}
form input {
padding: 5px 2% !important;
...
}
Although I would suggest restructuring your css to avoid having to use !important everywhere and being more specific about what you're trying to select in your rules.
Related
As you can see in the picture above, the placeholder text of the search bar is a bit to the middle, how do move it to the left side?
The HTML code for this part is
<form class="navbar-form" action="/action_page.php">
<input type="text" class="form-control" placeholder="Search" name="search">
<input class="search-icon" type="image" src="Assets/search.svg" alt="Submit" width="20px" height="20px">
</form>
.form-control {
padding: 20px 60px;
}
^CSS
It is happening because of padding within the input field. Try this:
input[type="text"]{
padding-left:5px;
}
UPDATE: After you have updated your question. Below code will also work fine. But above CSS is a generic one.
.form-control {
padding: 20px 5px;
}
I have a page at http://zackelx.com/50/SO_a9.html with a BUY button. When you go to the page with Chrome and click the button a checkout form comes up where the blue Pay button is located correctly under the last input field:
But if you go to the page with Safari you get:
I'm using Safari 5.1.7 on a Windows 7 machine.
The HTML for the checkout form around the Pay button is:
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="size, color, etc."/><br />
<div class="button">
<div class="inner">
<button type="submit">
<span class="pay_amount">123</span>
</button>
</div>
</div>
The browser should place div.button underneath the input#instructions element, and Chrome does that. But Safari places it a few pixels down from the top of the input element, as if div.button had a style something like position:relative; top:-20px. But there's nothing like that, and using the Safari inspector I don't see anything that would keep div.button from being placed completely under input#instructions.
Does anyone see what's going on here?
whole code for the pop up form:
<form action="" method="POST" id="checkout_form" autocomplete="off">
<label id="state">state</label>
<input type="text" size="20" id="checkout_form_state" class="state generic" placeholder="NY" autocomplete="" required=""><br>
<label id="cc">cc#</label>
<input type="text" size="20" id="checkout_form_cc_number" class="cc-number" x-autocompletetype="cc-number" required=""><br>
<label id="exp">exp</label>
<input type="text" id="checkout_form_cc_exp" class="cc-exp" x-autocompletetype="cc-exp" placeholder="MM/YY" required="" maxlength="9">
<label id="CVC">cvc</label>
<input type="text" class="cc-cvc" x-autocompletetype="cc-csc" placeholder="CVC" required="" maxlength="4" autocomplete=""><br>
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="black"><br>
<div class="button">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
<img id="padlock" src="https://zackel.com/images/padlock_30.jpg" alt="padlock">
<img id="creditcards" src="https://zackel.com/images/creditcards.jpg" alt="creditcards">
<div id="validation"></div>
</form>
css:
#checkout_form {
position: relative;
top: 24px;
left: 43px;
width: 224px;
display: inline;
}
You are seeing Safari-specific rendering issues related to the positioning used.
Solution:
You don't need to change any of the HTML, just overwrite the CSS by placing the following CSS at the end of your stylesheet:
I tested it in Safari (Windows) v5.1.7, and it seems to work fine.
For the #checkout_form element, top: auto/left: auto are used to reset the positioning that was previously being used. I gave the element a width of 100%, and used padding to position the elements. box-sizing: border-box is used to include the padding in the element's width calculations. The vendor prefixes are used to support older browsers (-webkit- in Safari's case).
For the parent button wrapper element and the credit card image, margin: 10px 0 0 50px was essentially used to displace the element and centered it below the field elements. It's worth pointing out that text-align: center on the parent #checkout_form element was being used to center the elements.
I presume that you wanted the #padlock element hidden, thus display: none.
#checkout_form {
top: auto;
left: auto;
width: 100%;
display: block;
padding: 25px 38px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
#checkout_form .button,
img#creditcards {
margin: 10px 0 0 50px;
}
#checkout_form .button button {
position: static;
}
#checkout_form img#padlock {
display: none;
}
You have style for the form element
#checkout_form {
position: relative;
top: 24px;
left: 43px;
width: 224px;
display: inline;
}
display:inline; is what is causing the problem, and makes the button look like its floating. and not correctly rendered in safari. I dont know the cause of the issue in safari, but I have a workaround which works(I tried on on your website and it perfectly works on chrome and safari).
Change your markup a little, add a div tag inside the form to contain only the labels and the inputs but not the button you want to render on the next line.
<form action="" method="POST" id="checkout_form" autocomplete="off">
<div style="display: inline;">
<label id="email">email</label>
<input type="email" size="20" id="checkout_form_email" class="email generic" placeholder="john#comcast.net" required="" autocomplete=""><br>
<label id="phone">phone</label>
<input type="text" size="20" id="checkout_form_phone" class="phone generic" placeholder="(209) 322-6046" autocomple="" required=""><br>
<label id="name">name</label>
<input type="text" size="20" id="checkout_form_name" class="name generic" placeholder="John Doe" autocomplete="" required=""><br>
<label id="street">street</label>
<input type="text" size="20" id="checkout_form_street" class="street generic" placeholder="123 Maple St." autocomplete="" required=""><br>
<label id="city">city</label>
<input type="text" size="20" id="checkout_form_city" class="city generic" placeholder="San Jose" autocomplete="" required=""><br>
<label id="state">state</label>
<input type="text" size="20" id="checkout_form_state" class="state generic" placeholder="NY" autocomplete="" required=""><br>
<label id="cc">cc#</label>
<input type="text" size="20" id="checkout_form_cc_number" class="cc-number" x-autocompletetype="cc-number" required=""><br>
<label id="exp">exp</label>
<input type="text" id="checkout_form_cc_exp" class="cc-exp" x-autocompletetype="cc-exp" placeholder="MM/YY" required="" maxlength="9">
<label id="CVC">cvc</label>
<input type="text" class="cc-cvc" x-autocompletetype="cc-csc" placeholder="CVC" required="" maxlength="4" autocomplete=""><br>
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="black"><br>
</div>
<div class="button" style="display: inline-block;">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
<img id="padlock" src="https://zackel.com/images/padlock_30.jpg" alt="padlock">
<img id="creditcards" src="https://zackel.com/images/creditcards.jpg" alt="creditcards">
<div id="validation"></div>
</form>
I have wrapped your form with a div with style display-inline,
and add a style display:inline-block to the div in which you have wrapped your button.
<div class="button" style="display: inline-block;">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
remove the position relative css properties and add margin in your css.
**Previous code:**
#checkout_form button {
/* position:relative; */
/* top:9px; */
/* left:71px; */
height:34px;
width:180px;
/* background-image:linear-gradient(#47baf5,#2378b3); */
border:none;
border-radius: 6px;
/* blue gradient */
background: #17b4e8;
background: -moz-linear-gradient(#47baf5,#2378b3);
background: -webkit-linear-gradient(#47baf5,#2378b3);
background: -o-linear-gradient(#47baf5,#2378b3);
background: -ms-linear-gradient(#47baf5,#2378b3);/*For IE10*/
background: linear-gradient(#47baf5,#2378b3);
}
**New css:**
#checkout_form button {
height:34px;
width:180px;
/* background-image:linear-gradient(#47baf5,#2378b3); */
border:none;
border-radius: 6px;
/* blue gradient */
background: #17b4e8;
background: -moz-linear-gradient(#47baf5,#2378b3);
background: -webkit-linear-gradient(#47baf5,#2378b3);
background: -o-linear-gradient(#47baf5,#2378b3);
background: -ms-linear-gradient(#47baf5,#2378b3);/*For IE10*/
background: linear-gradient(#47baf5,#2378b3);
margin: 9px 0 0 71px;
}
I'm reading through an HTML file right now and I noticed that the form elements inside one of its forms are placed inside a DIV.
For example.
<fieldset>
<legend>Your Contact Details</legend>
<div>
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
</div>
<div>
<label for="email">Email Address:</label>
<input name="email" id="email" type="text" />
</div>
<div>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</div>
</fieldset>
I observed that it's perfectly fine to not place them inside the DIVs anyway.
What is the purpose of this?
PS: There was no styling involved in the CSS that target the DIVs, all the styles were specifically targeted for "labels", "inputs" and so on. But none that target the DIVs.
Honestly, the only effect it has on the layout is some tiny padding which can also be set by specifying a special class for the elements, that's all.
And if it's for styling, there's no associated styles set for it anyway, so why put it in the first place?
Can anybody crack the reasoning behind this?
Here's the entire document.
body {
font: 62.5%/1 "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}
form {
font-size: 1.4em;
width: 30em;
}
/* fieldset styling */
fieldset {
margin: 1em 0; /* space out the fieldsets a little*/
padding: 1em;
border : 1px solid #ccc;
}
/* legend styling */
legend {
font-weight: bold;
}
form div {
padding: 0.4em 0;
}
/* style for labels */
label {
display: block;
}
/* style for required labels */
label .required {
font-size: 0.75em;
color:#760000;
}
input {
width: 20em;
}
textarea {
width: 100%;
height: 10em;
}
input.radio, input.submit {
width: auto;
}
#remember-me .radio {
margin-right: 1em;
}
/* style form elements on focus */
input[type="text"]:focus, textarea:focus {
background: #ffc;
}
-->
</style>
</head>
<body>
<form id="comments_form" action="#" method="post">
<fieldset>
<legend>Your Contact Details</legend>
<div>
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
</div>
<div>
<label for="email">Email Address:</label>
<input name="email" id="email" type="text" />
</div>
<div>
<label for="url">Web Address:</label>
<input name="url" id="url" type="text" />
</div>
</fieldset>
<fieldset>
<legend>Comments</legend>
<div>
<label for="text">Message: <em class="required">(Required)</em></label>
<textarea name="text" id="text" cols="20" rows="10"></textarea>
</div>
</fieldset>
<fieldset id="remember-me">
<legend>Remember Me</legend>
<div>
<label for="remember-yes"><input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />Yes</label>
</div>
<div>
<label for="remember-no"><input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" />No</label>
</div>
</fieldset>
<div>
<input id="submit" class="submit" name="submit" type="submit"/>
</div>
</form>
</body>
</html>
In the given case, the div markup causes each label/input pair to appear on a line of its own, which is generally a good idea. There are many alternative ways to achieve that, but this is one of the simplest and also useful for styling that you might want to add later.
Moreover, in this case there is a style sheet rule that uses the markup: the selector form div matches these div element, and the rule for it sets 0.4em padding above and below the content of each div.
Besides styling, it also depends on doctype of the markup. For example, with XHTML 1.0 Strict, form elements like <label>, <input> must be wrapped in block-level elements, otherwise it can't pass the W3C Markup Validation Service. However, some other doctypes allow such markup.
Years ago it's a fashion to have a W3C validate banner on your site. Because of that fashion, many people overreact about validation. Like in this example, wrapping with fieldset is valid but people may still go with div or p, just like people avoid using table even if presenting tabular data. If you are reviewing some legacy codes, this might be a possible reason.
the purpose is usually for styling. For example, say you wanted the label to sit above the input like the below example. And you wanted a copy of the same thing just to the right:
Label Here Label Here
Input Here Input Here
it would be very difficult to accomplish this with the following
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
Now add in divs and you can float the divs instead (as well as add other CSS like margin to separate the two columns):
<div> <-----Add styles to parent
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
</div>
<div> <-----Add styles to parent
<label for="author">Name: <em class="required">(Required)</em></label>
<input name="author" id="author" type="text" />
</div>
UPDATE
I saw your update, it could also be to clear each "row" since labels and inputs are inline by default. Check out the difference in the fiddle:
FIDDLE
It could be that the developer believes it to be more semantic with divs, it could be to set things up for later incase the layout changes and they want to add CSS like the above example, it could be he/she doesn't really know what they're doing. It could be a number of things
#Johnsy Omniscient : yes some times developers will add additional tags to update the site for future technology. when responsive design was new; we added extra divs, etc to help the transformation when going mobile etc
I have a form whose submit input button has a background-image and is shifted left over the top of the input field:
This works in all current browsers. My problem is that it also needs to work in IE8 on Windows XP (!), and it doesn't. When you hover over the input (the magnifying glass), the pointer does not change, and the button is not clickable. Any ideas where I'm going wrong please?
HTML:
<form id="" action="" method="post">
<label for="search">Search</label>
<input type="text" id="search" name="search" value="" />
<input type="submit" name="searchsub" class="searchsub" value="" />
</form>
CSS:
#search {
width:222px;
height:36px;
padding-left:223px;
padding-right:10px;
float:left;
}
input.searchsub {
width:23px;
height:23px;
float:left;
background-image:url(../images/magnifier.jpg);
margin:8px 0 0 -32px;
border:0;
cursor:pointer;
}
This is a start: (demo: http://jsfiddle.net/KYL3A/)
I removed your floats and added a div as a "border wrapper". I think this will make IE8 play :) though I couldn't test it myself as I don't have IE8
<form id="" action="" method="post">
<div id="searchwrap">
<label for="search">Search</label>
<input type="text" id="search" name="search" value="" />
<input type="submit" name="searchsub" class="searchsub" value="" />
</div>
</form>
CSS
#searchwrap {
display: inline-block;
border: 1px solid #333;
padding: 0 10px;
}
#search {
width:150px;
height:36px;
border:0;
}
input.searchsub {
width:23px;
height:23px;
background:red url(); // added red as i dont have your image
margin:8px 0 0 0px;
cursor:pointer;
}
If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the and tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
Therefore this would not work in the web browser you are saying (IE + XP) because that browser does not support it. There is no problem in your code. So i would say that just leave it like this, because there would not be many users of your website who are running Internet Explorer on XP but if there are many then you may want to put some text in there.
Source:
The first answer on this page and this source
I am having trouble pushing down, margin and top do not seem to work. and aligning my form. I would like the form (label -> input box) to be below the login text which is the background.
I currently have:
HTML:
<div class="column-right-login">
<form action="http://www.domain.co.nz/login" method="post" enctype="multipart/form-data" id="homeLogin">
<label for="email">Email Address: </label><input type="text" name="email" value="" />
<label for="password">Password: </label><input type="password" name="password" value="" />
<br />
Forgotten Password<br />
<br />
<a onclick="$('#login').submit();" class="button"><span>Login</span></a>
</form>
<script type="text/javascript"><!--
$('#login input').keydown(function(e) {
if (e.keyCode == 13) {
$('#login').submit();
}
});
//--></script>
</div>
CSS:
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
}
Example:
Update:
I now have the code below but I cannot get my form to align:
HTML:
<div class="column-right-login">
<form action="http://www.domain.co.nz/login" method="post" enctype="multipart/form-data" id="homeLogin">
<label for="email">Email Address: </label><input type="text" name="email" value="" />
<label for="password">Password: </label><input type="password" name="password" value="" />
Forgotten Password
<a onclick="$('#login').submit();" class="button"><span>Login</span></a>
</form>
<script type="text/javascript"><!--
$('#login input').keydown(function(e) {
if (e.keyCode == 13) {
$('#login').submit();
}
});
//--></script>
</div>
CSS:
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
padding: 30px 0px 0px 10px; /* top right bottom left */
}
Example:
You probably want to use padding:
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
padding: 80px 0px 0px 50px; /* top right bottom left */
}
Please be aware that padding adds to height/width, so you will have to adjust them (abstract from current value number of px you use for padding, for example in my example width = 335 - 50 and height = 154 - 80)
If you want to use margin on form and it is not working, just add
display: block;
to the css for the form. I do not remember whether it is default or not - 4AM :)
UPDATE:
to put your inputs where you want, I would suggest wrapping label and input into divs. Then you can adjust position by using margin.
<div style="margin-left: 40px;"><label1 ...><input ...></div>
<div><label2 ...><input ...></div>
of course put styles to CSS :) hope this will work for you.
Hard to tell but it looks like your background-image needs to be positioned.
Try adding something like this to your css:
.column-right-login{
background:url('../image/login.png') no-repeat;
background-position: 0% 20%; //HERE
width:335px;
height:154px;
}
This keeps the image to the left -- the first 0% -- and bumps it down 20%.
Obviously, you can adjust the numbers.