I use a gradient background color for selected or hovered menu items it works fine in chrome,FF,opera,ie7,ie8 . but in ie9 the background of the elements appears in the right of the element but text keeps in place this is the first problem.
the second problem i faced is the rounded corner it works fine in chrome, FF, opera but in ie9 the corners are ok but the background of the box was an image but it appears white!!!
the third problem is that of shadow
i apply shadow to the divs containing images it works fine in all browsers but ie9 offset the whole div instead of applying shadow and opacity change on mouse over increased the problem by adding black parts in the side of div that doesn't have shadow???????
when i heard that ie9 supports css3 i knew that this is unbelievable ie will still be my Nightmare!!
I'm afraid of future appearance of the website in ie 9 so i add this
<meta http-equiv="X-UA-Compatible" content="IE=7.5"/>
when i used IE=7 or IE=8 the problem still as it is
but know it appears better after adding that line but with no support for rounded corner.
How are you telling IE9 to implement the corners and gradients? Are you using the IE filters (like I assume you're using for 7 and 8)? Or are you actually using CSS3?
If you're using filters, try making IE9 just use CSS3. You can put the filters into their own stylesheet and just use conditional comments to target IE8 and below for them, so IE9 ignores the filters altogether, that way you know they're not interfering.
Related
I'm using CSS3 PIE to do border-radius, drop shadow and transparency effects to make the transparent area around the main of the page. I'm trying to make it look like this:
http://www.palosverdes.com/rpv/re-design/JANUARY-2012/C-10.html
Here's my current version:
http://www.palosverdes.com/rpv2012/indexforie7.cfm
This renders the effects I want in the modern browsers, but in IE7 the drop shadow seems to be filling the area that should be transparent. Here's a screenshot:
imgur.com/lD0JG (I still can only post two hyperlinks, sorry)
Any ideas what might be causing the problem?
It turns out that css3pie doesn't support drop-shadow on items that are not opaque (it shows through). Here's the relevant link: css3pie.com/documentation/supported-css3-features/#box-shadow As far as I can tell, this problem can only be resolved in ie7/8 by using a png-based drop shadow with some css or adding the drop-shadow as part of the background-image for the div.
I'm hunting some very odd rendering issues in IE9 in windows 7. I'm using the microsoft "filter" method wherever there are gradients, it's HTML5, and everything is in standards mode.
Please note, as there has been some confusion: This is happening everywhere there are rounded corners, including in situations where there are no gradients, and even no background color at all. The specific issue can be seen in the screenshots below as gaps in the border and color getting repeated on the x-axis, INSIDE the element.
As far as I can tell, I have set up everything correctly, and of course it all renders just fine in firefox and webkit browsers.
Has anyone ever seen this? I'm chasing my tail and googling turned up squat.
Input box:
DIV with gradient background:
Edit:
The twitter-bootstrap link provided below exhibits exactly the same issues on all their example elements. Smarter people than me are working on that project, so I'm racking this up as un-solvable with CSS alone. Feel free to close.
thats a known bug in IE9 and theres no really easy solution* to get rid of this. the easiest ways would be:
use a background-image containing the gradient instead of a gradient for IE < 10
use a plain background-color instead of a gradient for IE < 10
twitter bootstarp, for example has to deal with this, too. they've chosen to use a plain background-color for their buttons as you can read here:
In IE9, we drop the gradient on all buttons in favor of rounded
corners as IE9 doesn't crop background gradients to the corners.
*ugly svg-for-ie-solution: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
IE Filters and rounded corners don't play nicely together. You're going to have to choose between a solid background colour or square corners for IE. Vendor prefixed gradients are going to be supported in IE10, so there is that at least.
Twitter make note of this on the Bootstrap site, saying:
"In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners."
When I use only rounded corners on my div, it looks about how I expect in IE9.
border-radius: 7px;
However, when I add the following line to make a drop shadow, I get an unexpected effect:
filter: progid:DXImageTransform.Microsoft.Shadow(color='#818181', Direction=135, Strength=3);
Here's a screenshot of the effect. I'm referring to the ugly little black corners suddenly appended to my light blue div:
http://imageshack.us/photo/my-images/406/blackcorners.png/
How can I get rid of that?
IE9 supports box-shadow natively, so there's no need to use the old filter style.
If you're using the filter for the benefit of older IE versions, then it may be that both shadows are coming into play in IE9, and slightly different, thus causing the weird effect.
My first suggestion is simply to drop the filter style. This will mean that versions of IE won't see the box shadow, but it's not really a critical element of the layout.
If that's no good, then I would suggest using CSS3Pie to implement the box shadows for older versions of IE. As a bonus, it'll do the border-radius too.
With CSS3Pie, you can use the standard CSS box-shadow style in older versions of IE, and not need to worry about the filter style. And, to show how it directly answers your question, it will switch itself off automatically in IE9, so you won't get the double shadow effect.
Hope that helps.
I have a page that simply has a dark-grey background for the body with a div in the foreground that has a white background. In every other browser besides IE 8 (even IE 7 seems to work fine!) the page is rendered fine. However, in IE8, I see the background color for a split second before it turns into white. Even more bizarre, when I open up the developer tools on IE8, the dark grey background re-appears!
I've tried this on 3 different computers now each with slightly versions of Windows, with the same results.
My only solution so far is to apply the dark grey background color to the html element which seems to work, but I'm fairly sure this is non-standard.
Any suggestions? Is this a known bug?
It's a bug in the version of jQuery you're using (v1.6.1).
I came across the same problem in this question, it has all the info you need: Weird IE8 layout glitch - why does the body background disappear?
I have a text field, and it's good everywhere except Opera, where it takes the color of the background.
How can I make just the inside white? Setting background(-color) to white makes the entire square element background white, which is not what I want.
The cornering is border-radius. No IE hacks needed :)
No specific CSS is used for the other browsers, it just works, in that it was always white.
Should've posted the link earlier, but the page in question is http://blog.darkhax.com/
I can't see anything wrong - I've set up a simple test here: http://jsfiddle.net/ZxR5k/1/, which works fine on Opera 10.6. The border radius property works as expected.
It appears from the image you have up there that you are applying the background color to the parent of the input element. That may be the problem.
How are you creating that curve? Is it with border-radius? If so, background-color should do it (though you say it doesn't).
If it is an image, can you fire up the image in your graphics program and give it a white background?
What CSS do you use that works in every other browser except Opera?