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.
Related
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."
I am getting this display in IE 7
I am getting this display in Firefox:
for the following code
Could anybody point me, What I should do to make the IE Display simalar to Firefox and also, How Do I make the Size should be same for all the headings?
Internet Explorer does not support gradients, shadows, nor border-radius properties. border-radius is supported in IE9, but this won't be of much help!
You can look into CSS3 Pie, which uses IE-specific .htc files to achieve almost the same effect.
For now, if you really need to be fully compatible with all IE's (and other browsers for that matter) I'd use an image. It's not very nice but at least you can rest assured that it will always work ;-)
Rounded corners and drop shadow aren't going to work in IE7 without a lot of clever image tricks. You can't fix it through CSS alone.
Alternatively you could probably find a JavaScript plugin which would create these effects for you if you don't mind taking that route (see curvy corners for example).
I use css to apply rounded corners to li navigation elements. This elements have a border too.
So this is how it looks like:
Like you can see the quality of the rounded corner - border combination is strange, there is a bit of white shining through.
Any idea how to fix that? Do I have to use bg-images?
Unfortunately, yes, you should use background images. Some browsers don't properly handle actual borders with border-radius. You can even see this happening to Stack Overflow's badge styles (which also use border-radius) on Firefox. I don't think you can do anything to fix the border-radius issue other than to report bugs to the respective vendors.
Yes it can be done using this jquery plugin.
http://jquery.malsup.com/corner/
No corner images, uses nested divs to draw borders. It's flexible and easy to use. It also has Added support for native border-radius so it only executes on browsers that do not support supports border-radius.
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.
I have the two images below.
They are the same image, with one having a slight glow effect on the text.
They are setup as below:
<div id="header"><a></a></div>
withe the original image being the background for the div, and the 'glow' image being the background for the anchor tag, with display:block; width: 100%; height: 100%;opacity: 0;
i am the using the below jquery code
$('#header a').hover(
function() {$(this).animate({"opacity":"1"}, 1000);},
function() {$(this).animate({"opacity":"0"}, 1000);});
to fade the anchor image in and out on hover.
this works fine in firefox, chrome ect.
But in internet explorer the image is given a solid black background where there is transparency.
How can i fix this?
NB: I am only worried about ie7/8 not 6.
http://webspirited.com/header-reachsniper.png
http://webspirited.com/header-reachsniper-hover.png
Update
I have decided that this is simply not worth my time to do in internet explorer.
However this works perfectly in ie9, so i guess ill remove this effect for browsers less that ie9.
In order to set the opacity of a transparent PNG image, you need to use the AlphaImageLoader filter, even in IE8.
EDIT: You also need to add the alpha filter in the CSS, like this:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path", sizingMethod="scale"),alpha(opacity=100);
Otherwise, jQUery will clear the existing filter as it adds the alpha filter.
This post from Dave Shea's mezzoblue.com may help you: http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/
It notes all of the methods which he tried, and the final solution he arrived at the end:
What did work was a little library
called DD_belatedPNG that applies PNG
transparency via VML instead of
AlphaImageLoader. It’s designed for
IE6, but it works just fine in IE7 as
well. For IE8, I was forced to throw
out an X-UA-Compatible meta tag and
step IE8 down to IE7 mode for this
particular page.
With a tiny caveat at the end
It’s still not perfect. I noticed a
faint white bounding box poking
through at lower opacities that forced
me to slightly adjust hover effects
for all versions of IE. But you know,
for all that, it’s darn well good
enough.