Below are some quick 'tips' I'll write about (and others can post below) for some little tricks I have found out with CSS.

Opacity issues:
- If you're trying to set a half-opaque, black border (like Facebook), try this:

<div style="border:10px solid rgba(0,0,0,0.5);border-radius:10px;  padding:20px;width:400px;font-family:Arial;background:#fff;">Test div</div>
<!--Creates a Facebook popup-like div-->

*Note: The border-radius MUST be the same as the border-width (the first '10px', otherwise you'll get weird overlap issues.

- If you are trying to make a div half-opaque using opacity:0.5;, you'll find that the text inside it also changes it's opacity. How do we stop that?

<div style="background:rgba(0,0,0,0.5);color:#fff;">Fully opaque text!</div>

As you can see, rgba is very useful in these situations. Check out this page for a chart showing compatibility.



This is a new thread, so please add some more things you have learned below!

Nice of you to post such messages.

However, the first code doesn't work, neither in IE9 nor FF4. The second one does, in FF4, but the first only produces shades of gray, not opacity. Just paste both codes into one file, give the body a yellow background, and see the difference.