Hi I was trying to apply a box shadow to my main content box but it doesn't work correctly in IE. Rather than applying the shadow to the edges of the box like in firefox & chrome it seems to apply shadw to the content.
here are the filters im using:
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=0, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=0, Color='#000000');
I suggest using CSS3 PIE (http://css3pie.com) instead of filters. It offers a much more complete and accurate rendering of shadows that matches that of native-CSS3 browsers almost identically. It keeps your CSS cleaner too.
Related
How can I use the filter brightness - invert in internet explorer.
This works fine on chrome and firefox but not on interet explorer
.imgs {
-webkit-filter: brightness(0) invert(1);
filter : brightness(0) invert(1);
}
Internet explorer does not support css filter.
However, since you're not doing anything fancy with this filters, just making the images white (I'm guessing your're hiding them with js by adding that class?) you can use a different aproach, like using a container around those images with a white background and just set visibility: hidden on the images.
As i titled i have two boxes like this Guys now you can understand my problem ;)
in a responsive layout i want to display this boxes with background yellow transform like this one of left is float left and other one is float right of the browser window. i think its too hard please help me friend's :(
iam using css3
Here's your (mostly) cross-browser solution:
<style type="text/css">
#oneOfYourRectangles
{
-ms-transform:rotate(10deg); /* IE 9 */
-moz-transform:rotate(10deg); /* Firefox */
-webkit-transform:rotate(10deg); /* Safari and Chrome */
-o-transform:rotate(10deg); /* Opera */
}
#theOtherRectangle
{
-ms-transform:rotate(350deg); /* IE 9 */
-moz-transform:rotate(350deg); /* Firefox */
-webkit-transform:rotate(350deg); /* Safari and Chrome */
-o-transform:rotate(350deg); /* Opera */
}
</style>
Ya know, I never did get around to testing to see if negative values are supported.
Also, note that obviously the 10deg and 350deg are just guesses. Replace them with whatever value fits best.
And, just for funsies, note that webkit (Safari and Chrome) support 3D transformations, too.
I have this :
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(210,210,210,1)));
Its working for all browsers and for IE9 , but not working for IE6
Can someone tell me what to use else
Regards
You need to use IE's old filter rules, the rule you mentioned in the question has a vendor prefix which is targeting webkit (chrome, safari etc) browsers only. - there's a neat generator here which will help you out in making cross-platform gradients. IE6-9's rules look like this:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 *
The webkit prefix only works in Webkit browsers, which are Chrome, Safari, and Android and iPhone. For example, you'd need to use -moz for Firefox, and -o for Opera.
IE6 doesn't have any gradient support at all, so you'll need to use an image instead, or drop IE6 support, which is probably a good choice; not many users are still on IE6. (Unless this is meant for use specifically in for example governments, they're often stuck.)
Internet Explorer gradient filter doesn't support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.
Internet Explorer 8 and lower aren't the only browsers that don't support gradients, so using filters won't catch all browsers.
Another approach is to use Modernizr to feature detect support and use a fallback image or solid colour.
For example:
#box {
// Normal gradient syntax
}
.no-cssgradients #box {
// Fallback image
}
I'm stumped here. I've got maybe 2-3 pixel difference with my header text (img) when displayed in FF vs an webkit browser. Not a whole lot going on in this page. Both the CSS and HTML validates. Doesn't appear to be and text zoom related. What am I missing?
www.caribouhouse.com
There's a hack for overwriting a css rule in firefox 3 , you can use this :
.foo{}/* other browsers */
.foo, x:-moz-any-link { } /* FireFox 2 */
html>/**/body .foo, x:-moz-any-link, x:default { } /* Only FireFox 3 */
FF and WebKit use different methods/algorithms to render text. Even WebKit by itself uses more than one method to render text, depending. Because of kerning etc it's normal to see different implementations have a difference of a few pixels when rendering text, even when the text is the same font in both cases.
Using CSS for creating gradients instead of images, does it have any negativity?
For example the following code:
#gradient {
color: #fff;
height: 100px;
padding: 10px;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #00f, #fff);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
}
Thanks.
Gradients are not standardized yet and many browsers do not suport it, in your exemple -moz-linear-gradient works in firefox 3.6 but on older version doesn't. If your site is for public purposes, many people won't see you gradients, so you could check what version of browser they use, and use gradients or images based on that. I use gradients on an intranet site (where I can force users to use a specific browser), If the browser if not Firefox 3.6 or greater, the site will show just a message that tells the user to upgrade, but this is not a good way if you go public.
So i choose negative for public sites. :)
As you've illustrated in your example, there's no one way to do it that works in all commonly used browsers at the moment. I would consider that a "negative" for maintenance and code readability purposes.
A bit of constructive criticism: the word you're looking for is "instead", not "instant".
CSS gradients are used on many large websites using the fallbacks you are using. I would add PIE.htc as well. If you do use PIE remember that it needs to be absolutely or relatively positioned to show up.
If you have to support really old browsers the best way is to give them a fallback solid background-color.
To be it it silly to expect old browsers to display gradients at all. If you absolutely have to you can set up a conditionally loaded stylesheet:
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="http://mysite/css/ie7_hacks.css" /><![endif]-->
In there you can declare a repeating image-based gradient. Just like how it used to be done before CSS3.
By doing it this way you are making your site a little faster for modern web browsers.