I have a very strange problem that I cannot seem to overcome. When I overlay text on top of a to that have a PNG image and also has an Opacity, the text itself becomes transparent. I've tested this in IE7, Firefox, Chrome, Safari, and seems like IE 7 just will not want to work.
To see the problem, visit http://yask.me'>http://yask.me
Doesn't work in IE8 either, and I am certain it is because you are fading the images and the fact that IE uses the alpha filter to do opacity changes on the fade.
If you do the following css, it seems to solve it (setting the alpha filter on the text appears to keep the text as one would expect):
#panMain {filter: alpha(opacity=100);}
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 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 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.
Here is the test site:
http://www.bodwell.edu/summer/new_busp_11/
It looks totally fine in any browser, except of course IE.
The menu bar and title png graphics are getting cut off right at where the underlying layer is. I have no idea how to resolve this and still keep this looking as it is in the rest of the browsers, i.e. Firefox, Chrome, Safari, etc.
Help!
If you remove the opacity attribute it will work. (the one below) from the main_panel class
filter: alpha(opacity=90);
In the meantime you can do that (perhaps have an IE specific CSS that will remove that filter).
They look similar enough in my monitor.
You could use that yellow background image with a PNG transparency and not have that tag.
I'm unsure why IE is doing that though.
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?