This CSS rule in bootstrap.min is causing a dotted outline to appear on the left and bottom edge of buttons in IE 11 (IMO it looks terrible, like some kind of graphics glitch), but it does not appear at all in Firefox or Chrome:
.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{
outline:thin dotted;
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px
}
Why is outline specified 3 times, and how is IE handling it differently than Chrome and Firefox?
By the time, you might get the solution for your question.
I have used below code to fix my IE10 & IE11 styling issues. These are the conditional styles for IE. This could be useful for future references.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
button:focus{
outline:1px dotted #ccc;
}
}
I just had to deal with this stuff :/
You have 2 different properties here: outline, and outline-offset.
For each property, the last value that a browser understands is what will be applied. So, for the property outline, Chrome and Firefox understand the value 5px auto -webkit-focus-ring-color;, which comes after the value thin dotted, so Chrome and Firefox apply the value 5px auto -webkit-focus-ring-color to the outline property. IE does not understand that value, so it applies the value thin dotted.
IE does not support outline-offset, which is why you see the outline on the left and bottom edge but not the rest. To get the outline to show all around, I added a margin.
Related
I know about:
#-moz-document url-prefix()
But how about the inverse? Specifically, I'm having an issue with some mobile devices adding a border radius to text input elements which I don't want. If I set border-radius: 0 Firefox renders it like this:
Which just looks terrible. I'd just like to be able to apply a rule to everything but not Firefox since it seems to be very picky about messing with form element styles.
Is this what you're looking for perhaps? I use this reset for webkit browsers that add that border-radius, this does not affect FF:
input[type="text"] {
-webkit-border-radius: 0; }
It looks the way I like in chrome and safari. but it looks very strange in firefox. It appears to be cut off.I wonder if there is better way of archiving the same results as in chrome and safari for this other than use an actual image of square box. Any ideas? Hacks?
http://jsfiddle.net/vf6gh/
.square {
border:1px solid #0C6DBE;
background-color:#4293D9;
padding:5px;
}
<img class="square"></img>
Firefox applies some CSS to broken <img> tags:
img:-moz-broken:before,
input:-moz-broken:before,
img:-moz-user-disabled:before,
input:-moz-user-disabled:before,
img:-moz-loading:before,
input:-moz-loading:before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken:before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled:before {
content: -moz-alt-content !important;
unicode-bidi: -moz-isolate;
}
If you're really planning to use <img> to simply show an square as you want, rethink it. Those tags were not made for this, and Firefox is a proof of this.
For knowledge: user-agent CSS marked with !important cannot be overriden.
On all my buttons the padding is behaving differently in firefox. From research I know this is because FF has some strange settings in the default stylesheet but I have added the general fix into my stylesheet. That's fine and I can live with that apart from one button will not fit into the toolbar in firefox because the padding makes it too big.
Jsfiddle here.
Usual fix;
input[type=button]::-moz-focus-inner{padding:0; border:0;}
The css for the button with a few things removed;
.buttonBlue {background-color:#008abd; border-radius:0.2em;
font-family:inherit;
color:white; border: 1px solid black;
cursor:pointer;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008abd', endColorstr='#036b91');
background: -webkit-gradient(linear, left top, left bottom, from(#008abd), to(#036b91));
background: -moz-linear-gradient(top, #008abd, #036b91);
}
If you set an element's appearance attribute to none, any well-behaved browser will drop its gui flavor.
https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance
For buttons, the default value for appearance is "button". Setting it to "none" explicitely should override the browser's built-in platform-native styling, including weird padding.
Firefox is not the only browser reacting to this attribute: Safari and Chrome listen to the -webkit-appearance variation, and Opera listens to the -o-appearance variation. I don't know about MSIE9 or 10.
I have found a fix by targeting moz with a css prefix. It's not ideal but it works and I need to move onto other things rather than worrying about a button! Here it is anyway.
#-moz-document url-prefix(){
.buttonBlue
{ padding:0px 7px 0px 4px !important;}
}
Although it is not good practice, I am looking for a CSS hack to target Palm webOS.
The problem is that Safari 3+ is awesome, and I can do some things like gradient background animations on text, but only in Safari.
Right now I use #media screen and (-webkit-min-device-pixel-ratio:0) {} and it works like a charm, no Opera, Firefox, or whatever, because if I set the background to the image as I do in Safari they will all be ruined.
But Palm's browser is based on webkit, and it uses the rules inside, and Palm's browser doesn't support text backgrounds so all I get is the image moving, no text.
I would prefer a CSS hack, but if need be a Javascript one will do.
Easiest way I've ever foundof targeting browsers is the CSS Browser Selector plugin. You have one CSS file and tell it to target browsers with a selector like
.ie .myelement div
{
border: 1px #ccc solid;
}
.webkit .myelement div
{
border: 1px #f0f dashed;
}
Works great for me!
Hope it helps you out.
I have the following drop down menu and the background looks black in Chrome but white on Firefox/IE/Safari across Windows/Linux/Mac. I'm using the latest versions of all those browsers.
<style>
select {
background-color: transparent;
background-image: url(http://sstatic.net/so/img/logo.png);
}
</style>
<select>
<option>Serverfault</option>
<option>Stackoverflow</option>
<option>Superuser</option>
</select>
Does anyone know how I can style the above so that Chrome shows the background as white when the color is set to transparent like in the other browsers?
EDIT:
My goal is to display an image in the background of select. The image shows up properly in every browser except Chrome.
According to this and this, it is a bug in Chrome that is supposed to be fixed.
The bug appears in version 2.0. I just tested it in 3.0-beta, and it's fixed.
Why are you using background-color: transparent; for "select"? If you remove that chrome works.
What is the effect you are after? Maybe some demo?
This answer https://stackoverflow.com/a/5806434/964227 that I found in another question just like this worked perfectly for me.
Apparently Chrome doesn't accept an image as a select background. So, in order for the color to work, you have to remove the image and then set the color. I'll just copy and paste the other answer here.
select {
background-image: none; /* remove the value that chrome dose not use */
background-color: #333; /* set the value it does */
border-radius: 4px; /* make it look kinda like the background image */
border: 1px solid #888;
}