I need an inline equal height search form that looks the same in all browsers.
http://codepen.io/mdmoura/pen/BcIFm
At the moment I have the following HTML markup:
<form method="get" action="#">
<input type="search"/><input type="submit" value="Search"/>
</form>
And the following CSS (LESS):
form {
box-sizing: border-box;
white-space: nowrap;
padding: 20px 116px 20px 0;
border: 1px solid red;
width: 40%;
input {
display: inline-block;
box-sizing: border-box;
&[type="search"] {
background-color: aqua;
border: 1px solid aqua;
font-size: 24px;
padding: 8px;
width: 100%;
}
&[type="submit"] {
background-color: #404040;
border: 1px solid #404040;
color: white;
font-size: 24px;
padding: 8px;
width: 100px;
}
&:-moz-focus-inner {
border: 0;
padding: 0;
}
} // input
} // form
THE PROBLEMS:
FIREFOX: The button seems to have one extra pixel on top and bottom;
IE 9, IE10: There is a padding on the right. No idea why ...
CHROME: The same as in IE 10 - There is a padding on the right.
SAFARI: Even worse. The Submit Input is higher then the Search Input.
And there is a right padding just as in IE 10 and Chrome.
All solved when using Normalize.css
Using overflow: hidden on the form also seems to better align the borders.
Could someone, please, help me out in improving this form and solving the problems?
Thank You,
Miguel
The padding issues you are having all stem from the way you have constructed the form div with a large right padding.
One idea would be to get rid of that right padding, and change the 'search' and 'submit' inputs so their widths equal 100% instead of both being 100%. If they were 80% and 20% for example you shouldnt need the large right padding on form. Then you can just set a margin around them or something to add space between them and the red line.
Related
input[type="number"] field does not showing the placeholder text in latest firefox for certain font family like font-family: 'Open Sans';. The current version is Firefox Quantum 57.0.2 (64-bit)
Still don't know some font family have no such issue
Please check on the demo link https://codepen.io/anon/pen/zpqzEB
body {
padding: 2rem;
}
input {
display: block;
box-sizing: border-box;
width: 100%;
height: 40px;
padding: 0 10px;
line-height: 40px;
background: #fafafa;
border: 1px solid tomato;
padding: .5rem 1rem;
font-family: 'Open Sans';
background-clip: content-box;
background-color: deepskyblue;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<input type="text" placeholder="Text field" />
<hr>
<input type="number" placeholder="Number field" />
It's your border-box property.
I'm not sure why it's happening on CodePen because it looks fine on JSBin and here on StackOverflow in the snippet you posted. Maybe it's CodePen not working great with Quantum.
Anyway, here's what's happening:
The border-box property will make it so the padding and border are included in total width and height of the element (w3schools.com).
Your input height is set to 40px. That 40px has to include the border, padding-top, padding-bottom, and the height of the element itself. Your line-height is also set to 40px. Your padding styles (you have two rules set, so it picks up the second one) is padding: .5rem 1rem;.
There isn't enough room for the input text in these 40 allocated pixels with.
Issue: 40px line height + top padding + bottom padding > 40px
As for a fix, I'm assuming you want to keep your padding and have your inputs the same size. You may need to make your font size smaller or make your inputs larger. 40px isn't enough for the padding and a 40px line height. Or you can remove that border-box property.
It kinda looks to me that the difference between this property on Chrome and on Firefox is that Chrome is ignoring the line-height. In this screenshot on Chrome, the height of the input is 22px, even though your line-height is 22px.
The root cause of the issue is that font-size is in excess of the number input controls.
Your example can be fixed preciesely by using:
padding: 0.46rem 1rem;
EXPLAINED
When padding is applied to a number type input the padding is applied to the boundaries of the box in the normal way however in some browsers cropping occurs relative to the amount of padding applied.
The cropping effect is calculated from the inside boundaries of the input arrow controls.
The cropping only affects placeholders because they are behind the input layer and become hidden when the interior boundaries of the input field are moved to cover it.
https://codepen.io/anon/pen/qpZPKd
There are various ways to avoid this however my recommendation is to avoid padding on input elements and to use alternate methods to create the desired effect.
Be an illusionist
Personally I don't see any reason to use vertical padding inside input fields. Line-height does a better job.
If you can't make the browsers do what you want make the user think the browser is doing what you want!
body {
padding: 2rem;
}
.Wrap{
box-sizing: border-box;
height: 40px;
border: 1px solid tomato;
padding: .5rem 1rem;
}
.Wrap input {
width: 100%;
height: 100%;
line-height: 40px;
border: none;
font-family: 'Open Sans';
background-color: deepskyblue;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="Wrap"><input type="text" placeholder="Text field" /></div>
<hr>
<div class="Wrap"><input type="number" placeholder="Number field" /></div>
Codepen example
https://codepen.io/anon/pen/QaNOdo
For some reason, when I change to height of your input field to anything above 40px it seems to work. Try this:
input {
display: block;
box-sizing: border-box;
width: 100%;
height: 41px;
padding: 0 10px;
line-height: 40px;
background: #fafafa;
border: 1px solid tomato;
padding: .5rem 1rem;
font-family: 'Open Sans';
background-clip:content-box;
background-color: deepskyblue;
}
I can't see why this fixes it though.
EDIT
You use two times PADDING in your css input declaration...
Just remove the first one : padding: 0 10px;
And keep : padding: .5rem 1rem;
body{
padding: 2rem;
}
input {
display: block;
box-sizing: border-box;
width: 100%;
height: 40px;
line-height: 40px;
background: #fafafa;
border: 1px solid tomato;
padding: .5rem 1rem;
font-family: 'Open Sans';
background-clip:content-box;
background-color: deepskyblue;
}
input[type="number"] {
// line-height: 1.5;
}
<input type="text" placeholder="Text field" />
<hr>
<input type="number" placeholder="Number field" />
I'm using Viget's In-Field Labels plugin on a form, but even though the label and input have the same font size, same line height, same height, same padding, same everything, the input and label text does not line up. The input text is one pixel lower than the label text.
HTML:
<div class="fieldgroup">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div><!--/.fieldgroup-->
CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Arial;
}
.fieldgroup {
position: relative;
}
input[type='text'],
label {
padding: 5px;
font-size: 16px;
line-height: 16px;
margin: 0;
height: 30px;
color: #fff;
display: block;
}
input[type='text'] {
border: none;
background: green;
}
The plugin sets the label's position to absolute and the top and left properties to 0.
Here's a fiddle.
What am I missing here?
It's possible to do this using almost 100% CSS and avoid all the layout flow issues caused by position: absolute;
jsFiddle demo
The trick is to wrap the LABEL around the text and INPUT element. Put the text inside of an element that can be given display: inline-block; margin-right: -100%;. This puts the text directly under the INPUT, which is given a transparent background so the text is visible through the INPUT.
Some Javascript is necessary to make the INPUT background opaque when the field has user input. There's no way around this at the moment… CSS can't "detect" a non-empty INPUT element.
http://jsfiddle.net/d8Apy/12/
Just size your labels & input via line-height. so text-overlap each others since they'll be sitting on same line-height
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Arial;
}
.fieldgroup {
position: relative;
}
input[type='text'],
label {
padding: 5px;
margin: 0;
line-height:16px;
Font-size:16px;
color: #fff;
display: block;border:1px solid transparent
}
input[type='text'] {
border: none;
background: green;
}
I fixed the issue by tweaking one of the CSS rules:
input[type='text'], label {
padding: 5px;
margin: 0;
font-size: 1em;
line-height: 30px;
height: 30px;
color: #fff;
display: block;
}
The trick is to set the container height to be the same as the line-height.
You can see the effect at: http://jsfiddle.net/audetwebdesign/d8Apy/7/
Why this works???
My guess is that browsers compute the height of the anonymous line boxes differently between input and label elements. At least in FireFox, setting the line-height seems to do the trick.
I don't recall ever reading anything in the CSS3 spec related to these details.
Note - Cross-Browser Effects
I tested this in a few browsers and I discovered that if you set both height and line-height and use box-sizing, you get cross-browser issues. However, if you use line-height and box-sizing, the results are consistent. I have not tested with borders.
I'm using <button> to make a post request in a form. I also styled a a.button exactly like the <button> (I need the a.button to make some JS stuff).
The button has some padding, a fixed height. When I do specify the width of the button / a they both look the same. But when I add width to the <button> it ignores the padding.
I'm having this problem in Chrome, Firefox and Opera, so I guess it's not a rendering fault. Also same issue with <input type="submit" />
Here is the basic CSS:
.button, button {
margin: 0;
display: inline-block;
border: 0;
text-decoration: none;
cursor: pointer;
color: black;
background: #ddd;
font: 12px Verdana;
padding: 40px; /* 40px, so you can see that it won't be rendered with width */
text-align: center;
}
The HTML:
Some text
<button>Some text</button>
<!-- Works fine till here -->
<br /><br />
Some text
<button style="width:200px">Some text</button>
Fiddle: http://jsfiddle.net/9dtnz/
Any suggestions why the browsers are ignoring the padding? (top and bottom when using height / left and right when using width).
Very weird, I've seen my Chrome has a box-sizing: border-box; rule for input elements, so padding is included in width...
So to avoid that just specify box-sizing: content-box; (some prefix can be necessary).
It looks fine to me, so it might be a style sheet conflict issue. Try using !important to override whatever it may be and that could solve your problem.
.button, button {
margin: 0;
display: inline-block;
border: 0;
text-decoration: none;
cursor: pointer;
color: black;
background: #ddd;
font: 12px Verdana;
padding: 40px!important; /* 40px, so you can see that it won't be rendered with width */
text-align: center;
}
Hope this helps.
Michael.
I have what I think is some pretty basic css, and it behaves differently in FF4 and IE8.
The CSS in question is like this:
div.showme {
border: 1px dotted blue;
position: absolute;
top :10px;
bottom :10px;
left: 1%;
right: 33%;
overflow: auto;
padding: 0.8em 1em 0.8em 1em;
line-height:1.75em;
}
div.showme a {
padding: 0em 5px 0em 5px;
margin: 0;
white-space: nowrap;
color: #FF00FF;
background-color:#E6E6FA;
border: 1px solid grey;
padding: 0em 4px 0em 4px; }
div.showme a:link { color: blue; }
div.showme a:visited { color: #1E90FF; }
div.showme a:active { color: red; }
The relevant HTML looks like this:
<div class='showme'>
<a href='one'>one</a>
<a href='two'>two</a>
...
</div>
The problem is, the padding is not consistently displayed, in IE8.
In Firefox, it works as I would expect.
working example:
http://jsbin.com/ogosa4
Using the above working demonstration, if you resize the window you will see the padding on the "leading" element on each line within the div, change from zero to non-zero.
How can I fix this?
If you add display: inline-block; to your div.showme a {} the padding will be applied in IE also, but it has some impact with the line height and you may need to specify additional margin's
I have seen this behaviour in Opera too. The padding goes to the upper line. Try display: inline-block and white-space:nowrap if you have more than one word in the link...
You can safely use inline-block in IE7 with inline tags.
Greetings. I'm having troubles with the following legacy code. It's fine in everything except IE7, where the submit button disappears. Space is still left for it on the page, but it doesn't show. I've tried various ways of forcing hasLayout, but without success. Any suggestions?
XHTML (XHTML 1.0 Strict DOCTYPE):
<div id="headerFunctionality" class="clearfix">
<div id="headerSearch" class="clearfix">
<form action="http://foo.com" method="GET">
<label for="q">Search</label>
<input id="q" name="q" type="text" class="text" />
<input type="submit" id="btn_search" value="Search">
</form>
</div>
</div>
CSS:
#headerFunctionality {
float: right;
display: inline;
margin: 24px 14px 25px 0;
}
#headerSearch{
float: left;
margin-left: 20px;
width: auto;
}
#headerSearch label{
position: absolute;
top: -5em;
color: #FFF;
}
#headerSearch input.text{
width: 133px;
height: 18px;
border: 1px solid #999;
font-size: 0.69em;
padding: 2px 3px 0;
margin: 0 6px 0 0;
float: left;
}
/* Replace search button with image*/
input#btn_search {
width: 65px;
height: 20px;
padding: 20px 0 0 0;
margin: 1px 0 0 0;
border: 0;
background: transparent url(../images/btn.search.gif) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
form>input#btn_search { /* For non-IE browsers*/
height: 0px;
}
input#btn_search:focus, input#btn_search:hover {
background: transparent url(../images/btn.search.over.gif) no-repeat center top;
}
have you made sure that display:block has been added to the css on the input? That oughta do the trick.
This sounds like a text-indent / image-to-replace-button issue in IE6.0 and 7.0. This solution has worked for me a few times.
Make a separate stylesheet for these browser versions and put this code in your header:
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
In the CSS file, try something like this (you can change this to input#btn_search or whatever you're targeting specifically)
#btn_search {
width: 85px;
height: 20px;
padding: 20px 0 0 0;
margin: 1px 0 0 0;
border: 0;
background: transparent url(../images/btn.search.gif) no-repeat center top;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
font-size: 0;
color: #fff;
text-align: right;
text-indent: 0;
}
"color" should be the same colour as your background.
"width" should be like 20-30 pixels MORE than the width of your image.
More information and help can be found here: http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution
There are two things I can see from the code that could cause this:
1 - the image btn.search.gif is either completely transparent, the colour of the background or not found. The button has no background colour and no border, so would not appear if not for the image/text
2 - the button visibility is set to none, which leaves space on the page but doesn't render the button. Can you look at the styles in firebug?
I finally sorted this by removing the:
form>input#btn_search { /* For non-IE browsers*/
height: 0px;
}
I had always included this with CSS image replacements after reading it somewhere ages ago, but leaving it out doesn't seem to have affected any other browser and has fixed the problem in IE7.
if you add a name attribute, does it work?
The problem likely comes from the Guillotine Bug. It's a bug in IE6 and IE7 that occurs when certain mixtures of :hover, float, and layout are present (see link for details). I believe that inserting this:
<div class="clear"><!-- --></div>
right before </form> and then applying the following CSS to it:
.clear {clear:both;}
would fix it.