Problems with opacity in Internet Explorer
The text suddenly gained a strange - and ugly - border effectHere’s a strange one I came across the other day. I’m posting this in the hope that I’ll save someone out there some time in the future. I was applying a fade-out effect to a news ticker, and all was going well (thank you Yahoo! User Interface library!) until I was ready to test in Internet Explorer.
Unfortunately, as soon as the second news item was displayed, the text suddenly gained a strange border effect (perhaps a glow or halo effect might also describe it - but it isn’t pretty).
This is very easy to replicate in IE (either 6 or 7). Just apply filter:alpha(opacity=50); to some text and take a look. It’s worth noting that while this effect shows on any text on my Windows computer, it turned out to only do it for bold text on some. It’s possible that Microsoft’s ClearType font smoothing has somthing to do with this, but I have not looked into this in any detail. At first I wasn’t concerned - I simply applied position:relative to the item with the opacity (this being a solution I’d come up with for a similar text effect in the past), and sure enough the text now looked fine.
However, I wasn’t yet done, it turned out: now the fade effect didn’t happen. My text changed from one item to the next, but did it instantly. I played around with the styling for a bit with no effect before the realisation that perhaps background colour might be the key - and sure enough, setting a background colour (but not transparent) solved it.
I mentioned having had a similar effect happen in a different situation. In that case, I wasn’t doing anything with opacity, but was showing and hiding different blocks of text within the same area of the page. I haven’t tried out specifying a background colour for that problem, but position:relative worked just fine, so my advice is: If you get this border effect on your text, first try applying position:relative or set a background colour if that doesn’t work.
Comments (5 so far)
You just solved my problem. TD with opacity set to 50% in IE causes all child elements to have 50% opacity so input fields are all washed out. Setting position:relative on the first child of the TD (a DIV in this case) causes all of its children to have 100% apacity. Thanks!
Thx, a simple solution that i search
I need to apply opacity to children that have position: relative — how would I do that?
I cannot remove the position:relative because it’s used to constrain other absolutely positioned children in a few places.
The games have a stand so that you can place them on. So there you have it, my list of the top 10 best selling Christmas toys, 2011. Germs can linger after play dates and your kid can very easily catch a cold from his sniffling pal that he played legos with that day.
While watching TV, kids are inactive and tend to snack. It resembles a lot the house that appears on the show and if your little girl already has a lot of Hannah Montana accessories she will love the beach house because she will enrich her collection. According to psychiatrists and psychologists, from 0 to 10 years is the time when the minds of children are most active.
Post new comment