I'm trying to remove the pressed effect from button on IE9. In all other browsers I have no problems.
Please take a look to the code
HTML
<button class="fancy">howdy!</button>
CSS
.fancy {
width: 60px;
height: 30px;
position: relative;
top: 0px;
margin: 0;
padding: 0px;
display: block;
border: none;
padding: 0;
color: #FFF;
font-size: 11px;
background: green;
outline: none;
overflow: hidden;
line-height: 11px;
}
.fancy:active,.fancy:focus
{
padding:0px;
margin:0px;
border: none;
outline:none;
text-indent: 0;
line-height: 11px;
}
Working demo http://jsfiddle.net/MDfvE/
As you can see, when you click the button on IE9 you will see that the text is moved to the right and bottom. I want to remove that.
Any clue? Thank you!
IE only recognizes the :active pseudo class when the element is an anchor.
http://msdn.microsoft.com/en-us/library/cc848864%28v=VS.85%29.aspx
Try changing the button element to an anchor tag and adjust the styling to recreate the look you had for your button.
It's a browser behaviour, a simple solution is to use a link tag instead of button (if its triggering a javascript function).
<img src="myimg"/>
If you still want to use the <button>, I've found that there are some characteristics on each browser (in a simple debug):
Chrome adds outline and padding
Firefox adds a whole lot of stuff with the standart button border
IE messes with the inner text position
So to fix them, you have to manipulate the pseudo selectors for the button behaviour. And for IE, a good solution is to envolve your text on a element, and make it relative positioned. Like so:
<button type="button" class="button"><span>Buttom or Image</span></button>
<style>
button,
button:focus,
button:active{
border:1px solid black;
background:none;
outline:none;
padding:0;
}
button span{
position: relative;
}
</style>
Pen
Related
I have this code:
.button {
height: 50px;
width: 160px;
font-size: 16px;
background: #eee;
border-radius: 5px;
border: none;
}
<button type="button" class="button">Submit</button>
When I click into this button (button focus, active), the text will flicker (move to down a few point) on IE, Firefox browsers. How to fix it with CSS? Hope you help me. Thanks
Demo: http://jsfiddle.net/WorkWe/ht6pvoqz/1/
Wrap your text in span and give it position: absolute and it won't flick anymore!
<button type="button" class="button"><span>Submit</span></button>
.button {
height: 50px;
width: 160px;
background: #eee;
border-radius: 5px;
border: none;
margin: 0;
padding: 0;
position: relative;
}
span {
position: absolute;
top: 5px;
left: 5px;
}
Some sort of mini-reset does the job on FF, but using extra span inside the button resolves issue on IE. Looks like we need to start considering usage of "a" tags instead of buttons:
HTML:
<button name="button" class="button"><span>Submit</span></button>
CSS:
.button {
height: 50px;
width: 160px;
font-size: 16px;
background: #eee;
border-radius: 5px;
border: none;
}
button:active,
button:focus,
button:hover {
margin:0;
padding:0;
}
JSFiddle for that.
Hope this helps
UPDATE: There is a way of dealing with IE issue - based on this SO answer (#alicarn answer), but problem with this method is it creates opposite flickering on chrome. So I guess you need to pick up your poison in this case.
This is default behavior of IE. This can't be fixed I think.
Instead of using button tag, I suggest to use anchor tag.
I have a styled sentence with dynamic text. Sometimes the text is too long, and pushes the anchor at the end outside its box. I want the text to wrap after the span.price-difference, but the anchor button to be positioned against the right side of the p.
I added an :after pseudo element to .price-difference. I've got it set content: '' and display: block. Works in FF, Chrome, IE (including IE8, which I have to support), but not Safari.
There is an easy answer, wrapping the text following .price-difference with another span, and set it to block, but changing the HTML is a hassle, requiring a backend developer to make changes to a JSP file, and I'm hoping to avoid that. Looking for a CSS only solution, if it exists.
<p class="upsell"> Upgrade To
<span class="stateroom-upgrade"> Concierge Class </span>
for an additional
<span class="price-difference">$7.14 USD </span>
per person per day
<span>View Upgrades</span>
</p>
The CSS
.upsell {
background: none repeat scroll 0px 0px #FAFAFA;
border-top: 2px dashed #E8E8E8;
color: #666;
display: block;
font-size: 11.5px;
font-weight: 600;
margin: auto 19px 5px;
padding: 8px 0px 8px 8px;
position: relative;
text-transform: none;
white-space: nowrap;
width: 560px;
}
.upsell .price-difference {
color: #0C82C4;
font-size: 15px;
font-weight: 700;
margin-left: 5px;
display: inline-block;
}
.stateroom .upsell .price-difference::after {
content: "";
display: block;
}
.upsell .ccButtonNew {
position: absolute;
right: 10px;
top: 17px;
}
The p element has white-space: nowrap set on it, but when I turn it off, the problem doesn't go away.
I think it's related to the following link, but my situation isn't the same. In that question, the asker put a block level element div inside a p, which only takes inline elements. I have an inline element, span, inside the p. This should work.
:after pseudo-element working in FF, but not Safari or Chrome
.stateroom .upsell .price-difference:after {
content: "";
display: block;
position: absolute;
width: 30px;
border-top: 1px solid #000; /* placeholder border */
}
try adding a position to the after's css rules. i had a similar situation in which the after pseudo wouldn't display in old versions of safari but worked properly in all other browsers. I fixed adding a position rule to the css.
Hope this hepls.
I am currently trying to wrap my brain around a problem, but i can't seem to grasp it.
In an unordered list for a navigation, i want to add an icon before every list item via css before pseudo class.
<ul class="list">
<li class="list-item">one</li>
<li class="list-item">two</li>
<li class="list-item">three</li>
<li class="list-item">four</li>
</ul>
My first thought was to give both elements (the icon and the a-tag) display:inline-block and align the icon with vertical-align:middle. With just little adjustments (margin-bottom), this works well in chrome:
.list-item {
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
height:1.5em;
overflow:hidden;
}
.list-item:before {
display: inline-block;
content: '';
vertical-align: middle;
background-color: red;
width: 5px;
height: 7px;
margin: 0 4px 0.125em 5px;
}
.list-item a {
display: inline-block;
overflow: hidden;
line-height: 1.5;
height:1.5em;
}
But when you load the page in firefox, the icon is way off at the bottom. http://jsfiddle.net/pUhPB/4/
I tried what seems to me every possible combination of display, vertical-align and margin-values to get it right in both browsers, and finally, if i give the a-tag vertical-align:middle and the icon vertical-align:baseline, it seems to work:
.list-item {
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
height:1.5em;
overflow:hidden;
}
.list-item:before {
display: inline-block;
content: '';
vertical-align: baseline;
background-color: red;
width: 5px;
height: 7px;
margin: 0 4px 0 5px;
}
.list-item a {
display: inline-block;
vertical-align:middle;
overflow: hidden;
line-height: 1.5;
height:1.5em;
}
http://jsfiddle.net/L3N3f/
But i just don't get it. Why does the first version not work? To me, it seems way more logical than the version that actually works. And which one of both browsers doesn't render the elements the right way?
I already found a solution that seems to work for me, so it's not a very urgent question, but it bugs me that i don't understand the core of my problem (and the solution), so i would be really thankful if someone could enlighten me on this.
thanks
According to web standard only inline elements can be "vertically aligned" in spite that some browsers, like chrome, still align them. Note that it is the element that is aligned and not its contents!
So if you apply it to a <span> the <span> becomes aligned with the surrounding text and not whatever is inside it within in.
ispo lorem <span> text </span> due carpe diem
adding span {vertical-align:top; border: 1px solid black} makes <span> text </span> (whole box) become higher than the rest of the text and not push the text to the ceiling of the box <span>.
The core issue here is that Firefox is very literal when it comes to web standard whilst Chrome adds a few implicit features like this one.
For more details click here.
EDIT: apparently if you use vertical-align:top ONLY on the <a> it also works.
Your problem is that per spec setting overflow:hidden changes the baseline position of an inline-block. Firefox implements what the spec says. Chrome does not.
So as long as your .list-item a is baseline-aligned, it will render differently in the two browsers. The only way to make the renderings the same is to make sure you don't baseline-align any inline-blocks with non-visible overflow, which is what your second code paste does (it's using vertical-align: middle on the inline-block).
Try this: http://jsfiddle.net/pUhPB/6/
The first thing I do in these situations is to open the code in both browsers. Then I start removing CSS code until I can see the problem. Removing the margins and the vertical-align, both browsers have rendered the code differently. So I keep removing code until they're both the same. Once they were the same in both browsers, I then changed what I could to get the desired effect.
Here's the new CSS:
.list-item:before
{
content: '';
background-color: red;
width: 5px;
height: 7px;
margin: 5px 4px 0 5px;
float:left;
}
I added a CSS button like this:
http://pastebin.com/UZCgmqSN
Why can't I use simple HTML code?..
The link href gives the button a blue border + text color, and whenever I removed <A> from it, it still stays the same.
I want the whole button to be one link, not like you need to hover on the text to go to that link.
Basically I don't want the a style affect my button(s).
solution could be: disable Link styling on specify divs
thank you.
Add a padding to the this will make the area around the text also clickable.
Also, apply the following style:
a {
text-decoration:none;
}
a div {
background:#444;
color:#fff;
border:1px solid #333;
text-align:center;
padding:5px;
width:100px;
}
This should do it.
check this out : http://jsfiddle.net/yFZ4y/
EDIT : Using a div or ANY block level element inside an INLINE element (like a) is bad practice. Please use a span instead.
here is an example of a link/button http://jsfiddle.net/CRjrz/
<div>
link text
</div>
a
{
display: block;
width: 100px;
height: 35px;
text-decoration: none;
color: black;
text-align: center;
line-height: 35px;
}
div
{
border: solid 1px black;
width: 100px;
height: 35px;
}
I need to make a button look like a link using CSS. The changes are done but when I click on it, it shows as if it's pushed as in a button. Any idea how to remove that, so that the button works as a link even when clicked?
button {
background: none!important;
border: none;
padding: 0!important;
/*optional*/
font-family: arial, sans-serif;
/*input has OS specific font-family*/
color: #069;
text-decoration: underline;
cursor: pointer;
}
<button> your button that looks like a link</button>
If you don't mind using twitter bootstrap I suggest you simply use the link class.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>
The code of the accepted answer works for most cases, but to get a button that really behaves like a link you need a bit more code. It is especially tricky to get the styling of focused buttons right on Firefox (Mozilla).
The following CSS ensures that anchors and buttons have the same CSS properties and behave the same on all common browsers:
button {
align-items: normal;
background-color: rgba(0,0,0,0);
border-color: rgb(0, 0, 238);
border-style: none;
box-sizing: content-box;
color: rgb(0, 0, 238);
cursor: pointer;
display: inline;
font: inherit;
height: auto;
padding: 0;
perspective-origin: 0 0;
text-align: start;
text-decoration: underline;
transform-origin: 0 0;
width: auto;
-moz-appearance: none;
-webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height */
-webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}
/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */
#supports (-moz-appearance:none) { /* Mozilla-only */
button::-moz-focus-inner { /* reset any predefined properties */
border: none;
padding: 0;
}
button:focus { /* add outline to focus pseudo-class */
outline-style: dotted;
outline-width: 1px;
}
}
The example above only modifies button elements to improve readability, but it can easily be extended to modify input[type="button"], input[type="submit"] and input[type="reset"] elements as well. You could also use a class, if you want to make only certain buttons look like anchors.
See this JSFiddle for a live-demo.
Please also note that this applies the default anchor-styling to buttons (e.g. blue text-color). So if you want to change the text-color or anything else of anchors & buttons, you should do this after the CSS above.
The original code (see snippet) in this answer was completely different and incomplete.
/* Obsolete code! Please use the code of the updated answer. */
input[type="button"], input[type="button"]:focus, input[type="button"]:active,
button, button:focus, button:active {
/* Remove all decorations to look like normal text */
background: none;
border: none;
display: inline;
font: inherit;
margin: 0;
padding: 0;
outline: none;
outline-offset: 0;
/* Additional styles to look like a link */
color: blue;
cursor: pointer;
text-decoration: underline;
}
/* Remove extra space inside buttons in Firefox */
input[type="button"]::-moz-focus-inner,
button::-moz-focus-inner {
border: none;
padding: 0;
}
try using the css pseudoclass :focus
input[type="button"], input[type="button"]:focus {
/* your style goes here */
}
edit as for links and onclick events use (you shouldn’t use inline javascript eventhandlers, but for the sake of simplicity i will use them here):
watch and learn
with this.href you can even access the target of the link in your function. return false will just prevent browsers from following the link when clicked.
if javascript is disabled the link will work as a normal link and just load some/page.php—if you want your link to be dead when js is disabled use href="#"
You can't style buttons as links reliably throughout browsers. I've tried it, but there's always some weird padding, margin or font issues in some browser. Either live with letting the button look like a button, or use onClick and preventDefault on a link.
You can achieve this using simple css as shown in below example
button {
overflow: visible;
width: auto;
}
button.link {
font-family: "Verdana" sans-serif;
font-size: 1em;
text-align: left;
color: blue;
background: none;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
-moz-user-select: text;
/* override all your button styles here if there are any others */
}
button.link span {
text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
color: black;
}
<button type="submit" class="link"><span>Button as Link</span></button>
I think this is very easy to do with very few lines. here is my solution
.buttonToLink{
background: none;
border: none;
color: red
}
.buttonToLink:hover{
background: none;
text-decoration: underline;
}
<button class="buttonToLink">A simple link button</button>
button {
text-decoration: underline;
cursor: pointer;
}
<button onClick="javascript:window.location.href='link'">Domain</button>