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.
Related
Ok, see if you can help me out with this one:
1) Go here: http://thepredatorial.com/DHS/index.php in Google Chrome/Firefox/IE9
2) Everything looks great
3) Go to the same web address in IE8
4) There is a gray background (that matches the outer corners) behind the slides of the slideshow that I can't seem to find out why or get rid of...
Any help?
Ok, I ended up fixing it on my own.
Because IE8 had crazy bad PNG transparency issues, I ended up making a png of the entire block above and below the transparent gifs, absolutely positioning it ABOVE everything, then z-indexing everything BUT the banner slides above the absolutely positioned element.
Crude? Maybe. However, now it works beautifully in Firefox, Chrome, IE9, IE8, and FOR GOD KNOWS what reason IE7 as well.
IE8 and below has issues with applying transparent effects to already transparent images. It appears your jQuery "cycle" effect is causing this: remove the flashing transparency, remove the grey background.
Since IE's dev tools are fairly crappy I couldn't easily test any of the workarounds posed here on your actual site, but hopefully one works for you: Problem with JQuery cycle on IE8
i use css3pie for my page to use css3 effects in the ie browsers.
Everything works fine. But now i have a field on my page that has a horizintal scrollbar.
In ie8 everything works finde. But in ie7 i cant scroll dragging the scrollbar. I can only use the arrows on the left and right.
and in ie9 i cant scroll.. i also cant drag the scrollbar. but if i click on the arrows on the left and right the scrolling element directly jumps to the left back..
i use pie v1.0beta5
i found that issue on many sites but there was no solution that works for me..
i have a wrapper arount my page that has a linear gradient background.. if i remove that everything works fine.. but with the gradient background i cant scroll in ie7 and ie9..
does anyone have the same problem and maybe found a solution for this problem?
nevermind, it seems you have to add the -pie-track-active:false to all ancestor elements that use a PIE behavior
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 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.