Moz padding behaving differently on buttons - css

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;}
}

Related

IE9: issue in a link when use filter

My problem:I have a link with display block. Everything goes well on IE9. But when I add a filter in order to obtain a gradient, the cursor only has the hand on the border and on the text, not on the rest of the box.
I have test my code in jsfiddle
May I have done something wrong ?
My code will work on all browsers and versions. I just have delete code for other browser in order to be much clear.
filter works "better" for IE8.
But for IE9 i would raccomend SVG gradients.
Here you can find Microsoft's official SVG gradient background maker
You'll obtain something like this:
/* SVG as background image (IE9/Chrome/Safari/Opera) */
background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc);
And you can add it to your rule this way:
a {
padding: 3px 5px;
margin:5px;
display:block;
border:1px solid #000;
background:#FAFAFA; /* fallback for browsers not supporting gradients */
background-image:url(data:image/svg+xml;base64,PHN2ZyBetcetcetc); /* FF13, Opera12, IE9 */
background:linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent; /* W3C */
}
Then, with conditional comments you can target IE8 again:
.ie8 a {
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA'));
}
Anyway, i suggest you to google for "Visual CSS tool" for a complete cross-browser code.
You're using only -moz-linear-gradient and it works just for older version of Firefox Mozilla.
For IE9 you can also use CSS3: linear-gradient: { ... }
For older versions of Chrome and Safari you should use -webkit-linear-gradient and for Opera -o-linear-gradient and -ms- for IE (but not everything works fine with it).
One solution is to wrap your a in another div and apply your background properties on it instead of on the a;
<div class = "container">Glee is awesome!</div>
CSS:
.container {
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FAFAFA',EndColorStr='#EAEAEA'));
background: -moz-linear-gradient(#FAFAFA, #EAEAEA) repeat scroll 0 0 transparent;
border: 1px solid #000;
padding: 3px 5px;
margin: 5px;
}
a {
display: block;
}
Here's a little demo: little link.

Select Arrow missing on Safari Windows

I added some styling to selects using the following class:
.form-fields select {
height: 24px;
background: url(/Images/ui/input-bg.jpg) #FFF repeat-x;
border: 1px solid #AAA;
}
This works in all browsers except it causes Safari on Windows to omit a drop down arrow.
If I comment out both background and border properties (and only both) the arrow is restored yet the height is ignored in all the other browsers.
I'd like to keep this styling as Windows Safari is a minority but am curious to know if there is a solution that works for all.
Place this in your css
*{
-webkit-appearance: menulist;
}
I was having the same bug on iPhone iOS. I removed a background-color:transparent; style and it fixed the missing select arrow browser UI.
I have tried above code but it was not working for UI which was created usingh jquery.min.css. I have tried below css and it resolved my issue.I am targeting ui-icon-carat-d which shown dropdown arrow
.ui-icon-carat-d:after{
background: url("https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-2/16/5001-128.png") 95% 32% !important;
background-repeat: no-repeat !important;
background-color: #fff !important;
}

Load sections of a css file depending on the browser

There are buttons on my website that look overly skinny in Chrome compared to Firefox. The button's HTML looks like: <button name="shutdown" type="submit" value="df" class="boton"> Press </button>
My CSS attempt looks like:
.boton {
font-size: 17px;
color: #000;
background: #ee3333;
background: rgba(225, 50, 50, 0.6) !important;
font-family: lucida console;
border: 1px solid #FF4444;
padding: 2px;
-moz-border-radius: 7px;
border-radius: 7px;
cursor:pointer;
}
.chrome .boton
{
padding: 5px !important;
}
I'm not sure if I'm doing this right. ".boton" does indeed change the style of the button, but the padding doesn't change in Chrome. What's wrong here?
The reason that the padding isn't applying to the element is due to the fact that there is no chrome class assigned to any element. There are various hacks around certain Vendor-Specific styles, see this article, but no browser applies a class of .chrome or .moz or anything like that.
However, to achieve more "horizontal" padding, you can use the -webkit-padding-start(padding-left) and the -webkit-padding-end(padding-right). Currently I do not believe there is full padding, or vertical padding for these yet. Be sure when using these to write the -webkit-padding-start, or whichever rule you use, after your padding rule. Otherwise the latter will overwrite the former and both will be lost.
Unless you've also added some browser sniffing that adds the class .chrome etc. to the body that class has no effect.
On the other hand the box model of Firefox and Chrome is not radically different, but the defaults for padding, border, margins etc. may be different. Just explicitly set those values and they should most likely render the same (give or take a few pixels because of different rounding errors). You should not need to add custom css for each browser (but if you use experimental css features like -moz-border-radius and -webkit-border-radius with vendor prefixes you should use all of them in at the same time; the others will ignore the unknown properties).
The different versions of IE (Internet Explorer) do have a radically different box models, and if you cannot get some version of IE to render something correctly with the standard css you should use conditional comments to include IE specific css overrides after the main css file.

What is the correct "-moz-appearance" value to hide dropdown arrow of a <select> element

I'm trying to style the dropdown arrow of a <select> element with CSS only , it works perfectly in Chrome/Safari:
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url('./select-arrow1.png') ;
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
margin: 0;
padding-top: 2px;
padding-bottom: 2px;
width: 200px;
}
Which renders beautifully as seen here
By that logic, the only thing I had to do to make it work in Firefox was to add all -webkit-* stuff as -moz-* :
-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;
It works for 99%, the only problem is that the default dropdown arrow doesn't go away, and stays on top of the background image as seen here
It looks like -moz-appearance: button; does not work for a <select> element. Also -moz-appearance: none; has no effect to remove the default dropdown arrow.
So what is the correct value for -moz-appearance to remove the default dropdown arrow?
Updates:
December 11, 2014: Stop inventing new hacks. After 4 and a half years, -moz-appearance:none is starting to work since Firefox 35. Although moz-appearance:button is still broken, you don't need to use it anyway. Here is a very basic working example.
April 28, 2014: The mentioned css hack worked for a couple of months but since the begining of April 2014 this bug is creeping back into Firefox 31.0.a1 Nightly on all platforms.
Update: this was fixed in Firefox v35. See the full gist for details.
== how to hide the select arrow in Firefox ==
Just figured out how to do it. The trick is to use a mix of -prefix-appearance, text-indent and text-overflow. It is pure CSS and requires no extra markup.
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Long story short, by pushing it a tiny bit to the right, the overflow gets rid of the arrow. Pretty neat, huh?
More details on this gist I just wrote. Tested on Ubuntu, Mac and Windows, all with recent Firefox versions.
This is it guys! FIXED!
Wait and see: https://bugzilla.mozilla.org/show_bug.cgi?id=649849
or workaround
For those wondering:
https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59
First, because the bug has a lot of hostile spam in it, it creates a hostile workplace for anyone who gets assigned to this.
Secondly, the person who has the ability to do this (which includes rewriting ) has been allocated to another project (b2g) for the time being and wont have time until that project get nearer to completion.
Third, even when that person has the time again, there is no guarantee that this will be a priority because, despite webkit having this, it breaks the spec for how is supposed to work (This is what I was told, I do not personally know the spec)
Now see https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)
The page no longer exists and the bug hasn't be fixed but an acceptable workaround came from João Cunha, you guys can thank him for now!
To get rid of the default dropdown arrow use:
-moz-appearance: window;
Try putting opacity:0; your select element will be invisible but the options will be visible when you click on it.
It is worth trying these two options below while we're still waiting for the fix in Firefox 35:
select {
-moz-appearance: scrollbartrack-vertical;
}
Or
select {
-moz-appearance: treeview;
}
They will just hide any arrow background image you have put in to custom style your select element. So you get a bog-standard browser arrow instead of a horrible combination of both the browser arrow and your own custom arrow.
In Mac OS X, -moz-appearance: window; will remove the arrow accrding to the MDN documentation appearance (-moz-appearance, -webkit-appearance).
It was tested on Firefox 13 on Mac OS X v10.8.2 (Mountain Lion). Also see: 649849 - Make -moz-appearance:none on a combobox remove the dropdown button.
While you can't yet get Firefox to remove the dropdown arrow (see MatTheCat's post), you can hide your "stylized" background image from showing in Firefox.
-moz-background-position: -9999px -9999px!important;
This will position it out of frame, leaving you with the default select box arrow – while keeping the stylized version in Webkit.
it is working when adding :
select { width:115% }

Why is the html select background-color black in Chrome when set to transparent?

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;
}

Resources