In another question I asked about alignment this was given to me to answer the question about firefox being a twit. It worked but it has left a sour taste in my mouth and I'll explain why.
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Opera (10 for this example), Firefox (3 for this example) and Internet Explorer (7 for this example) all display an input[type="submit"] button differently. This focus-inner property is default 0 on Opera 10, something like 5px for firefox and must be 6px for Internet explorer.
How can I "blanket" reset them all to 0? Is there an standard CSS call that will not only do the above but will set this hidden property for IE too?
The reason why this is happening is simple: because all these browsers are made by different people. Try looking at your buttons from Safari, for example. There is no such thing as one css rule that will force all buttons in all major browsers look the same.
Well, actually you can achieve pixel-perfection, if you treat every one of them personally, like this. And you can always use <input type="image">, that will do the trick for sure.
Related
In Safari, Chrome, and Opera a <select> box with a size of 20px looks like this:
But in Firefox, however, it looks like this:
Does anyone know why this is happening or how to fix it? Thanks!
EDIT: Here's a Fiddle so you can test it yourself.
EDIT2: This appears the be a Mac OS X problem, as someone with Windows did not see it.
I would suggest using em it will give you more standard across all browsers. 20px = 1.25em
Here are other options to chose from
You can turn off the default styling for select boxes in webkit and Firefox with these lines:
select {
-webkit-appearance: none;
-moz-appearance: none;
}
However, it's a finicky and non-standard solution. The font-size will change, but you'll lose all the other stuff, too, including the arrows.
Select boxes are notoriously difficult to style. There are some great third-party libraries like Selectize, Chosen, or select2, which actually replace the select element with a style-able DOM tree and use events to manipulate the select behind the scenes. You may find these easier to use.
I have a dropdown list in my application whereby in order to center it I must add padding-top 10px while on Mozilla Firefox but on google chrome it does not need the padding. How can I target the select list to set this browser specific. I was hoping I could have done something like the following:
select {
-moz-padding-top: 10px;
-webkit-padding-top: 0px;
}
Any ideas of how I could get round this? Fiddle of problem shown below, if you check this in Chrome and then Firefox, I want it so that text is always in middle
http://jsfiddle.net/uHDa6/
Note: the first part of this answer is now obsolete, as this feature has been removed from Firefox. For the real answer, read on from "However".
The answer to your question is: yes, it's possible to put Mozilla-specific CSS in a stylesheet. (Not in an inline style attribute.)
In this case, you would write
#-moz-document url-prefix() {
select {padding-top:10px;}
}
which is simply the Mozilla-prefixed version of the #document rule, that is not recognised by other browsers.
However, the actual solution to the problem of the mismatched text position is to not set the height, but only the padding of the select. No hacks.
style="font-size: 14px; padding: 11px 0 11px 5px;"
That has the desired effect in all browsers. See new fiddle.
Context
Firefox 14 (and 13); specific CSS styles being ignored under certain conditions
The Problem
Using the following CSS:
*
{
outline:none;
-moz-outline:none;
-moz-user-focus:ignore;
}
JSFiddle
Firefox 14 (and 13) ignore these styles when using Tab to switch between select elements. Clicking these elements after using Tab still displays the outline.
Notes
Specifically styling select instead of * has no effect.
This only occurs with select elements.
The Question
Is this a bug or intended behavior?
Are there any other CSS styles that need to be used to prevent the outline from appearing indefinitely?
This is a known bug which has sparked several Stackoverflow discussions. From what I have read, Mozilla have deemed that CSS is the wrong place to handle this element behaviour, and have opted instead to handle it by other means. At this time the only solution is to either use tabindex="-1" or to set the element to display as something else, and restyle the look and feel of a droplist — but be warned, this opens a can of worms in itself.
If you do opt to do this, I have had success in the past with the following kludge:
select {
appearance: normal;
-webkit-appearance: none;
-moz-appearance: radio-container; /* renders text within select, without arrow chrome */
}
Appearance tells the browser to display the element as something else, but this is inconsistent from vendor to vendor. appearance: normal; is the spec, whilst webkit replaces normal with none. -moz-appearance: radio-container; has been the only way I have found to display the text within the chosen select option, whilst removing the arrow chrome for a fully customised droplist. However, try experimenting with the available options until you find something that works and doesn't add the focus ring you wish to customise. Internet Explorer will require further kludge to bend the select to your needs. Entirely possible, but out of scope for this question and answer.
So far the only way I've found to overcome it is to set the tabindex='-1' (see fiddle) which, of course, takes the element completely out of the tab selection chain. That would not be good for user interface, and my guess is not exactly what you desire (I assume you want to keep tab accessibility but just do your own styling for highlighting).
Another solution is to set outline: none and set a box-shadow. For example:
.my_elements:focus
{
outline: none;
box-shadow: 0 0 3px 0px red;
}
Use
*:-moz-focusring {
outline: 2px solid blue;
}
will give you similiar to chrome
Also, if using mac, you also need to enable this:
How to allow keyboard focus of links in Firefox?
Just trying to give the main content div on a site a border on the left and right side of the div. Rather than have separate divs for each border, I thought to use the border-left-image capability in CSS3 to make it happen. My code is as follows:
#content {
background-color: #7FC3F4;
height: 100%;
width: 900px;
border-left-width: 30px;
border-left-image: url(../images/border_left_gradient.png);
border-right-width: 30px;
border-right-image: url(../images/border_right_gradient.png);
margin-right: 10%;
margin-left: 10%;
}
Of all the Google searches I've done, I have to yet to come up with an explanation as to why this code isn't valid. Some results return numeric values to be placed after the url, however regardless of what combination of numbers I try, no dice.
Thoughts?
border-image is now supported in all the major browsers (2014-05-22)
Demo with a single border-left-image
Demo with different left and right images.
The demos now need a minimum of Chrome 15, Safari 6, Firefox 15, IE 11 or Opera 15.
It is not actually possible to do this with separate image files, but you can slice a single image on the left and right. See the border-image page on MDN which shows some good examples or CSS Tricks for a comprehensive summary of how the other slicing options work.
Note: if you need earlier browser support please ask as a previous version of my answer did work with Chrome 12, Safari 5.0.3, Firefox 4 and Opera 10 but I have updated it now that new browsers support prefix-free CSS3.
Edit: Firefox now requires an additional property setting - border-style: solid (see CSS - New Firefox-release doesn't show Border-Image anymore)
Good solution : Chrome AND Firefox compatibility :
http://jsfiddle.net/Yas34/954/
missing border-style: solid to current "good answer"
For one your url is bogus (..images?). for a second have you checked your browser supports the property? last I checked, which wasn't that long ago, nobody supported it (well maybe webkit nightlies).
background-color:transparent doesnt work on SELECTs in browsers other than FireFox.
So how I specify background-color:transparent for FF alone and background-color:#something for others ?
Did you try to apply the cross-browser setting first and the firefox specific setting afterwards?
select {
background-color: #fff;
background-color: transparent;
}
Find a simple example that is also working fine in Internet Explorer 8 and in Chrome 4 here: http://jsfiddle.net/b6hWu/
Check out this page:
CSS Browser selector.
I use it and works wonders for selecting browsers right in the Stylesheet.
Hope it helps :)