ok, i have this code:
<div style="border:5px solid rgba(0,0,0,0.5);background:#FF0000">yyyyy</div>
but it won't work in IE because it doesn't support rgba(), so, how do i achieve the same effect? hopefully without images or more divs...
Besides IE, there're a few other browsers that do not support rgba. For IE fallback, check this out: http://css-tricks.com/rgba-browser-support/
Without creating a background image (and applying a pngfix for IE6), you can't. More info: http://www.css3.info/opacity_rgba_and_compromise/
Related
I want apply gradient to my element. I use less to do it.
For IE9 I use the following css:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FirstColour, endColorstr=#SecondColour)";
where #FirstColour =#b7d4ee and #SecondColour=#7a9eca;
It is the gradient like this:
But in IE9 with css-style defined above, I see the gradient like this:
When page load in IE9 browser, my less isn't compiled (not sure why) and render into:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FirstColour', endColorstr='#SecondColour')
How to get normal gradient display in IE9 with less using?
Use the gradient generator here
It provides all gradient solutions for every browsers, including IE. Instruction is explained there
Try creating gradient from here:
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
I'm thinking of creating a custom made rounded corners block using only divs, and I was curious to know what you guys think, if that's a good enough approach, or is there an easier way to get a cross browser support (While also supporting older browsers such as IE6)
I'll write a little simple explanation code for you guys to understand easily:
<div class="Block" style="position:relative">
<div>
Content will go here or something
</div>
<div name="TopLeft" style="position:absolute;top:0;left:0;"></div>
<div name="TopRight" style="position:absolute;top:0;right:0;"></div>
<div name="BottomLeft" style="position:absolute;bottom:0;left:0;"></div>
<div name="BottomRight" style="position:absolute;bottom:0;right:0;"></div>
</div>
In the real code, I'll give each one of them a background, and of course put it in a css file instead of writing it inline like that.
Use CSS3Pie.
This is a Javascript hack for IE that implements the border-radius CSS in old versions of IE.
If you need rounded corners in IE6-9 browsers you only need to use CSS3 border-radius and one PIE.htc file
Progressive Internet Explorer
div{ border-radius: 6px; -moz-border-radius: 6px; behavior: url(PIE.htc); }
This works best in all IE browsers
Yes, that will work fine.
You can also add the elements using script, that will make the markup cleaner. I use that approach here: bytbil.com
Doubt it will work in IE6, but you can use the following:
-moz-border-radius: 15px;
border-radius: 15px;
Put that in your CSS for a DIV and it will support most browsers, but again, not sure about IE6... It does definitely work on IE9, Safari (5+), FireFox(1.0+), Chrome(5+) and Opera(10.5+)...
I guess this would work, and it's as good as anything to support IE6.
Any solution that covers IE6 is bound to be an awful hack. I think it's really worth it to wonder if you really need it. I would prefer just using css rounded corners and let the chips fall where they may.
I am using jquery.reveals.js plugin.
the following colors specified in css
#fff
#000
are being interpreted differently on different browsers.
Getting the following output on firefox,chrome,and IE 9 ( and above)
however I am getting some unexpected result with IE8
I guess above problem is because the color specified in css in only 3 digits i.e. #fff and #000.
How can I fix this for IE8
Well it looks like the IE8 one is correct, and the modern browsers are interpreting it to what looks like #000; but with some transparency, is there a setting of opacity: 0.5; somewhere that IE is ignoring and good browsers are doing??
It's probably because before IE9, IE's png handling was horribly flawed. If you look into the plugin's asset folder you will find a modal-gloss.png. Now when you opacity animate a sem-transparent in IE before IE9 it will loose its transparency.
Try disabling animation with
$(...).reveal({ animation: 'none'});
the colors are displaying properly. I think the problem is with opacity.
Here you can read about CSS Transparency Settings for All Browsers.
Specify the color in six characters, or perhaps better yet specify the color as an rgba value.
Stick to using the standard as intended without leaving guesswork for the browser. Meaning define in hex as #RRGGBB not #RGB. You can switch color value schemes (like to RGB) but that should not be your issue.
This link shows you examples of each color value scheme and talks about browser compatibility:
http://www.w3schools.com/cssref/css_colors_legal.asp
Try rgba(0,0,0,0.5).
More about RGBA
I want to add multiple background image using css for my site.I use this code.
#container{
margin:0 auto;
width:1154px;
background:url(../img/background-top-new.jpg) no-repeat, url(../img/background-middle.jpg) repeat-y;
height:auto;
}
I face this problem in ie.
If you have any solution for this problem please give me any solution.
Multiple background images is a CSS3 feature, which means it is only supported by the latest versions of Firefox, Chrome, Safari and Opera.
You may be able to reproduce the same effect in IE though, but you will have to do it with multiple divs (1 background/div)
IE doesn't currently support multiple background images (except for IE9). There is a workaround using DirectX filters that allows you to specify 2 backgrounds but it's far from being optimal: http://cookbooks.adobe.com/post_Cross_Browser_Multi_background_images__including_I-16839.html
The most portable solution is to create multiple divs and stack them in layers.
CSS3 MUltiple background is not supported in IE6,7,8 and Firefox below 3.5
http://www.quirksmode.org/css/background.html
You can do with tricks
http://cookbooks.adobe.com/post_Cross_Browser_Multi_background_images__including_I-16839.html
http://www.noupe.com/jquery/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html
I have it set up in css to have the background an image slightly bigger than the content section so as to have a shadow behind it that repeats in the y direction but in IE it doesn't show the transparency. I have used google to try to solve this problem with no luck having done the image in css.
CSS:
#shadow{
width:854;
margin-left:auto;
margin-right:auto;
text-align:left;
background-image:url(shadow.png);
background-repeat:repeat-y;
}
HTML:
<div id="shadow">
</div>
Any help is greatly appreciated as I at a total loss on this.
If it's possible, you make the png a gif, and everyone is happy.
If that isn't possible, the approach I use is the IE only css behavior.
With a behavior you can link to an htc file, like the one found here: http://www.twinhelix.com/css/iepngfix/
You would then have to add CSS like:
behavior: url(iepngfix.htc)
IE7 supports png transparency.
You could use something like a browser gate (which is an ugly hack) if you'd like to support IE6.
Use selectors in your CSS which IE<7 doesn't support:
html>body #transparent_png {
background: url(gfx/transparent_png.png);
background-repeat: no-repeat;
}
#transparent_png {
/* additional properties here */
}
the html>body #transparent_png style is ignored by IE6. Then, we use the ugly DXImageTransform-filter in a seperate .css file to display the png in IE6 transparently.
But this css should only be loaded if the ie version is less than 7:
html header:
<!--[if lt IE 7]>
<style type="text/css" media="screen, projection">
#import "iefixes.css";
</style>
<![endif]-->
The iefixes.css contains something like this :
#transparent_png {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png');
}
Unfortunately, this filter does not support repeat-x or repeat-y. But with this gate hack, you could display an ugly dithered gif shadow for IE 6 instead of the nicer png shadow :).
But, there is also a sizingMethod property for the DXImageTransform-filter (see http://msdn.microsoft.com/en-us/library/ms532920%28VS.85%29.aspx), so you could scale the image to the size of its container element:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png',sizingMethod='scale');
A very nice png fix for IE6 can be found here
I used it and can assure u it works.
It is JS though, but most people have it turned on lately
All the above may work, especially the alpha image loader which is good, vut if you plan on using it and want to rely on it in the future then you are better using another technique.
The best I have found is:DD_belatedPNG.js
it works likke a treeat and is very easy to use.
The problem I have with the others is that there are bugs when you want to use links appearing over the top of the bg. They dont work, without further hacks.