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
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
A known old known problem is that various old browsers both IE 7 (perhaps also IE 8) and FireFox 3.0 ~ 3.6, are the experiencing of very SLOW scrolling down through a webpage whenever a background image img or div with an image has the position: fixed; property.
Having built a site with this feature I noticed that in IE 7 (maybe 8 too) that had a terribly sluggish scrolling experience ruing the good enjoyment of the entire website. All other JQuery effects were also not smooth anymore. Now, as soon as I commented the position: fixed; property of the background image div:img, everything becomes good again.
<html><head>
img#bg {
/* position:fixed;*/
top:0;
left:0;
height:auto;
min-height:100%; /* proportionally fit height (eg panorama images) */
width: 100%;
z-index:-2;
}
</head>
<body><img src="background.jpg" id="bg"/></body>
</html>
Q1: How to make that line conditional? Users with IE7 or IE8 /*position:fixed;*/ and users with IE9 or FF4 position:fixed
Q2: Could anything in my css have triggered the bug except position: fixed? for example should img#bg be written differently?
Some links: MozzilaZine, StackOverflow, LinDesk
Thanks very much for your suggestions and ideas on this browserbug. Much appreciated!
Q1: How to make that line conditional?
For IE older than version 9 there's always a conditional comment override:
<!--[if lt IE 9]>
<style>img#bg { position: absolute; }</style>
<![endif]-->
For Firefox, one way would be to find some hack that distinguishes version 4 from its predecessors, which I can't really think of right now.
Q2: Could anything in my css have triggered the bug except position: fixed?
That and the fact that it's an image. But mostly the fixed positioning. This also happens if you used a background image with background-attachment: fixed, and is a well-known performance issue on those browsers.
Q1: How to make that line conditional?
If you'd rather not to use conditional comments (per BoltClock's reply), a summary of browser-specific CSS hacks can be found on Paul Irish's site.
Q2: Could anything in my css have triggered the bug except position: fixed?
Short answer: Yes, but probably none as much as position: fixed. If removing it fixes your issue, it's your biggest problem.
Slightly longer answer: box-shadow has been shown to cause performance issues. So will IE's proprietary filters. Inefficient selectors are sometimes mentioned, but it's debatable whether they have a large effect.
To profile your code, use the CSS Stress Test bookmarklet to drill down on exactly which selectors are causing your browser trouble. It's great!
Little background information here: I have narrowed down the problem, but can't determine what the fix is. In IE6 the input box won't allow me to use my mouse to select it.
Please go here to see the problem: http://www.malahatautoparts.com/business-application/
The problems stems from an IE6 fix for the CSS background.
#main{
background-position:-9999px -9999px;
filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
}
If I remove that from my IE6 css file, input box all of a sudden works.
Any ideas on what I can use to fix this?
The conditional comment you have there for "less than IE 7" isn't even working right for the PNG transparency it's supposed to fix in IE6: I'm seeing grey background around the transparent corner areas. In IE7 the transparency works natively without loading that stylesheet.
The method you're using in the IE stylesheet relies on the alphaImageLoader filter, which I suspect is blocking over top of the HTML form controls on the page.
There's an alternate method that uses VML instead: check out DD_BelatedPNG. I'm not 100% sure if it will solve your problem, but I have a hunch it will, and it's a cleaner solution than what you're using now.
<textarea> and <input> selections: selectionStart and selectionEnd are not implemented in IE, and there's a proprietary "ranges" system in its place, see also Caret position in textarea, in characters from the start.
Also see What are the typical reasons Javascript developed on Firefox fails on IE for common reasons of failure of Javascript/CSS in IE which work in Firefox & other browsers (or vice versa).
Some excellent tips so you can get a uniform look & usage in all browsers.
use css with
#main{
background-position:-9999px -9999px;
filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
position: relative;
}
OK, I have my site going pretty well here: http://www.marioplanet.com
But I've realized that if the end-user's monitor is big enough to display the animation on the sides of the pages (which mostly every desktop's monitor and some laptop's can) than I believe my main content would look better with a little red / black border, and some rounded corners, and perhaps even a dropshadow.
Now, I am looking for the easiest way to implement both the border and the rounded corners, and hopefully the dropshadow, but that's not as necessary, with the smallest amount of code.
If I can make it work with just CSS for most browsers except for IE and fallback to a jQuery / JS plugin for IE, that's great too. Or even leave it out of IE completely, but that's not too nice! :)
UPDATE:
OK, I can get it to apply to my header <div> as you can see live right now, but when I try to apply it to the overall wrappter <div>, I get nothing. It may be because I need to have the width and height properties specified in my CSS first.
Thanks!
UPDATE UPDATE:
I found the easiest way to do the borders was by using the following CSS3 selectors:
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
Which all work like a charm!!
CSS3 can do all that you need, and most browsers support it except IE8. (The next version of Internet Explorer will support these features though.)
Visit css3.info for more information.
UPDATE
I've started using http://css3please.com/ recently. It's equally great!
Check this out: http://css3pie.com/
PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.
It is easy to use and integrate, it allows you to use CSS3 features like border-radius, shadow, gradient backgrounds, etc... and best of all... it is compatible with IE!
I hope this helps!
jquery corner plugin is the best plugin to create a rounded corner, and Dropshadow is good one drop shadow effect. Its literally tow lines of code(ignoring the plugin code) :)
http://www.cssplay.co.uk/boxes/four_cornered.html
http://www.cssplay.co.uk/boxes/ has the rounded corners, dropshadow and more. 100% CSS with no use of JS, and works in IE.
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/