Having problem with extra padding on a <button> element in iOS safari browser.
The markup is like this, using font-awesome icons:
<button type="submit" class="btn-class">
<i class="fa fa-plus"></i>
</button>
This is the CSS for the class in the button element:
background: #000;
width: 25px;
height: 25px;
border-radius: 100%;
border: none;
color: #fff;
font-size: 1em;
line-height: 25px;
text-align: center;
On a computer with Chrome as the browser I get this output.
But when using iPhone iOS 8.1.2 and Safari there is a strange padding to the left of the plus sign:
Any ideas on what the problem is?
EDIT
here is a fiddle on the code.
http://jsfiddle.net/qpvat7xv/
Simply add padding: 0 to your <button> style:
button {
-webkit-appearance: button;
cursor: pointer;
font: inherit;
overflow: visible;
text-transform: none;
padding:0;
}
This will solve the bug with Button tag which creates the padding in iOS.
Related
I'm having trouble with fixing my button in CSS. I have my button styled correctly, but for some reason the background behind the button itself is white still.
The code for my button & links, as I think it may be an issue with my links as well.
HTML:
<button class="s1btn">
<a href="#" target="_blank" tabindex="1">GitHub
</a></button></div>
CSS for button:
.s1btn a {
text-decoration: none;
color: white;
background-color: #f36dcb;
border: black 1px solid;
border-radius: 3px;
text-align: center;
padding-top: 3px;
padding-left: 3px;
padding-right: 3px;
}`
.s1btn a:hover {
background: #844421;
}
.s1btn a:active {
background: #b36b43;
padding-top: 3px;
}
CSS for all links:
links {
font-size: medium;
margin-left: auto;
padding-right: 50px;
color: #844421;
font-weight: 500;
}
.hLink {
margin-right: 30px;
}
`
Screenshot of button:
Broken Button
I tried to comment out different sections of my button but that didn't help me target the problem to resolve the issue. I also tried to inspect the website itself, to figure out what was causing the background of my button to remain white.
Browsers have default styles for buttons, a tags, etc. Your css is only selecting the <a> tag in the <button> tag, so no styles are being applied to the <button> itself. You can reset the styles of the button with this:
button {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
You can see more on resetting the button styles here: https://css-tricks.com/overriding-default-button-styles/
Following annoying problem: jsfiddle.net/f6juduq1
Two buttons, one input type="submit", the other an a tag, should look the same:
HTML:
I'm a button
<br><br><br>
<input type="submit" class="button" value="I'm a button">
CSS:
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
}
.button:hover,
.button:focus,
.button:active {
text-decoration: underline;
}
input[type="submit"].button {
box-sizing: content-box;
}
The last line (box-sizing) is needed to achieve the same width. (Or min-width - the buttons should be flexible in width.)
Now the issues:
Firefox 40
The inner box (inspect the first button with Firebug and click the Layout tab) is 150 x 22px.
Second button: 150 x 24px. Why?
Chrome 45
First button (inspect with Chrome's Developer Tools): 150 x 21px.
Second button: 150 x 21px. Okay, but they differ from Firefox. Why?
Internet Explorer 11
First button (inspect with IE's Developer Tools): 150 x 20.7px.
Second button: 150 x 20.7px. Okay, but "20.7" huh? Why?
Safari 5.1.7
(Can't inspect the jsfiddle's result iframe.)
Opera 31
(Same as Chrome.)
Taking a screenshot from Firefox's result and comparing it in Photoshop shows the input (second button) is 2px higher than the a tag (first button):
In Chrome and Safari it looks good:
In IE the a tag is 1px higher.
Now the final question is how to fix this or rather how to prevent those messy issues?
Thanks in advance!
Very interesting observation here. The issue affects both height and width, specifically in Mozilla Firefox, due to built-in CSS style declarations.
Adding the following CSS should fix both height and width discrepancies.
input::-moz-focus-inner { border:0; padding:0 }
Illustration of the bug and fix here (notice, I've taken out your CSS styles for height:
html{font-family: Arial; font-size:0.8em;}
.wrapper {
background: red;
white-space: nowrap;
}
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
}
.button:hover,
.button:focus,
.button:active {
text-decoration: underline;
}
input[type="submit"].button {
box-sizing: content-box;
}
input.buttonfix::-moz-focus-inner {
border:0;
padding:0
}
NOTE: Use Firefox browser to see the issue.<br>
<div class="wrapper">
I'm a button
<input type="submit" class="button buttonfix" value="I'm a button">
<input type="submit" class="button" value="I'm a button">
</div>
Notice last button has extra height forcing the container to show top/bottom of other buttons
<br>
<br>Input Button - Fixed<br>
<input type="submit" class="button buttonfix" value="I'm a much longer button">
<br>A Tag - fine<br>
I'm a much longer button
<br>Input button - bug?<br>
<input type="submit" class="button" value="I'm a much longer button">
Read about the issue in detail here: https://css-tricks.com/forums/topic/button-padding-issue/
The solution
Basically there are three issues:
Different box lengths
Different default settings across several browsers
Firefox CSS discrepancies
The solutions are listed below.
1. Different box lengths
An a tag is longer than an input submit:
To solve this you have to add box-sizing: content-box; to the input's CSS. As from now the (short) buttons look like:
2. Different default settings across several browsers
The buttons have different heights thanks to different browser default settings:
The input (second one) is higher.
The solution here: resetting all those defaults. Set line-height and height:
3. Firefox CSS discrepancies
And finally the last one, a pretty annoying behavior just in Firefox.
The buttons above are equal: same height, same width. But if the button text gets longer you might see this:
The input button is wider. This is because Firefox uses pseudo elements within the button elements. To redress this problem reset padding and border for input::-moz-focus-inner:
The code
Here's a sample: http://jsfiddle.net/f6juduq1/12/
CSS
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
line-height: 1.5;
height: 27px; /* 18px x 1.5 = 27px */
}
input[type="submit"].button {
box-sizing: content-box;
}
input.button::-moz-focus-inner {
border:0;
padding:0;
}
Thank you all for help. I hope this answer is concise & clear to help other people finding the solution as soon as possible.
To obtain the same height in all browsers you need to specify the height
and for vertical align center line-height same as height value
for example try this:
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
min-width: 150px;
cursor: pointer;
padding: 0 20px;
/* Adjust your height here */
line-height: 35px;
height: 35px;
}
I was having a problem with <a> being sized differently than <button> only in Safari, and it was caused by having SVG icon buttons.
The SVGs were sized at 35px, and both the anchor and button tags had explicit height of 35px set on them.
The problem was that the buttons were smaller than the anchors only in Safari.
I removed the height declarations on the buttons and it made the button take the size of the SVG inside it.
I am trying to develop a website. I have written styling in CSS. It is working perfectly in Mozilla Firefox and Google Chrome but it is not behaving properly in Internet Explorer 10. I am trying to hover on some carded layout's made using bootstrap and tiles, so if I hover on the card the border color should change and the text inside that card should become bold. I could some how manage to get the text bold but I am not able to see the border color change when I hover.
I need to know what the solution is and figure out something which will make sure that the styling is same across the browsers.
<div class="col-sm-6 col-md-4 col-lg-4" align="center">
<span class="tile tile-account">
<a href="#" onclick="return doubleClick()" class="block">
<strong class="tile-heading landingpageheader tileTextStyle">
Change my name</strong>
</a>
</span>
</div>
The styling in CSS:
.tile {
display: block;
background: #fff;
border: 2px solid;
border-color:#ccc;
border-radius:8px;
cursor: pointer;
margin-bottom: 20px;
;
overflow: hidden
}
.tile>a:HOVER .landingpageheader{
font-weight: bold;
}
.tile>a:hover{
border: 2px solid;
border-color: #00A1D0;
}
.tile-account {
height: 180px;
border-radius: 8px;
}
.tileTextStyle{
text-align: center;
padding-top:12px;
white-space: normal;
word-wrap: noraml;
height: 46%
}
.landingpageheader {
font-size: 20px;
font-style : normal;
font-weight : 400;
font-family : Helvetica;
color: #00A1D0;
}
just try to complete the code in your css
span.tite.tile-account a:hover{
font-weight: bold;
}
This question already has answers here:
How to style button inputs to be identical in Chrome and Firefox?
(4 answers)
Closed 8 years ago.
I have a CSS class for styling buttons. When I apply it to an <input> and an <a> tag, the <a> is a bit smaller than the <input>. This problem occurs in Firefox (33), but in Chrome (38) it looks fine.
Here is a minimal example:
.my-button {
display: inline-block;
padding: 1em;
border-radius: 0.2em;
border: 1px solid #000;
line-height: 1em;
font-size: 13px;
text-decoration: none;
background-color: #ccc;
color: #000;
}
<input class="my-button" type="submit" value="Save">
<a class="my-button" href="#">Cancel</a>
You can see it also here: http://jsfiddle.net/tr4vbrha/4/
This happens because of a difference in font. The input on windows is Microsoft Sans Serif, while in the a tag it is Times New Roman.
To fix this add the font-family property to the my-button class.
This probably is because the box-sizing property of button is different to that of a button. I added this:
input{
box-sizing: content-box;
}
.my-button{
min-width: 2.75em;
}
and it worked
remove css attribure : display:inline-block
see example :demo
.my-button {
padding: 1em;
border-radius: 0.2em;
border: 1px solid #000;
line-height: 1em;
font-size: 13px;
font-family: Arial;
text-decoration: none;
background-color: #ccc;
color: #000;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
.my-button {
display:inline-block
}
}
<input class="my-button" type="submit" value="Save">
Cancel
i have CSS code that does not really work on webkit browsers such as safari and chrome
if you want live example here it is http://jsfiddle.net/mnjKX/1/
i have this CSS code
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
filter: alpha(opacity=1);
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #79130e;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
padding: 4px 18px;
text-transform: uppercase;
}
and this HTML code :
<span class="file-wrapper">
<input type="file" name="photo" id="photo" />
<span class="button">Choose a Photo</span>
</span>
this code shows hidden input file tag ,
the problem here is that the cursor:pointer is does not work on webkit browsers ,
how can i solve it or bypass / overtake this ?
For starters, it works in Chrome if you remove the height declaration from the input rule.
Live demo: http://jsfiddle.net/mnjKX/16/
But this transparent input field is a hell of a hack... I wouldn't rely on it.
Update:
And here is the proper solution:
::-webkit-file-upload-button { cursor:pointer; }
I thought the file upload button is unreachable, but Chrome's user agent style sheet proved my wrong :)
An interesting (cross-browser) solution I came up with:
Give the input a CSS property of cursor:pointer, place the input in a div (with overflow:hidden) and give the input a left padding of 100%. The padded area will have the pointer property.
I personally don't trust -webkit and -moz fixes because I feel like they are arbitrary and temporary, and will be replaced soon.
input[type='file']{
opacity: 0;
cursor: pointer;
width: 24px;
height: 24px;
font-size: 0;
position: absolute;
}
<input type="file">
<img width="24" height="24" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADs0lEQVR42rWVa2iOYRjH9+zd+dw2oWaGwkjzRY5flDC1nBaxsTnVYkaWc8oHoZalETWHsVGkZo0yIyEmGzkWpZhDbBhmxE7v63fp/0j7YGq89e/+XfdzuJ7/dV/3/Tp+//nndHdD2o4RIQHBnilgIPL3+XytjuO0MkZ4O3zllevve3uUYMaulDxeePL0mruNXeaTmJ/IfMlfJZhekBLv+PuNBEPRq8427wN/jxPmeJxM4seoAH0yF+g9WonmVOTfK+o2weTNyZ6w2KC9fNFuQtz7AuF0+DV8Ft4GZ6OvxPXE7xlLGZ8wF4CLK39MMLNwZDoPJPPAHcJwOAiOhp/Ct+Ba3d9J/I3YEjUzTmNuNuwHd8DtcAg8FK4ica2jeuYyFKM4cyB1aGEz0BoUYw6QLWoEakLLUY25UOl+foSubaB8O1wHmWS+R+YadUojbEmi4WjYo4Rv5SCWMdic2LzYEjfBAXAynImDI78nqOXCWcIk2KsHgmB/+ARs6/BE8UDGuYw5KmkbfA5O1QckwfNJUOqWaCnDdVRuL5WsXO1oobrIXpYgJ9W6N9VKgdZRjmreUwqPReYgg7mjroMlZL5K5v2E8XA/2JKshc9okfui78QNxLaYdxgteQkcCVfCW+HX8LiuDqwFr6Ey1B/1Rm/QMJSP8lCkus4cNNheQbt032G5s4+qR8PRIhwccB1kk/kmmSsIB8GdcDVfkEbyU/B45ntZt3Ctg9icfGQ8zdwW+AY8WG36UA7m8XyZm2CxbrqkElmC2/AE+DKcCMeaC/W8nUUtWthVcJ0WtlXNMhmeS4LjXbvoolmF22ErwSh4BTzTuguFaRPadm9iXG0NAFfA1hQvtEaT4CwSHHLXYBHDLWQJ4lXnp2ifuuUYStRC2zPB6LwdYagQzdImeydNtaOFNTjoOsiSTXuot3q9BW6Bc+E62Hb7EOJQ4irGYsY5zO2E4+FmrYE5GA0vsJPWTbBMtbZWG6AyeJXgkxbTDsKXWoPBKp3tn2DY0c5vhp/BY7TIv9p0idrUNlAfnS3uUW6J3uqsaZM8OnPsQAyRfLr3g1rd2rTYdZAjB0WyGadzphHuBQfqhd+I39jX6p5OObCjIspaWQ7NQQ4OitwEm7hQRMYvfv/gx/vM2UIS7HFLtFG7tUUd1C67Udqdn63HVYpoufmuebtuR/kXlS9cu3w7H3zBTWB/laOxlqDNlABbu37VUWw9bn+lIdrBnxljbMPpno/6w7Hj/B383E4GEjzq9k+/p78fan0xNyGwEGgAAAAASUVORK5CYII=" />
cursor:pointer does not work on input file just because of the default button. No special reason here. You need to remove its appearance via this code, pay attention with font-size:0.
It works perfectly on Chrome, Firefox and IE for me. I hope, this will also help you.