B
ben curthoys
i have a problem in IE6 whereby semi-transparent text in a div without a
background is rendered badly; it looks like the anti-aliasing is broken. it
works fine in mozilla.
obviously in this example setting the background to "red" would make things
look fine, but in real life the text will be on top of an image. can anyone
suggest a workaround?
actually, what i'm trying to do is display 80% opaque text on top of a 40%
opaque white box on top of an image, but if i put the text in the white box
i can't control its opacity separately and make it more opaque than its
container (which is fair enough). if anyone has a good way of achieving that
i'd be interested.
example html follows:
<html>
<body style="background: red;">
<div style="
position:absolute;
left:100px;
top:100px;
filter:alpha(opacity=25);
-moz-opacity:0.25;
background: white;
">
works fine with a background
</div>
<div style="
position:absolute;
left:200px;
top:200px;
filter:alpha(opacity=25);
-moz-opacity:0.25;
">
looks nasty in ie without a background
</div>
</body>
</html>
background is rendered badly; it looks like the anti-aliasing is broken. it
works fine in mozilla.
obviously in this example setting the background to "red" would make things
look fine, but in real life the text will be on top of an image. can anyone
suggest a workaround?
actually, what i'm trying to do is display 80% opaque text on top of a 40%
opaque white box on top of an image, but if i put the text in the white box
i can't control its opacity separately and make it more opaque than its
container (which is fair enough). if anyone has a good way of achieving that
i'd be interested.
example html follows:
<html>
<body style="background: red;">
<div style="
position:absolute;
left:100px;
top:100px;
filter:alpha(opacity=25);
-moz-opacity:0.25;
background: white;
">
works fine with a background
</div>
<div style="
position:absolute;
left:200px;
top:200px;
filter:alpha(opacity=25);
-moz-opacity:0.25;
">
looks nasty in ie without a background
</div>
</body>
</html>