1 person found this helpful
Looks OK to me. Almost exactly the same in Firefox, IE and Safari on WinXP.
Do you have cleartype enabled?
Never even heard of it.
I did a quick Google on it, and it looks like Vista has that already enabled. But here's the real catch, it's only on the opacity that the font looks glitchy. If I turn the opacity off, then things look great.
I don't know if it makes a difference, but I'm using IE 7.
Just to bring everyone up-to-date! Opacity is 'not yet fixed', meaning while it is supported by all current browsers, they all (also) misbehave, transferring background opacity to foreground text. Check out the following links for some possible creative insights.
Conclusion: image transparency is showing promise, having separated itself from simple opacity sometime this winter season. Design accordingly.
Opacity has always effected contents. If you desire a semi-transparent background without effecting contents, use RGBA color values instead of the opacity property.
<div style="background: rgba(255, 0, 0, 0.25);">
This background has 25% opacity</div>
<div style="background: rgba(255, 0, 0, 0.5);">
This background has 50% opacity</div>
<div style="background: rgba(255, 0, 0, 0.75);">
This background has 75% opacity</div>
<div style="background: rgba(255, 0, 0, 1.0);">
This background has 100% opacity</div>
Nancy O. , rgba <div style="background: rgba(255, 0, 0, 0.25);"> is cool, but...
- cross browser syntax ?
- cross browser text wipout ?
opacity: 0.50; /* Firefox ab 3 */
filter:alpha(opacity=50); /* IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha (Opacity=70); /* IE 6-8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
-moz-opacity: 0.5; /* Mozilla firefox + Netscape navigator */
-khtml-opacity: 0.5; /* Safari old + Chrome old + Chromium */
opacity: 0.5; /* Good browsers */
burb !! prog id -- bugging dw today (lol) that html file is 2 things
- a skin you edit with any dos text editor
- a file core distributing code enforcing groovy things like text wipout
Also, style weighting sometimes demands image backgrounds !
So finally, hexadecimal #aaaaaa is universal - RGBA support is :
IE9+, Firefox 3+, Chrome, Safari, and Opera 10+ ( tablet and handheld ? )
and CSS3 opacity support is :
IE9+, Firefox 2+, Chrome, Safari, and Opera ( tablet and handheld ? )
... which brings us back to png transparent backgrounds
and DW's very rare transfer of PNG opacity to text
Message was edited by: Mark.Stewart to include link annotations.
I no longer concern myself with obsolete browsers like Netscape Navigator, & IE5-7. If you're so concerned with older browsers, use Conditional Comments and images. It's all just eye candy anyway.