i am attempting to change an input to look exactly the same as an anchor tag, but for some reason there is a 1/2px gap on the left before text starts. There is also a 1/2px gap on top.
Any idea where these gaps are coming from?
(I have removed padding, margins and borders).
exactly the same problem on safari and firefox.
Here's the best I could come up with on making an <input type="button" /> appear the same as an <a> element
example jsfiddle
Safari, Chrome, and IE all seem to cooperate pretty well with the following:
input[type="button"], a {
margin:0;
padding:0;
border:0;
cursor:pointer;
font:12px/15px Helvetica, Arial, sans-serif;
color:blue;
text-decoration:underline;
}
However Firefox (I'm using 6.0.1) required a bit more finesse:
input[type="button"] {
line-height:15px!important;
}
input[type="button"]::-moz-focus-inner {
border:0;
padding:0;
}
This -moz-focus-inner appears to be the culprit for the extra spacing around the element, both border and padding are set in the internal browser stylesheet (goto resource://gre-resources/forms.css in FF to see the stylesheet)
That said Firefox still produced 1 extra pixel above the text that I couldn't figure out how to remove, though when toggling the button or anchor there was no line-height change meaning the parent div didn't change heights due to this 1px when toggling the elements.
Well, the defaul styles for html elements such as text imputs differ from browser to browser. You must make sure to override ALL of them in your css if you want the thing to look the same on all browsers. For each of the major browsers you have some kind of inspect tool such that when you right click on an element in the page, it offers you the "inspect" option which shows you exactly what css properties the thing has. For chrome and safari this is build it. For firefox install the firebug plugin. For ie8+ install the dev toolbar.
Related
I have a html form input of type file:
<input type='file' />
I am aware of the styling limitation around this element and the workarounds (parent div, hidden field with click events etc) if you want some custom styling on it, which is not what I'm looking for.
My issue is pretty simple, if I apply height to the element, IE and Firefox set the element height just like all other input types, but chrome is ignoring the height attribute.
input{
height:50px;
}
Here is a jsfiddle
Is there away to get chrome to honor the height. Seems a simple thing but adding !important or adding the height inline doesn't make a difference.
N.b. there are LOADS of question about styling a file input on SO, but none address getting the height attribute to be honored in chrome. It works fine in other browsers.
I'm also aware that increasing the font size will make the input bigger, however its not an attractive solution.
Is setting height now possible in chrome?
This is how chrome understands it with pseudo code-
PseudoCode css
I have updated my link-
input[type="file"]{
height:50px;
}
input[type="file"]::-webkit-file-upload-button{
height:50px;
}
find the changes- http://jsfiddle.net/xfv0otLL/3/
I can't get a input button to change its font size unless I change the background color.
this html:
<input type="button" id="startStop" value="start" />
and this css:
input#startStop{
font-size: 3em;
}
result in this:
which is exactly the same as with no styling at all.
Nothing I do to the css changes it: making it 60em; changing how I select it; they all result in the same, default-looking button.
I inspected it in Chrome, and the style is actually hitting the element, and not getting overridden:
But somehow the computed style isn't working:
(that's with a base font-size of 1em for the whole document. and, no, changing the base font-size has no effect)
The only thing that changes the font size it is if I give it a background-color:
input#startStop{
font-size: 3em;
background-color: white;
}
results in this:
Can anybody tell me what is going on?
EDIT: #Hashem Qolami, thanks for posting it in an external editor, which I should have done. When I look at your JS bin, it looks like this:
EDIT 2: it's browser specific.
The error is only occurring on Chrome, Safari and Opera, and only on Mac.
If renders correctly on Firefox for Mac and on all browsers (IE10, Chrome, Firefox, Safari, and Opera) on windows.
Indeed this only happens on WebKit-MacOS based browsers. Seems to be a WebKit restriction so that the Aqua appearance stays always so.
As long as the Aqua appearance is enabled for push buttons, certain CSS properties will be ignored. Because Aqua buttons do not scale, the height property will not be honored. Similarly font and color customizations will also not be honored. The overriding principle for push buttons is that you will never see a button that is some “half-Aqua” mix. Either the button will look perfectly native, or it will not be Aqua at all.
Source: https://www.webkit.org/blog/28/buttons
Which explains why setting a background makes font-size works; it breaks the Aqua appearance.
#pzin's response got me started on the right track. He's right in that anything that breaks aqua will get it done. The recommended way to handle it without having to specify a background color is this bad boy:
-webkit-appearance: button;
Setting a border property should also work. But I think -webkit-appearance: none; would be the best approach, as it "turns off" the Aqua appearance on MacOS browsers, so any other form control that Aqua inhibits CSS for would subsequently be style-able with your choice of CSS. Was meant to add this as a comment, but don't have enough reputation ;_;.
I see that you successfully had solved the problem, but I wonder, if the only problem is to make the button bigger, why sticking to font-size method while you can also change the button size by width + height or padding.
<input type="button" value="Button" />
IE indents the text down and over by 1px when the button is clicked by default. Is there any way to stop this with just CSS?
I'm also adding my own styles to this button, and everything is great until I click the text in the button... IE seems to ignore the :active state defined in my stylesheet. But if I click the button and not the text, IE performs the :active state. Of course the text moving issue is still present no matter what I do.
Any ideas?
If you use a styled A-tag you get around this whole "pressed" state issue completely. Using display:block and some CSS you can style the A-tag to look exactly like any button.
Okay, so, I had the same problem and I've discovered a solution that works for all browsers.
I had two form buttons that I changed borders, font family and sizes, and padding on. When I would click them in IE they would "jump" because IE is stupid in my opinion. All other browsers seemed to style the buttons correctly and not have a display issue with the buttons moving when the user clicked them..
The solution I found was:
Style the form buttons so that each of them have an equal margin and apply a wrapper division with a position or margin that will offset to your liking.
#myButton {
font-family: Times New Roman;
font-size: 16pt;
border: 2px solid #f7f6f4;
margin: 20px;
padding:15px;
}
<div style="float:right;margin-right:75px;">
<input type="submit" name="myButton" id="myButton" value="Don't Jump!" />
</div>
I don't know which version of IE you are using, but try Button background shift
Also, check out Remove 3D push effect on button, specifically the answer from allicarn, which changes the padding from the element on :active.
Just remember to put the css in IE specific cases, like an IF block.
I'm working on a site and I have some problems that I hope you guys can help me with :)
If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.
In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.
Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:
This is my project.
I hope some one can help me out with this.
If you have something I better I can do, I will be glad to hear that too :)
Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.
Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.
You can put the code below in your css to target Firefox and bring the outline back in:
#-moz-document url-prefix() {
#content{
outline-offset: -11px;
}
}
Live example: http://jsfiddle.net/tw16/n8bet/
#1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers
#2: remove this line from #content css:
outline: 1px solid #B9BDBE;
under IE7:
ie http://run.xxmn.com/images/ie.jpg
under firefox
firefox http://run.xxmn.com/images/firefox.jpg
I made a style on the site like this:
* {
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
margin:0;padding:0;
}
How to make theme show the same style under IE and Firefox?
The two examples you show are the same style. I.e. they have the same font, same spacing, etc.
However, the rendering of each is different. One is anti-aliased, and the other is not. This has to do with how the browser renders text and may be affected by browser and system settings. You cannot control this from css. If you want text to look exactly the same on two browsers/platforms, you will have to make an image.