Mobile Friendly Website


Doing it with style

More snazzy borders COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

Ty Stallard:-
One more question.

I don't understand what this is doing.

* html .xboxcontent {

Can you explain what the *.html is for?
(18.01.2007, 19:12)

Ty, I would suggest you get a basic book on CSS if you want to understand the complexities of some of my demos.
margin:top right bottom left; does not require comma separators. In fact the only time commas are used in defining values in this way is in the 'clip' style and even then some browsers allow this without the commas.
margin:0 5px; means top and bottom borders are zero with right and left borders 5px.
* html in front of a style is a 'hack' which is used to target IE browsers only. Other browsers will ignore this style.
There a many hacks used in stylesheets to target browsers in one way or another.
(18.01.2007, 20:34)

I'm trying to figure out how to set these to a fixed height?
(20.06.2007, 02:17)

Hi Stu,
Love the snazzy boxes with colored headings. I've been trying to modify them to have a colored footer (e.g. a mirror image of the heading), so that square cornered background images can sit nicely between header and footer. I haven't managed it yet, can you tell me how?
(04.08.2007, 15:34)

Ooh, cracked it! If anyone else wants to know here's how:
/*Add this into the css*/

.xsnazzy h2, .zsnazzy h2 {
padding:5px 10px 0 10px;
border-top:1px solid#444;

/*And add this after your div content*/
<h2 class="color_a">Blah Blah Title</h2></div>
<b class="xbottom"><b class="xb4 color_a"></b><b class="xb3 color_a"></b><b class="xb2 color_a"></b><b class="xb1"></b></b>

/* e.g. you have to add the color attribute to "xb2" "xb3" and "xb4" */

In response to Doug's question, I am also have trouble adding a shadow to this type of box!
(04.08.2007, 18:20)

Hi Stu, great site!

BTW this demo doesn't display correctly in IE 6 (outer box right border is 1 extra pixel to the right).
In other browsers is fine.
(28.08.2007, 14:23)

This method is brilliant!! Am I the only one though who has trouble sometimes (not all the time) to get them to display properly in NS 8.0.2? They seem to break on me every once and awhile... :(
(14.10.2007, 03:49)


You have an excellent site. You have helped me in learning quite a bit about CSS. I am trying to use the snazzy boxes, but I am wanting to have them on top of each other, not next to each other. Can you please help? Thanks
(16.11.2007, 06:00)

Hey, do you still help out here?
(28.07.2010, 10:22)

What is the easiest way to separate css control of the "outer" box from the "inner" boxes? (So that the outer box is a big "page box" and the smaller ones can be used inside it at different places.) Actually, is there a way to do that?
(19.03.2012, 22:35)

10 of 24 comments (part 1). [ » ] [ * ]


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page