Fiedsets are an easy way to add some separation between content and clearly define areas within a webpage. However, if you wish to add a background to them it can be rather problematic with Internet Explorer. The background appears to spill above the fieldset to the top of the legend.
To see what I mean take a look at the screen shot below of a fieldset on IE6.
Extending on our previous example of styling a box with round corners by adding one additional small image and positioning with css our box is now a speech bubble with round corners.
We have provided all the CSS, HTML and Images to allow for easy duplication of this method.
As an added bonus for Drupal users we have also added a simple comments.tpl.php file to allow you to easily replace your current comments styling. Just add the CSS to your existing theme's style.css and create a new file called comments.tpl.php in your themes directory and paste the contents from our example.
I know it has been done many times before and there are lots of different ways to do it but here is a cross-browser compatible method using CSS and four small images to create round corners on a box. The box is easily resizable without breaking.
If you are looking for a methods that just works then this may be the answer for you.
During the course of the development of this website I realized that I had a requirement to apply specific styling to individual articles for the purpose of demonstrating CSS examples.
I didn't really want to have to create static html pages for this as it defeats the purpose of using a CMS. Using the existing style sheet of my theme wasn't an option either, apart from bloating this file it wouldn't work very well if I decided to change themes in the future. Nor did I want to simply add an additional style sheet and call it from my page.tpl.php file, as this file could become very large over time. Inline style were not really an option either as this would make it more difficult for people to follow example and make it harder for me to re-use css classes.