I have form with inputs/selects and one button.
If Button is <button/> then I have problems with it size in FF browser (it's bigger than inputs).
If Button is <input/> then I have problems with button text (I can't set it to be in the middle of button for all browsers).
Here is example (with <button> and with <input>)
EXAMPLE
Hi use padding instead of height for the buttons:
.form-search input.search-input, .form-search select.search-input, form input.search-input, form select.search-input {
padding: 0 20px 0 20px;
margin: 3px 0;
}
This is a common problem which I had with different browsers. You can use jQuery to find out if the browser is FireFox, use the referring css, and if the browser is Chrome or Safari, use another css, to gain your requirements.
Related
I'm on FF 43.0.3, Mac OS 10.9.3. FF is cutting of the native checkbox on the right. It's not a css problem on my part; I confirmed the cutting off in CodePen. I also viewed a couple of random sites with checkmarks, and I see the same. I made sure to reset my browser zoom to default, and the default font is Times at 16px. I also tried turning off hardware acceleration via Preferences as another site suggested. Didn't work. The only code I have in my CodePen example is <input type="checkbox">
Would love to hear any suggestions.
This happens because of styling issues, and appears differently on different browsers. So try fixing the styling of the checkbox element and it's parent element, add some or all of these styles:
#parent-element { /*Or Whatever The ID Of The Parent Element Is*/
line-height: 20px;
height: 20px;
display: block
}
#checkbox-element { /*Or Whatever The ID Of The Checkbox Element Is*/
display: block;
height: 20px
}
Try changing the styles of the elements with different values to suit your needs.
In my GWT application I have a button panel, implemented as HorizontalPanel containing Button widgets wrapped within <g:cell> elements.
<g:HorizontalPanel styleName="{style.horizontalPanel}">
<g:cell>
<g:Button ui:field="selectButton" title="{constants.buttonLabel}"
text="{constants.actionLabelSelect}" />
</g:cell>
...
</g:HorizontalPanel>
The buttons have the following css:
.gwt-Button {
font-size: 13px;
color: #337BB1;
margin: 0px 10px;
padding: 5px 7px;
border: 1px solid #E3E3E3;
}
Button labels often have two words. Compared to all non-IE browsers, the button panel does not fit into the layout. Each button looks way too wide, a certain button is only shown partly. Moreover, even if I resize the view (Ctrl + "-"), this still is the case, as the whole panel containing the buttons is resized. The behavior of all FF and Chrome is: button labels are line-breaked if the panel does not fit into the browser window, and the buttons are much smaller by default, so that it cleary fits in standard browser size.
Why is IE behaving differently?
Another problem with debugging is that in GWT's superDevMode and devMode, the problem does not occur in IE, too.
How is this possible?
Browser version: IE8,
GWT version 2.5.1
Try with CSS min-width Property
.gwt-Button {
...
min-width: 135px;
}
you can try with CSS overflow Property also
overflow: visible;
In all versions of Internet Explorer (including version 11 beta), the element textarea is 1px or 2px lower than a textarea with the same width in any other browser. How to solve?
To solve the layout issue of IE 11 (and makes the layout appearance of all browsers look 99% alike), it is suggested to use CSS Reset.
Copy and paste the CSS Reset script at http://cssreset.com
Just looking at Chrome and IE, they set slightly different default height and margin properties for an otherwise unstyled textarea. To get cross-browser consistency, your best bet is to be explicit about all the box model properties like so (values selected at random but you get the idea):
texarea {
width: 400px;
height: 100px;
padding: 0;
border: 1px solid #999;
margin: 0;
}
Hope this helps.
Set height on the textarea element, and set display: block on it (to make height applicable). Example (you should of course use an external style sheet in real life):
<textarea rows=10 style=
"display: block; height: 12em; line-height: 1.2; font-size: 90%; margin: 0">
Using a height value that equals 1.2em times the number of rows seems to work OK. It should be enough for fonts that you normally want to use in a textarea. The rest is there to deal with differences in browser defaults.
Explananation: If you look at a textarea element in browser’s developer tools, you can see that the padding and border values are the same but content height differs. The reason is that textarea formatting is browser-specific and the height calculation is based not only on font size but also on browser-dependent rules. Browsers let you override this.
You could additionally set these, as they correspond to common browser defaults, but some browsers might deviate a bit (which is normally not relevant, but may matter if you aim at pixel-exactness):
textarea { padding: 2px; border-width: 1px; }
I have a simple <input type="text"/> styled with the following:
font-size:1.5em;line-height:1.5em;padding:.6em .4em;
It displays perfectly normally in Chrome, Safari (i.e. Webkit browsers).
However, we arrive at Firefox, and this happens:
As you can see, Firefox decides to cut off the size of the font at a certain height. Why is this happening? This problem occurs even if I remove the padding from the <input>.
Note:
It might help to know that the additional styles applied to this input are the default styles used in Twitter Bootstrap v.2.0.
Here's a JSFiddle, with the exact problem I'm describing:
http://jsfiddle.net/xxepX/
Try increasing your line height property. That would be restricting the viewable area for the letters causing them to be cut off. Firefox's rendering engine renders line height slightly different.
This helped me in a similar case:
input.with-fancy-styling {
box-sizing: content-box;
}
I had this problem also, and wanted to share my fix.
First, be sure you have the proper doctype declaration, like so:
<!DOCTYPE html>
<html lang="en">
Even with that, I was getting minor trimming of the lower-case j, g, and y.
I inspected and found this style on the .form-control class:
.form-control {
/* other styles omitted for brevity */
height: 30px;
padding: 6px 12px;
}
Because it is using border-box box sizing, and I didn't want a taller box, I simply overwrote the style in my own stylesheet and reduced the padding:
.form-control {
padding: 5px 12px;
}
And it solved the issue.
Hi you don't need to define the height of your input tag class or give the height:auto; in your input tag class
or see the live demo:-
http://jsfiddle.net/xxepX/2/
UPDATED
please check your updated css i have added line-height & height in your css and removed the padding.
.huge-form input, .huge-form button{
font-size:1.5em;padding:0;
line-height:31px;
height:31px;
}
or you can see the live demo:- http://jsfiddle.net/xxepX/5/
I too tried the technique of increasing 'line-height'. But it makes the text too long in height. Replacing 'line-height' with 'height' solved my issue in FF and chrome, without making it too long in height.
With css you should not use padding for an input box, for indentation use text-indent instead.
I'm having a problem with input elements:
Even though in that picture their css is
margin: 0;
padding: 0;
They still have that slight margin I can't get rid of. I had to use a negative margin of -4px to get the button to stay close to the text field.
Also, when doing further styling I end up with a problem between Firefox and Chrome:
submit buttons seem to not have the same height. Setting an height which makes the submit button fit together with the input bar on Chrome breaks it on Firefox and vice-versa. There seems to be no apparent solution.
1px difference between buttons http://gabrielecirulli.com/p/20110702-170721.png
In the image you can see that where in Chrome (right) the button and input field fit perfectly, in Firefox they'll have a height difference of 1px.
Is there a solution to these 2 problems (the persistent margin and the 1px difference)?
EDIT: I've fixed the first problem, it was caused by the fact that the two elements were separated by a newline in the html code.
The second problem persists, though, as you can see here:
by highlighting the shape of the two elements, you can see that in Firefox (left) the button is 2px taller than in Chrome (right)
Try this one: demo fiddle.
HTML:
<span><input type="text" /><input type="submit" /></span>
CSS:
span, input {
margin: 0;
padding: 0;
}
span {
display: inline-block;
border: 1px solid black;
height: 25px;
overflow: hidden;
}
input {
border: none;
height: 100%;
}
input[type="submit"] {
border-left: 1px solid black;
}
Tested on Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Only IE7 fails since it obstinately shows a normal button-like submit input.
Seems to me that your CSS is interfering, somewhere, with your inputs layout.
As you can see here http://jsfiddle.net/F3hfD/1/ what you're asking is doable without any problem.
For your second issue, see How to reset default button style in Firefox 4 +
For a similar issue where I an image used as the button type="submit" and it wasn't exactly the same height as the input adjacent to it, I simply added this to the container of the two said inputs:
padding-bottom:1px;
I had a glyphicon in a span next to input, which was inserting top:1px.
So I set top:0px on span and the issue was fixed.
But actual answer for the thread is totally problem specific and user needs to better understand the elements and css to fix it.