I am using CSS to make input button look like a link.
I've styled it like this:
input#linkLike {
background: none;
border: none;
cursor: pointer;
margin: 0;
padding: 0;
text-decoration: none;
font-weight: bold;
font-size: 12px;
display: inline;
vertical-align: baseline;
}
This works fine in Chrome, but there is a whitespace around button in Ff and an even larger whitespace in IE.
http://jsfiddle.net/S4nF9/5/
Where this whitespace comes from, and how can I remove it?
According to this page,
Firefox uses pseudo-elements within the button elements themselves for drawing. As you can see above, this means that padding of 2px is added to the top and bottom of this inner pseudo-element, therefore it may be removed as follows:
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
So that's Firefox taken care of. See new fiddle.
(Note: the article mentions top and bottom, but it also works for the left and right padding.)
I don't have IE here, so I can't test that now, sorry.
You could give it a width value.
Related
I need to, but cannot, remove the white dotted border around the text of a focused button.
After reading articles about "remove white border (especially Dotted border around link? and links inside), I have try several solutions of disabling outline like "outline: 0; or outline: none;, using or not !important.
But nothing does remove the dotted white border around the text of a focused button.
Here is my simplest test page code. I cannot show a screenshot, because it removes the focus from the button.
button {
font-size: 87.5%;
font-family: "ubuntu", Sans-serif;
padding: 0 16px;
min-width: 64px;
height: 36px;
cursor: pointer;
background-color: royalblue;
color: white;
border: 0;
}
button:focus,
button:active {
outline: none;
outline: 0;
outline: none !important;
outline: 0 !important;
}
<button type="button">TEST</button>
Using Firefox 67.0.3 on Ubuntu 18.04 (Bionic Beaver), this page still shows a dotted white border around focused button text, which I'd like to remove (I'll show the focus with a method of my own).
These styles are declared at the UA level, so each browser has their own implementation (and in Firefox case, pseudo elements for targeting them).
In Firefox, you can use the ::-moz-focus-inner pseudo element:
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: none;
}
You need to add setback for different browsers, for example:
button:focus,
button:active {
-moz-outline: 0;
-ms-outline:0;
-o-outline: 0;
-webkit-outline: 0;
}
These are the vendor-prefixed properties offered by the relevant rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer). Typically they're used to implement new, or proprietary CSS features, prior to final clarification/definition by the W3.
Just set border: 0 , I have updated your code try this it will work!
<input type="button" value="text">
And in style tag just use this:-
input[type="button"]::-moz-focus-inner {
border: 0
}
a::-moz-focus-inner did not work for me in a situation where a React Router redirect was inexplainably causing focus borders. The selector itself did not activate.
Temporarily solved with (but not happy with):
a::-moz-focusring {
outline: none;
}
As you can see below, both Gecko and Blink performs an inconsistent height calculation for different inline-block elements, even though they all have the same css class. It seems like (*pause*) Trident is the only layout engine to get it right.
Did I forget to (re)set a property?
Furthermore, as you can see in this fiddle, if I change the padding from .3em to 1em Blink renders as expected. All elements gets the same height. Gecko is still "broken" though.
Does anyone know why this is happening and how to fix it?
<a> <button> <input> <span>
Gecko (Firefox v. 39.0)
Blink (Google Chrome v. 43.0.2357.132 m):
Trident (Internet Explorer v. 11.0.9600.17843):
body {
font: normal 15px arial;
padding: 1em;
}
.button {
background: #444444;
border: none;
box-sizing: content-box;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 1em;
height: auto;
line-height: normal;
margin: 0;
min-height: 1em;
padding: .3em;
text-decoration: none;
}
<a class="button" href="#">button</a><button class="button">button</button><input class="button" type="button" value="button" /><span class="button">button</span>
For Gecko (Firefox), it is due to borders on ::moz-focus-inner for form elements. If you notice, the form elements (input and button) are always ~2px wider and taller than other elements.
To solve it, always add this to your CSS (as part of your reset):
button::-moz-focus-inner{
border:0;
padding:0;
margin-top:-2px;
margin-bottom:-2px;
}
input::-moz-focus-inner{
border:0;
padding:0;
margin-top:-2px;
margin-bottom:-2px;
}
The negative margins are necessary so that the font displays "correctly" in the line-height. You may need to tweak the values to fit your line-height, but these values mostly work fine.
For Blink (Chrome), the elements are actually the same size, but the only issue is that they are "mis-aligned". You'll notice that sometimes the form elements display slightly lower than the others in an inline-block setting. To solve it, simply ensure that they all use the same vertical alignment, e.g.:
display: inline-block;
vertical-align: top;
It is always a good practice to declare the two properties above together - if you specify inline-block, always remember to specify the vertical alignment, in order to prevent misalignment.
I have <button> tag that have <i> element for displaying icon before text.
Here's the HTML
<button>
<i></i>
Login Using Facebook
</button>
the inside <i> is for displaying icon. Usually for other tag like <a>, I can just use :before pseudo-class to display icon, but it seems I can not do this for <button> tags.
and here's the CSS
button {
background: #4a6ea9;
color: #fff;
font-weight: bold;
line-height: 24px;
border: 1px solid #4a6ea9;
vertical-align: top;
}
button i {
background: url('http://icons.iconarchive.com/icons/danleech/simple/24/facebook-icon.png');
display: inline-block;
height: 24px;
width: 24px;
border-right: 1px dotted #fff;
}
Here's the fiddle
http://jsfiddle.net/petrabarus/SDh3M
The first initial display in my Chrome 28.0.1500.95 for Linux is like below
looks a little bit imbalance on the top and bottom (I'm not a designer nor I am a front-end engineer but I can just sense that it's quite imbalance), so I can simply add padding padding: 4px 6px 1px 6px; and then it looks more balanced like below in my Chrome (does it look different in yours?)
although, I don't know why the tag seems to add padding for the icon and the text. I set the icon's size to 24x24px and the text's line-height to 24px but the final height of the button is 32px. Is it possible to remove the padding?
And the biggest problem is in the Firefox (my version is 17.0.1 for Linux), the text seems to be displayed near to the bottom and it looks so imbalance
the padding addition to fix the Chrome's makes it even worse for the Firefox's.
Is it possible to make it look exactly the same in both browsers (and pretty much for other modern browsers like Opera and Safari)?
Try below css.
button i {
background: url("http://icons.iconarchive.com/icons/danleech/simple/24/facebook-icon.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
border-right: 1px dotted #FFFFFF;
display: inline-block;
float: left; /*New Edit*/
height: 24px;
width: 24px;
}
I trying to style background colour of hyperlink button "" and it works fine on Chrome, IE9, Firefox etc except IE 8. After further investigation i found that IE8 does not support css like button:not(.t-button) and it breaks
I wanted to know if i need to add a different css for IE 8 on a different file or i can update the syntax so it does not break for IE 8.
button:not(.t-button), .btn, a.btn, input[type="button"], input[type="submit"] {
display: inline-block;
padding: 0px 10px;
border: none;
margin: 6px 0 0;
height: 24px;
background-color: rgb(64,141,198);
font-family: 'Arial' ,sans-serif;
font-weight: bold;
font-size: 1em; /* 12 */
line-height: 2em;
color: rgb(255,255,255);
cursor: pointer;
box-shadow: none;
-webkit-appearance: none;
}
Here is the jsFiddle like http://jsfiddle.net/786wF/
Any help will be highly appreciated.
Regards
Bhavesh
First :not pseudo selector is NOT supported
More info :
http://kimblim.dk/css-tests/selectors/
http://caniuse.com/#search=%3Anot
Second, your html is NOT valid, putting div inside anchors
Replace your inner DIV with SPAN
IE will apreciate
Third : jsfiddle does NOT support IE < 8
your code structure is not valid in w3c validator because you put your div inside an element.try changing your div into other element like span.and do not use the:not pseudo element
I have a minor CSS problem, but I'm having trouble fixing it because I don't have any computer handy with IE7 installed...
In IE8, Chrome, FF, etc. I see this (correctly):
but IE7 gives me this:
the HTML code follows:
<div id="hub">
<div class="title highlight">Faster, Cheaper, Better</div>
<p>PNMS...
the relevant CSS code follows:
#hub {} /* literally nothing */
#hub div.title {
font-size: 4em;
font-style: italic;
font-variant: small-caps;
float: left;
margin: 5px 0px 20px 0px;
width: 940px; /* same as parent container */
}
.highlight { color: #ff6633;}
p {
text-indent: 30px;
font-size: 1.3em;
line-height: 1.1em;
letter-spacing: 1px;
margin: 5px;
}
Based on visitor traffic, I need my site to be compatible with IE7 (thankfully NOT IE6). But again, guessing blindly and then running browsershots.org is not a very efficient manner.
Can someone help? Thank you.
Found this somewhere, it may help:
CSS Double padding IE7 Fix
"Nothing is more annoying than finishing a web design, having it dispay just the way you like it in your standards compliant browser (cough download Firefox) only to remember to check it in IE and find it a garbled mess. Today I came across a rather annoying CSS bug in IE7. IE7 doubles the top padding on my navigation menu."
CSS Code
#nav {
clear: left;
padding: 16px 0 0 30px;
}
"And the fix…
Just add display: inline-block to the div with double padding. That’s it… I know, it’s ridiculous."
#nav {
clear: left;
display: inline-block;
padding: 16px 0 0 30px;
}
Another alternative is the parent of the Div which is not displaying correct add the margin: 0 in CSS for it.
Found it. The CSS body tag had a line-height: 18px;
For some reason known only to Microsoft, out of IE7, IE8, IE9, Firefox 3.5~6, and Chrome, only IE7 honored that instruction for a deeply nested div 400 lines further down the CSS sheet.