Stylesheet Not Being Read Correctly by Firefox - css

I'm having issues getting a stylesheet to display correctly in Firefox. It looks fine in Chrome and IE, however none of the styles seem to be applied in Firefox. Any suggestions?
Here's the link: http://www.bearfootmgmt.com

I checked style.css and there's a rather malformed rule here:
$toppart {
/* For WebKit (Safari, Google Chrome etc) */
/* For Mozilla/Gecko (Firefox etc) */
background: #fff) -moz-linear-gradient(top;
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#DAE4EE, endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 */
-ms-filter: "progidDXImageTransform.Microsoft.gradient(startColorstr#DAE4EE, endColorstr#FFFFFFFF)";
}
I ran your site through the CSS validator and it also found this misspelled selector:
#maincontent a:hovvr {
color:#ce0101;
text-decoration:underline;
}

Related

CSS is not working on mozilla firefox browser

Here is my CSS code:
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus::-moz-input-placeholder { color:transparent; }
My CSS is not working on Mozilla Firefox. Please let me know what is wrong in my code.
Thanks in advance.
According to CSS Tricks, the correct selector is:
::-moz-placeholder /* Firefox v19+ */
:-moz-placeholder /* Firefox v18- */
(Because it seems you're using CSS3 selectors, you can just use the former)
You probably got this confused because Webkit has its own vendor prefix of -webkit-input-, but Firefox only has -moz- (without the input).

Text rotation with google chrome using css

I gave definition for the class to display the text vertically, but it wont works with chrome!
Here with i attached the image
You might try the following CSS:
{
transform:rotate(7deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
I have a demo from a while back that may be of use to you also - http://codepen.io/lukeocom/pen/mHnvl

Targeting :nth-child(2) in IE7 / IE8

I have a question regarding the implementation of nth-child(2) in the following code. the code works well in Chrome/Firefox, and first child matrix transformations perform well in IE. However, I have run into an issue with the second child selector. While I'm aware that IE8 and below does not support nth child, I have attempted to utilize selectizr and jQuery to enable, however I believe it may not work in my situation (as these are server side jsp files and the targeted div is computed dynamically via Javascript).
I am searching for a workaround for this...i need only the second child targeted.
I did a search and came across this post: IE8 :nth-child and :before
Is there a way to apply this method of first child+ li a in my situation?
If not, does anybody have any suggestions for a method to target this div?
If it helps, this is being used to target the floating aggregates above the StackedArea Chart modified from the InfoVis toolkit.
thanks
.fte-chart-container .node > div > :first-child {
font-family: Arial;
color: black;
font-size: 11px;
width: 35px !important;
transform:rotate(-80deg);
-ms-transform:rotate(-80deg); /* IE 9 */
-moz-transform:rotate(-80deg); /* Firefox */
-webkit-transform:rotate(-80deg); /* Safari and Chrome */
-o-transform:rotate(-80deg); /* Opera */
-ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.17364817766693044,
M12=0.984807753012208, M21=-0.984807753012208, M22=0.17364817766693044,
SizingMethod='auto expand'); /* For IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.17364817766693044,
M12=0.984807753012208,
M21=-0.984807753012208,
M22=0.17364817766693044,
SizingMethod='auto expand'); /* IE 6 and 7 */
}
.fte-chart-container .node > div > :nth-child(2) {
font-family: Arial;
color: black;
font-size: 10px;
transform:rotate(-60deg);
-ms-transform:rotate(-60deg); /* IE 9 */
-moz-transform:rotate(-60deg); /* Firefox */
-webkit-transform:rotate(-60deg); /* Safari and Chrome */
-o-transform:rotate(-60deg); /* Opera */
-ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.4999999999999997,
M12=0.8660254037844388, M21=-0.8660254037844388, M22=0.4999999999999997,
SizingMethod='auto expand'); /* For IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.4999999999999997,
M12=0.8660254037844388,
M21=-0.8660254037844388,
M22=0.4999999999999997,
SizingMethod='auto expand'); /* IE 6 and 7 */
}
You can replace :nth-child(2) with :first-child + * in CSS if you don't know what exactly the second child is going to be:
.fte-chart-container .node > div > :first-child + *
But having * at the end of a complex selector may have poor performance in older browsers, so you should try and identify the element you want to select and replace * with whatever type/class/etc that element is.

CSS background opacity with rgba not working in IE 8

I am using this CSS for background opacity of a <div>:
background: rgba(255, 255, 255, 0.3);
It’s working fine in Firefox, but not in IE 8. How do I make it work?
To simulate RGBA and HSLA background in IE, you can use a gradient filter, with the same start and end color (alpha channel is the first pair in the value of HEX)
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
Create a png which is larger than 1x1 pixel (thanks thirtydot), and which matches the transparency of your background.
EDIT : to fall back for IE6+ support, you can specify bkgd chunk for the png, this is a color which will replace the true alpha transparency if it is not supported. You can fix it with gimp eg.
I believe this is the best because on this page has a tool to help you generate alpha-transparent background:
"Cross browser alpha transparent background CSS (rgba)" (*now linked to archive.org)
#div {
background:rgb(255,0,0);
background: transparent\9;
background:rgba(255,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
zoom: 1;
}
the transparent png image will not work in IE 6-, alternatives are:
with CSS:
.transparent {
/* works for IE 5+. */
filter:alpha(opacity=30);
/* works for IE 8. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
/* works for old school versions of the Mozilla browsers like Netscape Navigator. */
-moz-opacity:0.3;
/* This is for old versions of Safari (1.x) with KHTML rendering engine */
-khtml-opacity: 0.3;
/* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */
opacity: 0.3;
}
or just do it with jQuery:
// a crossbrowser solution
$(document).ready(function(){
$(".transparent").css('opacity','.3');
});
Though late, I had to use that today and found a very useful php script here that will allow you to dynamically create a png file, much like the way rgba works.
background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);
The script can be downloaded here: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip
I know it may not be the perfect solution for everybody, but it's worth considering in some cases, since it saves a lot of time and works flawlessly. Hope that helps somebody!
There are mostly all browser support RGBa code in CSS but only IE8 and below level does not support RGBa css code. For This here is solution. For The solution you must follow this code and it’s better to go with it’s sequence otherwise you will not get perfect output as you wish. This code is used by me and it’s mostly perfect. make comment if it’s perfect.
.class
{
/* Web browsers that does not support RGBa */
background: rgb(0, 0, 0);
/* IE9/FF/chrome/safari supported */
background: rgba(0, 0, 0, 0.6);
/* IE 8 suppoerted */
/* Here some time problem for Hover than you can use background color/image */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
/* Below IE7 supported */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
}
You use css to change the opacity. To cope with IE you'd need something like:
.opaque {
opacity : 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
}
But the only problem with this is that it means anything inside the container will also be 0.3 opacity. Thus you'll have to change your HTML to have another container, not inside the transparent one, that holds your content.
Otherwise the png technique, would work. Except you'd need a fix for IE6, which in itself could cause problems.
I'm late to the party, but for anyone else who finds this - this article is very useful:
http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
It uses the gradient filter to display solid but transparent colour.
To use rgba background in IE there is a fallback.
We have to use filter property. that uses ARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;
this is fallback for rgba(255, 255, 255, 0.2)
Change #33ffffff according to yours.
How to calculate ARGB for RGBA
this worked for me to solve the problem in IE8:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
Cheers
This solution really works, try it. Tested in IE8
.dash-overlay{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
}
It is very simply you have to give first you have to give backgound as rgb because Internet Explorer 8 will support rgb instead rgba and then u have to give opacity like filter:alpha(opacity=50);
background:rgb(0,0,0);
filter:alpha(opacity=50);
This a transparency solution for most browsers including IE x
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
The best solution I found so far is the one proposed by David J Marland in his blog, to support opacity in old browsers (IE 6+):
.alpha30{
background:rgb(255,0,0); /* Fallback for web browsers that don't support RGBa nor filter */
background: transparent\9; /* backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,0,0,0.3); /* RGBa declaration for browsers that support it */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000); /* needed for IE 6-8 */
zoom: 1; /* needed for IE 6-8 */
}
/*
* CSS3 selector (not supported by IE 6 to IE 8),
* to avoid IE more recent versions to apply opacity twice
* (once with rgba and once with filter)
*/
.alpha30:nth-child(n) {
filter: none;
}
After searching a lot, I found the following solution which is working in my cases:
.opacity_30{
background:rgb(255,255,255); /* Fallback for web browsers that don't support neither RGBa nor filter */
background: transparent\9; /* Backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,255,255,0.3); /* RGBa declaration for modern browsers */
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* IE 8 suppoerted; Sometimes Hover issues may occur, then we can use transparent repeating background image :( */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* needed for IE 6-7 */
zoom: 1; /* Hack needed for IE 6-8 */
}
/* To avoid IE more recent versions to apply opacity twice (once with rgba and once with filter), we need the following CSS3 selector hack (not supported by IE 6-8) */
.opacity_30:nth-child(n) {
filter: none;
}
*Important: To calculate ARGB(for IEs) from RGBA, we can use online tools:
https://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
http://web.archive.org/web/20131207234608/http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

I have an image that is 100x100 in pixels. I want to show it twice the size, so 200x200 and I want to do it by CSS and (explicitly) not by the server.
Since a few years, images get anti-aliased by all browsers instead of doing a by-pixel scale.
Mozilla allows to specify the algorithm: image-rendering: -moz-crisp-edges;
So does IE: -ms-interpolation-mode: nearest-neighbor;
Any known webkit alternative?
WebKit now supports the CSS directive:
image-rendering:-webkit-optimize-contrast;
You can see it working in action using Chrome and the last image on this page:
http://phrogz.net/tmp/canvas_image_zoom.html
The rules used on that page are:
.pixelated {
image-rendering:optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */
image-rendering:-o-crisp-edges; /* Opera */
image-rendering:-webkit-optimize-contrast; /* Safari */
image-rendering:optimize-contrast; /* CSS3 Proposed */
image-rendering:crisp-edges; /* CSS4 Proposed */
image-rendering:pixelated; /* CSS4 Proposed */
-ms-interpolation-mode:nearest-neighbor; /* IE8+ */
}
Unfortunately, it looks like this feature is absent in WebKit. See this recent bug report:
https://bugs.webkit.org/show_bug.cgi?id=40881
In addition to #Phrogz very useful answer and after reading this: https://developer.mozilla.org/en-US/docs/CSS/image-rendering
It seems like the best CSS would be this:
image-rendering:optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */
image-rendering:-o-crisp-edges; /* Opera */
image-rendering:-webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering:crisp-edges; /* CSS3 Proposed */
-ms-interpolation-mode:bicubic; /* IE8+ */

Resources