Mobile Friendly Website


Doing it with style


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

could it be from here?
(05.06.2004, 10:56)

Nope. This link was added on the 4th June. The sudden interest started at 9.00am on the 3rd June.
(05.06.2004, 12:22)

I guess they're all coming from a link in the newsletter of . I came from there too :)
(06.06.2004, 00:59)

Who cares where they come from, just be honoured that they are coming...
(06.06.2004, 09:34)

The information on this site is fantastic, I personally constantly use it as a reference guide.. There doesnt seems to be alot of readily available information out there pertaining to the full usage of CSS , DIV layout and hte way different browsers utilise that information.
(06.06.2004, 10:31)

Sure you can search for hours hitting numerous pages to sort this information, but why ? ... When 90%+ of everything you need to know is right here.. ( the other 10% , thats programmers utilisation )

Keep up the fantastic work, and those fantastic examples ..

-oz.lawsy ( stupid 500 character limit )
(06.06.2004, 10:36)

;o] Thanks for this oz-lawsy. You are quite right, I am glad you have all visited and that you have found the site useful. I will do something about the 500 characters.
(06.06.2004, 12:00)

I visit religiously stu, great work, keep it up ;)
(06.06.2004, 12:51)

hey stu someone on your list is useing it as a path to try and hack through to comps in the Australia just thought you should know I traced them back this far.
(07.06.2004, 14:24)

Ok, cheers. Email and web site links will be removed.
(07.06.2004, 14:29)

What a pity - the Lego(tm)house crashes totally in Opera 7.21. Works fine in Mozilla 1.5.
(07.06.2004, 21:30)

It works fine in Opera 7.5 and I would imagine any version greater than 7.21 should be ok.
I will probably move it to a page of it's own ;o]
(07.06.2004, 20:50)

BTW NN7 fails to display the lugs on top of each roof brick.
(07.06.2004, 22:37)

Hey, I think your site is very cool. I have used a lot of tricks from it, and told all my friends about it. There is one thing though, you should serve the site as application/xhtml+xml to those who can read it(about everybody expect IE). Since I can't post long links here I just made the following site with some usefull links
Your site is still cool though :)
(10.06.2004, 14:35)

Hi taare, I would serve as you suggest but Portland and Blueyonder do not allow me to do so. Rewrite Engine is switched off so I cannot use .htaccess and Blueyonder do not support PHP on Tier 1 (the free one with unlimited bandwidth ~ that's why I use them). My bandwidth is soaring up to 2GB/month with 270,000 hits so far this month.
(10.06.2004, 15:24)

yeah, I almost figured you knew this already and would have a good reason why not to use it, but I didn't see you point this out at any of your site, so I started to wonder :). Oh, btw, your site as I think you know is linked to from Mark Schenk site, and his site was linked to from the w3c css news board, maybe that's why have had so many hits :)
(10.06.2004, 16:19)

Another new design. Bandwidth is going off the clock again, so I have gone for minimalism to let the demonstrations speak for themselves. I will gradually go through the example to see if they can be improved (with perhaps more css comments).
(19.06.2004, 23:44)

Really incredible ! Your work really helps us. Keep on this great stuff...
(21.06.2004, 09:02)

Stu, I dig you and your designs :)
(22.06.2004, 01:55)

Just wonderful...
(22.06.2004, 16:28)

(29.06.2004, 01:14)

Michel Parmentier:-
Great resource, Stu !

The book demo is impressive ! However, the layout is broken when using links inside the spanned text.

Of course, that makes a link inside another link, which is illegal, I believe ...

Do you know a workaround for this ?
I use a similar technique for pure CSS tabs; works great until I want to display links :-(
(30.06.2004, 22:16)

There is a way to have links within links and that is to put the inner links into a table. See the cross browser drop down menu. However this is only necessary in IE as other web browsers will allow :hover on divs so doing away with the outer link.
(30.06.2004, 23:09)

Michel Parmentier:-
Great ! I'm going to try that ;-)
Do you know if other pseudo-classes (:active :focus) also work on divs ?
(01.07.2004, 00:10)

pseudo-class :active works but not :focus
(01.07.2004, 08:51)

Wow! I just found this site. First time a css site made me smile, though. Keep it up, Stu.
(04.07.2004, 22:27)

My pleasure.... thanks ;o)
(04.07.2004, 23:36)

Your site is amazing, love the visited special menu very kewl. Still learning just what is and isn't possible with CCS and the IS just grew a bit :-D THANKYOU!
(15.07.2004, 23:17)

Beautiful work, Stu. I arrived through the Citrus Moon site somehow but I can't backtrace the link. Keep up the good work.
(23.07.2004, 21:33)

You've been a really great help!! Thanks a ton!
(05.08.2004, 15:50)

Stu: as promised in my response in CSS Forum, I have been studying your ideas. I note that you use the *html, but I don't understand the concept. Is this a wildcard attribute selector? Why do you use it?

(05.08.2004, 18:11)

@designdog: the * html selector is for style that target IE only (none of the other browsers will see the style following this selector.
This is used because IE css is flawed and needs correcting without other browsers seeing what you have done :)
(05.08.2004, 19:14)

wow, i am really disapointed that none of the "big" guys that propagate the use of standards and CSS haven't linked this site.

you have indeed some great work here , a lot to learn from here and to implement in future for me/us in our projects.

thanks for sharing these ideas.
(15.08.2004, 01:28)

Dave P:-
beautiful site... You've got some really good ideas and examples. I'll be sure to return for inspiration!
(17.08.2004, 21:27)

Hello Stu. I just wanted to tell you that your site is fantastic and that I will try to learn as much as possible from it. Thanks for being there.
(19.08.2004, 15:19)

Isn't it amazing how much time some people will spend trying to hack this little comments script to get their email or web address link added. I regularly check these comments and any undesirable ones are removed pretty quickly so it's hardly worth the trouble.
(26.08.2004, 13:46)

Brilliant Site..... Top of my CSS Bookmarks Bookmark directory...
(27.08.2004, 11:32)

stu! i suggest the previous theme which was brown and white, with alphabetised navigation links via access keys. it was most likely more pleasing than this design. although this is nice minimal design.
(29.08.2004, 18:23)

Your site is awesome. Just what I've been needing!
(03.09.2004, 04:41)

Kalle Vahlman:-
Regarding the comment "Purists will say that this will be confusing for text readers." at

I think this can be avoided by setting the media type. See
for details.
(03.09.2004, 12:57)

Samuel H Diamond:-
Thank you ever so much Stu for showing me how such brilliant web design can be wrought so simply. Like all truly wonderful innovators, you have left your audience with a sore forehead from the 'why-didn't-I-think-of-that' factor meeting a nearby desk. Cheers!

(12.09.2004, 02:05)

I was really impressed by some of your examples, especially the CSS font. Well done!
(17.09.2004, 20:21)

Amazing site!
(24.09.2004, 17:38)

Mat Weir:-
Hi Stu,

Thanks for your site, I regularly use it as a css resource.

A wee bit of a challenge, or a question for you:

The following website,

uses trendy quote boxes. It uses javascript to pull the text from the page. Any ideas on how to do it with css, no javascript, and only enter the text once as they have?

Look forward to your thoughts.

mafew @
(16.10.2004, 03:54)

Congratulations--your site contains by far the most innovative and fascinating CSS examples I've seen anywhere. It's really a treat for me! I see you've got the idea of using the status of a link (hover, etc) to change properties such as position, Z-index, and such. I've done such a thing before, though only once. About a year ago I did a page that achieves some tricky effects, using only CSS, by making changes mainly in the "float" and "clear" properties based on link status. I don't know if all browsers interpret it right, but it works in IE 6 for Windows. You can see it at
(16.10.2004, 23:07)

Tim K:-
Stu -- Great site! The Back to Basics 2 scrolling layout is exactly what I was looking for. Unfortunately, I've run into one issue that I haven't been able to overcome: on some of the pages where I'd like to use this technique, my content div contains a form that includes select elements. In IE, these do not obey the normal z-index rules, so as I scroll through the div, they appear above the header, even though everything else in the content does not. I have tried incorporating the iframe shim technique, but it appears that an iframe can cover select boxes only if they're standing still -- as you as you move them by scrolling the page, they pop back to the top again. Any suggestions?
(18.10.2004, 15:37)

Tim K, can you supply a URL?
(19.10.2004, 08:15)

I am having trouble center aligning a div, the css I`m using is

#header {position:absolute; margin:0; left:17px; top:10px; right:16px; display:block; width:725px; height:80px; z-index:2; margin-left:-321px; left:50%;}

and the header at the mo is simply an image for debugging

<div id=header><img src="header.jpg" width="725" height="93"></div> thanks
(19.10.2004, 12:49)

Tim K:-
Stu: An example of the trouble I ran into with the iframe shim technique and a scrolling layout can be found at Another puzzle which seems like it should be easy to solve, but has me stumped: how do I make a div (or a table, or whatever) occupy 100% of the width of the content div? Just setting the width of the contained element to 100% works OK in Mozilla and Opera, but it shoves the vertical scrollbar off the screen in IE 6. An example of that problem is here: Any suggestions you could provide would be greatly appreciated. Thanks again for the terrific site!
(19.10.2004, 18:35)

Hi Tim K,
The form problem is indeed a puzzle. This looks like an IE bug so I will need to investigate further and troll the web for an answer.
The 100% width is not a problem however, as all divs will be 100% UNLESS otherwise stated. So just leave the width value out of the style.
(19.10.2004, 19:59)

David, you should just specify the width:725px; height:93px; then left:50% 'to put the image half way across the screen' then margin-left:-362px; 'to move it left by half the picture width'.
(19.10.2004, 20:03)

of course!!!! Thanks very much, makes so much sense now :oD
(19.10.2004, 20:51)

Tim K:-
Stu, a further note on my question about making things inside the content DIV have 100% width: making a DIV 100% wide works just the way you said; the problem arises when trying to make a TABLE 100% of the content width. (The table is there to display some data in rows/columns, not for layout purposes. Honest. :-)) Since my original comment, I've found that it's possible to address this issue by placing the TABLE inside a DIV that's styled using the Holly Hack (from This stuff shouldn't have to be so hard...
(20.10.2004, 19:38)

nice site.thank u .
(03.11.2004, 07:11)

Congratulations Stu.
This is a fantastic site about CSS.
And here is my challenge for you:
Is it possible to build a table with fixed head and scrollable content-rows?
Something like the Explorer, where filename and size and so are always on top and the items scroll but are always starting (seen from the left) with the head-column they belong to. I don't know if and how this would work...
(04.11.2004, 00:25)

I think you mean something like this ~
(04.11.2004, 13:05)

Joshua Ben-David:-
Thanks very much for an inspiring site.
Very creative!
(04.11.2004, 14:21)

Hi Stu,
This is one part of the problem. This way I've seen it and build it sometimes before. I'm sorry, I forgot to describe the main problem I have:
With dynamic content it's the best to have columns, that adjust their width to the content, so you have as less line-breaks in the cells as the browser-width allowes. The way you showed works fine, when you know what's in the cells(, as long the user has no confusing browser-settings with big fonts or so). But a long word from dynamic build content will make a cell wider and it won't fit the head anymore.
The last, I tried, was a JavaScript, where the User manually can change the width in a way like in the Explorer, but that still sometimes jumps and doesn't work if the mouse is moved too fast.
Greetz hpvw
(04.11.2004, 22:10)

Spug:- states that the box example only "sort of" works in Opera, but it works fine here (Opera 7.54). also works fine in Opera 7.54.

Great website. It showed me a lot of things I'd never even consider as being possible in CSS. Cheers :)
(10.11.2004, 09:48)

Looks as though my version of Opera needs updating, thanks for the info.
(10.11.2004, 10:12)

what a great site ^^ never found such good stuff before ^^
(14.11.2004, 17:55)

A great site, very inspirational.
(17.11.2004, 11:54)

This site gave me the inspiration to redo my website in css, but I`ve been struggling for 4 days now, aarrrggghhh, it is definately harder than you make it look.
Can someone show me the error of my ways please?
I am trying to build: and so far have :

any help is much apprecaited
(18.11.2004, 10:55)

also just noticed that my attempt above doesn`t scroll. I want the whole page to scroll in content goes past window. I think it would be ok to build fixed but I`m trying to resize for browser which is causing problems.
(18.11.2004, 11:16)

Your're a freak! Sick boy ;)
(18.11.2004, 11:35)

Please get your facts straight, I'm a sick OLD MAN ;o)
(18.11.2004, 12:20)

Is it possible to make a treeview navigation via css similar to this: navigation/ category-menus.html??
(21.11.2004, 20:03)

Slippers: I am afraid that I do not have the time to answer questions at the moment. However if you visit you should get an answer pretty quickly.
(22.11.2004, 09:36)

call me al:-
Hey Stu(If that really is your name!)
Great site and marvelous inspiration.
Won't harass you with questions. Mainly because I won't understand the answers.
Keep up the superb work!
(23.11.2004, 23:28)

Thank for all the help Stu. Great resource! Ran into a layout problem (single fixed top menu bar & single long page with anchors: up graded from frames, now anchors hide under the menu) - can I ask you for help?
(23.11.2004, 23:53)

Stu (my real name):-
Ian, if you could post the URL of the page I may be able to take a look.
(24.11.2004, 07:55)

Hey Stu, wasn't sure you'd still be replying.
Thanks again for the inspiration! I was wondering if I could put a link to your site on my site? Thought it prudent to ask. Just want to put great links on, and as far as CSS goes, you're site is one of the best resources I've found.
Also if you're looking at stuff, how would I go about making the 3 boxes on the right of my header floaty and tableless?
It breaks in Firefox but I've only just seen the light as far as that browser is concerned.
If you can help gr8, if not then gr8 :o)
(25.11.2004, 19:44)

alzco, a link would be nice thank you. I think your floating boxes could be done with just one div. Try to avoid absolute positions if posible. Have a look at to see one way of doing it. Hope this helps.
(25.11.2004, 21:56)

Thanks Stu! I am in awe at A: your ability and B: Your down to earth contactability and respondingness :o)
Yes that helps and you rock!
Sorry my badly in need of an overhaul site is at < is very old and will be replaced with very very soon :o). Then I will use the design you so fantastically fixed for me.
"Just for once I wish someone would call me sir, without adding you're making a scene"
(25.11.2004, 23:26)

Your welcome sir.
(25.11.2004, 23:42)

John A:-
I am a noob. I have been searching for this info and cannot seem to find it. It also appears to be something that is glossed over, or maybe it can't be done. Using just CSS, how do I include a menu on all of my web pages without duplicating the menu code on each page? I'd like to have just one file with the menu to make my site more maintenance friendly. Also, how would I create an image with text wrapped on the right side of the image? I've seen the drop cap example. Would it be similar to that? I am getting frustrated with the amount of info out there that sounds great, but is then contradicted by the next source. Is there a definitive source for "correct" CSS coding?
(26.11.2004, 19:33)

John, at the moment there is no method of including external data using just css. You will need SSI or PHP to do this. Your question about wrapping text I assume you want the image in the middle with text wrapped left and right. This unfortunately is not possible. If you just want text on the right then look at The Holy Grill (under layouts).
(26.11.2004, 23:29)

John A:-
Thank you for the quick response. btw forgot to mention that I think your site is awesome and very informative. I've tried using an include statement in the body section to include the menu DIV in your layout 3, but that didn't work. Do you have any examples of this? I've done some php, and can probly put it together, but I'm just trying to keep it simple/elegant.
(27.11.2004, 01:46)

Just a simple php include should do it. Just style yourdiv to hold the menu then use something like ~
<div id="menu">
include ("menufile.php");

and save the page with a .php extension.
(27.11.2004, 12:30)

Hi Stu, me again !
Am loving the new front-end designs.
I was trying to implement your image gallery on one of my pages but due to the positioning everything is looking a tad wacky!
I tried changing the absolute positioning values so on and got it closer, but still messy and wasn't sure why it didn't work in the first place. Also tried using relative pos to avoid absolute but then it got really zany!
Again if you can help, great, if not great :o)
Keep up the great work!
(28.11.2004, 13:54)

Just change your container to position:relative; then you can use absolute positions for divs inside the container.
(28.11.2004, 14:18)

Aha! Closer but still no cigar. I'm not sure why the span is moved down and to the right + bigger and overly visible.
I may have to seek a less elegant solution as I don't want to pester you all day/week :o) Esp if I'm just being stoopid :op
Thanks again :o)
(28.11.2004, 15:09)

John A:-
After changing file name to .php, I get error on first line. If I remove the line

<?xml version="1.0" encoding="UTF-8"?>

The page loads without errors, but then the scroll bar disappears. Also, after making some positioning, color, font, etc - minor changes some of the boxes don't appear correctly positioned in IE. All is fine in Mozilla.
(29.11.2004, 03:39)

John A:-
Never mind I just fig'd it out. Have to echo those lines or turn off short_open_tags.
(29.11.2004, 04:04)

John A, correct. This line will need echoing in php. However, this line at the top of your page will switch IE into quirks mode with a faulty box model etc. so should be avoided unless you require quirks mode.
(29.11.2004, 08:04)

Nice redesign, clean, bright visuals. I'll always be coming back here.
(29.11.2004, 13:15)

Claire {tanfa}:-
Hi Stu,
have been awol for a while and am catching up. I dropped in here to find a redesign (nice!) and those CSS Games are very clever. Well done..
(30.11.2004, 14:00)

Thanks Claire. Love your redesign too ;o)
(30.11.2004, 14:33)

Love the different styles in FF, but I noticed that the navigation seems not to quite switch completely when switching styles. Is this an issue with the style switching function in FF?
Love the misty design!
ps sorted gallery :o)

pps u still rock!
(30.11.2004, 18:52)

Alzco, there is a bug in FF in that you need to redefine ALL the default styles in the new style or it will remember the default even though you have specified an alternative style. FF should really forget the default style and just load the new one. I have now corrected this.
(30.11.2004, 20:54)

John A:-
After modifying your layout 3 - colors, fonts, positions, etc - for the second time, my page looks great in Mozilla, but my left and head sections do not appear in IE. This happened before and I thought I knew what caused it - guess not. Can you give me some ideas as to what causes that? Is page design supposed to be this painful?
(03.12.2004, 19:54)

John A, can you post a url for your page. It is difficult to diagnise the reason without something to work on ;o)
(03.12.2004, 20:45)

John A:- What I'd prefer is to have the head and foot across the entire page, and the left and content sections between them. Image needs to appear to cross the head and left sections, and the head text and tag line or sub-head text to be centered with content. Keep in mind that the links do not yet work, and that this is still a work in progress. I'm assuming you'll need the style sheet, so I will update the page shortly.
(04.12.2004, 21:49)

#head {z-index:10;}
#content {z-index:5;}
#foot {z-index:6;}
This should get the basics working correctly.
(04.12.2004, 22:55)

John A:-
Thank you. That got my heading back, except I had to reduce the height so the text in the content area was visible. Original intent was to overlap the content onto the header so the image within the header wasn't chopped off as it is now. I guess thats not the way to do it. Can you please suggest an alternative?
(05.12.2004, 02:32)

Looks as though you have sorted it. Take the image out of the header and put it into the body.
(05.12.2004, 09:03)

Fruity. Now that's a nice redesign :o)
Very "zen" like.
Excellent work!
(05.12.2004, 22:05)

Took about an hour to do ;o) Plenty more in the pipeline.
(05.12.2004, 22:55)

Rolf André:-
Hi, I really like your site and got a lot of ideas and inspiration. A pleasant surprise were the frequent style changes, introduced recently. But for a few days now I don't get the styles in the Opera browser anymore (even when I chose to switch the style). Is that a known issue with Opera or is anything wrong on my side (I didn't change nothing here). Thanks for any feedback and keep up the excellent work.
(06.12.2004, 08:09)

Hi Rolf, you can temporarily switch on a style using Opera's View/Style. Or you can choose from the list on home page. You will however need javascript turned on for the second method to work.
(06.12.2004, 08:20)

The index page is very simple. But its contents is simply great. I don't know CSS can achieve so many things. It seems CSS can achieve anything if one cares to work a lot on it. Great work. Regards.
(06.12.2004, 13:54)

Nice of that cheeky b****** to rip off your site without credit ! I visit here all the time for inspiration/answers when I'm stuck, and this is the best CSS site on the web, in my opinion (yes, including the Eric Meyer stuff). But when my site goes live, I'll be crediting you !
Keep up the great work - and thanks.
(06.12.2004, 22:44)

Especially when he says "I've spent some time getting rid of those pesky frames and JavaScript and now all I have is CSS." He actually spent no time at all as it is all a direct copy.
Cheers Steve. I appreciate your comments.
(06.12.2004, 23:22)

David A:-
Would like to echo all of Steve's comments - esp. regarding the pirate! My CSS has come a long way thanks to this site and all of it's great examples. Definately opened my eyes. Thanks Stu.
(07.12.2004, 21:53)

Agree with both posts above. That guy has no shame and I don't know how he can sleep at night. Is OK taking inspiration, we all do that, but that's taking it too far!
I mentioned that in my email to him :o)
Keep up the smashing work!
PS what host would you recommend?
(08.12.2004, 18:00)

If anyone is wondering what the last couple of posts are all about, I found this site on the web during a recent search for information. . Remarkably familiar don't you think?
(09.12.2004, 08:03)

alzco, I can't recommend any host as they all have their good and bad points. What can be ok for me may prove hopeless for you. However, I do use Portland Communications who offer packages starting at a free service with no pop-ups (100MB bandwidth) to a full package at about £40.00 per year.
(09.12.2004, 10:25)

Marco Ryan:-
Great site - very informative. I have been searching high and low for a pure CSS horzintal Nav menu, that also has horizontal submenus. Eg an unordered list with each of the list items having 3-4 subitems. I want these to appear horizontally below the main menu items. Any suggestions as to where I can find an example?
(09.12.2004, 16:17)

The only way that I have discovered is demonstrated under 'menus/Cross browser drop down' but it doesn't validate.
It is possible in FF etc but not in IE which doesn't support :hover on anything but links.
(09.12.2004, 22:10)

Great site! I'm in here on a daily basis, checking out your work. Love the latest update with the alternative styles to, but it seems that the horizontal style doesn't function properly in Opera (v7.54) .. or does it ? - Regards from Norway =)
(10.12.2004, 12:18)

Marius, glad you like the site. I have Opera 7.54 and as far as I can see the only difference is that Opera puts in a vertical scroll bar. IE5.01 does not show the :hover state on the main menu but apart from that it should be pretty much the same in all PC browsers (cannot check on a Mac though).
(10.12.2004, 14:00)

Love the way you've styled nav on the horizontal style, t'is utter genius.
(13.12.2004, 17:03)

It all started with the mantis and the hexagons just fitted nicely with all the angles. The style had to be done this way to act as an image preloader. Glad you like it.
(13.12.2004, 17:05)

Thanks for feedback Stu.
Yet again I love the new design. Scrolling horizontally in such a deliberate that another first? Do you think it's a practical and usable layout? I know it's just a style experiment but it is (as far as I know) 100% against the norm. :o)
The nav is genius. Pure genius I tells ya.
Your eye for design is indeed crafty!

Merry Everyone!
(16.12.2004, 17:55)

Horizontal scrolling is probably ok for a single page but I would not think it practical for a dynamic web site. This one was just an experiment to see how it might work.
I am pleased with the navigation as I haven't seen one like this before. Another style on the way in a day or so ;o)
(16.12.2004, 20:13)

IE 6.0 XP SP2 style switching does not work for me, any clues?
(17.12.2004, 04:39)

Works ok on all systems I've tried. The only possible answer is that you have a problem with javascript.
I am looking into a javascript rewrite at the moment.
(17.12.2004, 09:48)

Ok. I have rewritten the style switcher routine to make it simpler. I have not been able to test in IE5.x so any feedback would be useful. This one works using just ONE line of javascript for the switching (the rest is cookie information)>> document.getElementById('default').href = "style/"+s+".css";
This is perfectly valid and works by giving the stylesheet link a unique id then updating at run time using the stored cookie information.
(17.12.2004, 14:22)

Thanks Stu: I guess you know you can download IE3, 4, 5 and 5.5 that run locally without affecting your installed browser...very useful for testing, will post the link if I find it or can email a copy if ya need em.
(18.12.2004, 08:21)

Hi Uts, I guess it now works for you ;o) . I have IE5.01 and IE5.5 running on this PC but for some reason the style switching doesn't function since I updated to SP2. It works on my PC at work though.
(18.12.2004, 13:11)

Stu, I followed the link on wow-factor to your imitator's site. Looks like he's changed it but there's a message in the css file...
"In case the style nazis at Stu Nicholls are reading this site..." The man's an arse!
(18.12.2004, 17:39)

Interesting, with IE 6.0 XP SP2 now I get the fishy (default) theme applied (was not before) but style switching does not select any other style...sounds like an SP2 issue :-(
(18.12.2004, 18:13)

@Luca - cheers, I will put this down to his ignorance. All I asked for was a credit for the style he was using.
@Uts - I have IE6.0 XP with SP2 and it works ok.
(18.12.2004, 18:24)

As far as I can see my versions of IE5.01 and IE5.5 are setting the cookie but not reading it so the default theme is shown. As you say, this is probably an SP2 thing.
(18.12.2004, 21:24)

stu what text editor(s) do you use?
(18.12.2004, 22:01)

caesar, if you mean for xhtml etc then it has to be EditPlus from
(18.12.2004, 22:35)

ya editplus is nice, i'm curious because i'm looking for another program. do you do any server-side coding? if so which editor for that?
(19.12.2004, 04:49)

caesar, I have a general knowledge of php and again use editplus. I check this locally using EasyPHP which comes with Apache server.
(19.12.2004, 13:17)

Brilliant redesign again. :o)
(21.12.2004, 11:43)

The best CSS site I've seen so far. I'm in awe!
(22.12.2004, 15:04)

rss please .....
(24.12.2004, 16:00)

Marje, I'll see what can be done with my limited knowledge of this ;o)
(24.12.2004, 16:24)

Stu, i'm curious as to why you have 2 icon links in your head, what is the difference between rel="icon" and rel="shortcut" ?
(26.12.2004, 20:07)

t1m, this is to satisfy the various browser requirements. I think that I read this somewhere on the web (do a google search). IE6 doesn't need a link, just a favicon.ico in the root directory I believe.
(26.12.2004, 20:32)

Stu please !!! :) stop the designs ! :) it's great, but one thing is great on this site, it's all the hacks, tips and imagination you have to create layouts, menus ... :) Go ON !
(27.12.2004, 11:19)

Rod, the new styles also contains tips and hacks especially the main menu styles. I think I have run out of ideas for a while anyway :o(
(27.12.2004, 11:42)

michael singer:-
...this doesn't work in browser x version y though...
...this works only in browser x and y, but not in browser z...

yes, you're right, it's nice - as a playground, but not for production use!
wishful thinking...
i think we'll have to wait another couple of years and browser generations until this dream comes true.
(28.12.2004, 15:21)

Michael, you're right, but the more we attempt the better we get. However, I believe that some of these ideas are suitable for production use.
(28.12.2004, 15:57)

Not a big issue, but just to let you know. I'm running windows on 16bit, and when i hover a menu button (blocks style sheet) the gray background is slightly darker than the original background. Anyhow, I really like the new layout Stu, best yet imho.
(30.12.2004, 06:06)

Also, if your looking to set up a rss/blog on your sites main page, I suggest which is a nice little semantic publishing tool.
(30.12.2004, 06:09)

Cheers t1m, I will investigate.
(30.12.2004, 10:05)

menu buttons fixed ;o)
(30.12.2004, 12:37)

Stu, did you get your style switcher from or is it different? so all i need is your javascript and some alt style sheet link elements in my document head?
(02.01.2005, 03:08)

T1m, the style sheet switcher is mine. I have not seen it done this way anywhere else. You don't need the alternative styles just the rel="stylesheet" with an id="default". The javascript searches for document.getElementById('default') and changes the href (and sets a cookie for next time).
Take it if you want it.
(02.01.2005, 08:51)

Roll on micropayment - If there was a charge for the work and time spent on your site I couldn't afford it. But I'd sling something reasonable in a tin just out of appreciation, and being the web, and if micropayments come to pass, that's a lot of slings in the tin I would bet, almost a living.
Thank's for the insights and work. Much appreciated.
I can pay with laughter though - maybe? visit
(05.01.2005, 23:34)

Penelope (Pen) Frey:-
Just discovered your site, and although I'm sure you hear this all the time, I just had to drop you a line and say: FABULOUS site!!! I'm sure I will spend hours here learning new tricks. Thanks so much for posting such a valuable resource for the CSS community.
(06.01.2005, 21:58)

The Architect:-
Hello Stu. First, congratulations. Your site is my first CSS reference guide ;-)
What about some tricks with text? I mean, some kind of effects like shadow, or some [H1] with some effects, in CSS. This can't be done by filters because Windows XP ClearType smooth messes up the shadows of filters =(
Keep on the good job (and yes, I'm using on production, and I'm very happy in doing ASP.Net compliant with a lot of browsers) ;-)
(09.01.2005, 19:58)

Hello Stu, hope you can reply to this. Im a newbie to CSS im afraid and IE is really winding me up >( Ive tried to get your photograph slide show working in IE but to no avail, it works fine with firefox, but not IE, the pictures when hovered over, appear in the actual scroll section, over the other thumbnails, have i got my divs all messed up or do you know where im going wrong? any reply would be appriciated. wicked site by the way, defo in my bookmarks. Thanks in advance!
(10.01.2005, 15:05)

Paul, difficult to say what is wrong without a url.
(10.01.2005, 15:09)

Wow, quick reply, thanks. Well, no URL as of yet, im just trying to get the slide show working on its own, im just gonna have to do some overtime with this CSS! not that thats a bad thing, CSS is pretty darn cool to learn, especially when you realise how short and sweet the coding can be. (can't the w3c sue Mr Gates or something! coding can be taxing enough, let alone having to accomadate for Mr Gates! as a new web coder, you realise how badly IE handles code, its amazing!) Oh well, thanks for your reply and your site ;)
(10.01.2005, 15:38)

Just discovered this site, excellent.
Cutting edge, inspirational.......could say a lot more, but have no time for writing......must absorb what you have achieved here. Will write again, when I have seen everything
(14.01.2005, 13:18)

Hi Stu,

I'm a musician and my little hobby is (if I find some time and rest) webdesign.
I like to say that you are not just a good webdesigner but you are realy an artist!
What you do with css is incredible man!
Regards from Berlin
(14.01.2005, 23:52)

stu, wow. don't stop. brilliant.
(18.01.2005, 12:24)

I found you site some time ago when I was trying to simulate a frame-based fixed top nav bar. You had some great ideas, but I could never get them to work in IE6. Finally went to Flash (which has a neat "transparent"option).

Imagine my delight to return here and see that you have solved the problem! For the time and effort you put into this, you should write a book and get paid for it!!!

Great stuff...
(20.01.2005, 19:54)

steve c:-
Who's the chick in the negative image?
(25.01.2005, 19:19)

Once again. You rule ;)
(27.01.2005, 17:30)

I like how you have rewritten the Style Switcher JS ... but why reload ?!
(30.01.2005, 13:51)

Rod, if you don't reload the page then the style does not become active. Try leaving out the line to reload the page and see what happens.
(30.01.2005, 15:12)

Thanks for the examples and inspiration. I'm trying out the CSS frames page, example Css Frames MK.2 wondering if there is anything to do about IE losing the scrollbar once you resize the browser below a certain width. is this a known issue?
(01.02.2005, 04:08)

Curtis, This is a totally non-standard way of doing things at the moment and, as you have found, there may be problems with it. I do not know of any way round this except to define permanent scroll bars in place of auto (or have content that is fluid).
(01.02.2005, 09:29)

Thanks Stu. The site I'm thinking of using this on is a more artistic one, so we may be willing to deal with that. We would like a static left nav, but I hate to use frames since it isn't even 4.01 strict compliant.
(01.02.2005, 15:05)

It's incredible!!! You're incredible! Thanks for teaching and inspirating me. Best regards from Germany!
(02.02.2005, 12:47)
your CSS drop dowm menus simply rule. i havent find anything similar and here is URL of them, before we integrate them in one portal site.
(02.02.2005, 18:29)

Erwin Heiser:-
This is one slick redesign. Just love it!
(04.02.2005, 18:51)

I consider it my best yet, but am still searching for that ultimate 'cannot be bettered' look. When I find it I will stop redesigning.
(05.02.2005, 16:18)

Stu your work is truly an inspiration to me and has opened my eyes to the world of CSS. May I use you styleswitcher script to change my styles on my personal site?
(07.02.2005, 01:57)

Corey, my style sheet switcher can be used by anyone who visits this site ;o)
(07.02.2005, 07:59)

Stu - I've been following your work for a while. Best CSS usage I've seen anywhere on the web. Keep pushing the boundaries! One thing though - I'm using Mozilla Firefox 1.0, and your cascading menu looks like this:
Just thought I'd give you the heads up.
(07.02.2005, 15:43)

Cheers Greg, this is due to the recent change of style I think. I will correct this asap.
(07.02.2005, 16:08)

Hi Stu - Came across your page in my search (I'm a complete css newbie)for guidance on styles that can help me compile a simple photo gallery. I'm amazed at the breadth of all the useful detail you have here and I'm really tickled to see your "own private zen garden".

I'll look forward to tracking additions / refinements to your page
(11.02.2005, 12:53)

Superb work as ever on the innovative redesign. I will say this though, I agree that you truly are one of the best CSS designers on the web, and although the main page spells it out clearly "work it out...", I think you should write a book. I have read a few on CSS but as much as I love your site and it's inspirational value, I really would like to hear how you think it should be done, and more importantly, why. Just an idea :o)
Keep up the blinding work my good man!
(14.02.2005, 18:07)

Thanks alzco, but I don't think that I am yet qualified to write a book. I'll leave that to Meyer etc. who know it all ;o)
A question on this latest redesign...does it run slowly in FF? Explorer (IE5.5 + IE6) and Opera are very quick with the menu changes but my FF seems to crawl along now (though it was ok).
(14.02.2005, 19:56)

I guess it is too 'over the edge' and radical for FF to cope with...
(14.02.2005, 22:11)

Tim Callahan:-
Stu, the new style (Over the edge) is much different than most of your previous layouts, I was definitely enjoying B&W which i do believe is your best yet, that and Blocks too.

Don't forget new ideas are good, keep it up. ;o)
(14.02.2005, 22:19)

Tim, I just wanted to try something different, a design for left and right handed visitors perhaps.
If you like the B&W best then just select it from the style sheet switcher to make it your default.
(I tend to agree with you BTW).
(14.02.2005, 23:17)

It did run slowly but seems to be racing now in both browsers :o)
And you are more than qualified I reckon. I have seen many CSS resources and you are as much a CSS guru as there is out there.
(15.02.2005, 10:58)

Thanks alzco, mine has speeded up again, must be 'blueyonder' mine host or the gremlins.
(15.02.2005, 11:46)

Hi Stu. The main page is slow again in FF for me. Was OK when I posted from work ao think it must be blueyonder. Grr.
Hey, what's your take on rounded corners with no images using pure css so it's fully resizable? Have seen many examples, but none have had that 'cutting edge' feel.
(15.02.2005, 22:36)
Aloha - just stumbled upon your site and am sending you a big e-hug for such a stellar site.
(16.02.2005, 03:07)

E-hug accepted with thanks
alzco ~ I don't know of an 'easy' method of doing round corners in pure css but I will investigate.
(16.02.2005, 08:17)

Thanks stu :o)
Even your take on the standard method would be nice.
(16.02.2005, 20:19)

Hi Stu,
thank you for you fabulous Photograph Galery MK.2.
I use it on my website and but it works not with all browsers.
I tested it with IE6 and Firefox 1.0 and it runs ok. But with Mozilla 1.5, Netscape 7.1, Opera 7.54 it does not run.
What is the reason for that. I would like to fixed it because in my future work, I will programming every website only with css.
(20.02.2005, 15:24)

Schimmi ~ this gallery should work in Mozilla 1.7. But the other browsers are not able to handle the css (this is stated in the demo) sorry. This is what you get with cutting edge css I'm afraid.
(20.02.2005, 16:00)

The Narrow stylesheet is truly astounding, I love it!
It must take a lot of planning to design the markup so that it can be so freely repositioned and restyled by the CSS.
(20.02.2005, 19:25)

That's the beauty of css. The html is very basic with just link list and divs (see the text only style). With this simple set up you can do just about anything using css.
(20.02.2005, 19:56)

call me al:-
Hey Stu.
I am having a problem with this page in FF. The top row of links with the mini in seem to have an extra pixel that doesn't show in IE or in the bottom row. Also the div itself won't centre. Any help if you've got a minute.
(21.02.2005, 21:06)

cal me al ~ to center in FF use #cars {width:450px; margin: auto;}
to get rid of the extra 1px (FF is correct - IE is wrong) change the height of #cars dd a from 150px to 148px (you have ADDED a 1px border which takes the total height to 150px). Hope this helps
(21.02.2005, 22:20)

call me al:-
Thanks Stu :o) You are SO the man!
I don't know where my #cars div went and for some reason didn't think margin difference would apply with a: tag
Thanks for your continuing wisdom.
(21.02.2005, 23:22)

Hello~ Would you be willing to grant reuse authorization of the water drop picture?
(23.02.2005, 18:14)

cyndi, just let me know the url and you may use it.
(23.02.2005, 18:37)


Your homepage is SO cutting edge, that it's a completely blank page in Safari 1.2.4 (v125.12), running on an iMac G5 with OS X 10.3.8.

What gives ?
(24.02.2005, 14:13)

Peter ~ which theme are you using? None of them should really cause a problem.
(24.02.2005, 15:03)

Stu just found your site - where have I been? You have just opened my eyes fully to css - where do I go from here? Back to the drawing board.
(25.02.2005, 01:34)


I can only post this comment by searching for the link in your HTML source of your indexpage. I'm now looking at a black left sidebar with a photographic negative of a female head & shoulders at the top. As for the theme of your indexpage ( if that's what you mean ) I can't tell : it's completely blank.

My Safari setup is absolutely standard except for these : pop-up blocking is enabled and I'm using PithHelmet ( adblocker ). I'm a 20 year Mac veteran and an longtime websurfer, so I know my way around, but your site has me completely baffled, I'm sorry to say.

Have you tested your site with Safari ?
(25.02.2005, 12:51)


Please disregard my comments above. After drawing two blanks your indexpage now loads fine. I'll never know what happened earlier ;(

I must apologise unreservedly for somehow inferring that your coding had something to do with this. I'll now be able to enjoy the fruits of your hard labour ;)

Regards from The Netherlands,

Humbled but happy ...
(25.02.2005, 12:59)

Peter ~ enjoy ;o) glad it's working...
(25.02.2005, 21:29)

I don't think your anti-spam emnailadres is nice. It's not clickeble, and if I copypaste it in my emailapp than it shows up backwards. You can encode it usiong Javascript (clickable) or you can insert it using content-property (emailadres is in the external stylesheet).
(28.02.2005, 17:22)

NeefRoel ~ content-property does not work in IE and this is a web site dedicated to CSS so javascript is not allowed. If you don't like the method then don't use it, it's your choice. I just give visitors an alternative method to javascript.
(28.02.2005, 20:18)

Hey there Stu, neat site. I've found a few quirks with your photo gallery demo (menu/gallery.html) using Firefox 1.0 on Linux. It seems that if I click on an image to lock it in the display subsequently mousing over images which come before that one will not change the display. Cool stuff, nonetheless!
(02.03.2005, 21:37)

Hi Jon, this has been ponted out in the gallery comments. I have shown how to use hover and click to change the images, but would suggest that an actual gallery would use one or the other (but not both).
(02.03.2005, 21:45)

I haven't checked all 200 previous comments, but have you noticed that your e-mail harvester "reverse hack" doesn't work in Safari?
(03.03.2005, 06:14)

Yup, it has been mentioned a few times. I am unable to test on a Mac :( and I believe a few of my demos/layouts are too cutting edge for this browser. I have an apology on my home page for any demo that doesn't work on certain browser/OS combinations.
(03.03.2005, 07:51)

Love your site, Stu! May have to steal some of this for myself. ;)

I was playing with your "A CSS Image Map" demo and noticed that you use additional image slices when hovering over the links. Do you think you can replicate that style used in the Snow White example without the addtional images?
(04.03.2005, 13:01)

Stu: First of all, this is a grear site. The menus are most helpful.

Question about your CSS Frames. I noticed I cannot use the page up/page down keys or the mouse scroll to move the scrollbar. Is this a consequence of having 3 overflows?
(04.03.2005, 17:50)

Stephen, you must be using FF or Mozilla. These browsers have a scrollwheel bug which should be fixed at the next major release.
(04.03.2005, 18:55)

The NEW 'Ransom Note' style sheet has been added to demonstrate yet another way of styling the main menu. This is all done with css on a standard html unordered list without the use of 'spans' or img tags.
(04.03.2005, 20:45)

I was admiring your handiwork with the curved corners, and then I loaded the page in firefox under linux. Yikes, what happened? It looks really bad.
(04.03.2005, 23:34)

Stu, thanks for that information. Yes, I am using Firefox 1.0.1. Neither Page Up/Page Down or mouse scroll work. These work fine in IE6. I have to wait until this bug is fixed before I implement it, so as not to anger any FF/Mozilla users. It would be a bad UI experience for them.
(05.03.2005, 02:27)

Stephen, FF have known about this for some time and many bug reports have been raised. They have promised to fix it soon (next major release this month I believe).
(05.03.2005, 08:39)

Stu, thanks for sharing all of this. It's much appreciated. Something you're doing (sorry for not being able to be more specific) is getting Safari (1.4.2) hosed. Usually when I go from one of your examples back to the home page the home page won't display (I get a plain white display even though "View Source" indicates the page has loaded). Clicking on a new style link on the home page can trigger the problem. Sometimes I get the new style, sometimes I have to do a reload to get it, and sometimes I just get a blank page even after doing a reload but can use my browser "back button" to go back to one of the example pages, hit the "home" (up arrow) link and get back to the home page and it's displayed with the new style. Wish I could pin down the problem for you but Safari isn't reporting any errors with the pages that don't display correctly.
(06.03.2005, 03:17)

Peter, I think that Paul had a similar problem with his set up (about 12 posts back) but his cleared up for no aparent reason. I am afraid I can't help as I do not have access to Mac/Safari. Perhaps someone else can throw some light on this.
It could ne the javascript style switcher, but I doubt it.
(06.03.2005, 09:16)

call me al:-
Hi Stu, love the new style. Is a bit slow in FF, could be the rendering/amount of animated gifs(which are an excellent touch btw).
(06.03.2005, 13:26)

Hi al, I have found that this is due to the body background image being 'fixed'. FF appears to have trouble with fixed images and scroll speed.
(06.03.2005, 14:10)

Hi Stu,
I am a Digital Media student and I LOVE your site. I've told everyone in my program about it, and they've told two friends and so on....
I have linked to your site from my portfolio because I wanted to give you credit for the photo gallery. I hope that's okay.
(09.03.2005, 17:41)

Terri, certainly is ok, thanks.
(09.03.2005, 18:59)

Thanks, If you'd like to see what I've done with your code:
work in progress...
(09.03.2005, 19:22)

Terri, looking good.
(09.03.2005, 20:43)

Tim Callahan:-
Terri, that's great you've used Stu's photo gallery technique. But to copy his layout (particulary the styles sheets: rain & misty) is a whole other story. Try having some of your own ideas, it may pay off in the long run.
(09.03.2005, 22:02)

Tim Callahan:-
Oh how cute, your markup even resembles Stu's ;o)
(09.03.2005, 22:05)

Paul Pomeroy:-
Stu, was your 06.03 message to Peter intended for me (Paul)? Well at least you didn't call me Mary. ;) No Mac? Not even a Mac mini? Sad.

In the "for what it's worth" category: for an interesting alternative to flashing gifs, see: (Design Musings #1). Zero code, one tiny image. And it can even track eye movement!

[In strict accordance with the Truth In Sharing Act: the link is to my weblog.]
(09.03.2005, 23:14)

Hi Paul, sorry about the name error. No Mac at all, sorry.
(09.03.2005, 23:19)

Hermann Klinke:-
Hi Stu,
I like your site. Could you please provide a RSS or Atom feed to feed my feed aggregator, because I'd like to stay 'cutting edge' and that's the only efficient way!
(10.03.2005, 14:44)

I have been looking at your basics 2 layout. Can anchors be used on the page? The link will put the anchor at the top of the page, ignoring the padding!?!
(10.03.2005, 19:31)

I would have never believed that this much was possible using CSS - You have prompted me to dig deeper, and learn more - what tool do you use to create the CSS with? Do you have a tool?
(10.03.2005, 20:06)

Dav, give them a try and let me know.
(10.03.2005, 20:40)

codputer, glad you have been prompted to learn more. As to css tools, no I don't have any. All I use is a text editor and hand code everything.
(10.03.2005, 20:41)

Wow, awesome. Hey, where are my socks?
(11.03.2005, 07:59)

nah stu, anchors don`t work. The anchor link is selected, drilling the <a name> tag to the top of the page, which is behind the header layer.
(11.03.2005, 20:23)

Bjarne D Mathiesen:-
you've got a meta tag that says the content should display as application/xhtml+xml. Problem is, this meta tag is overridden by the Content-Type the server sends which is text/html. Result: your page is actually just rendered as html 4.01 as the Content-Type sent by the server takes precedence. You'll need to tweak your php.ini file (if allowed to) or explicitly set a header on your pages in the php code.
(13.03.2005, 04:14)

Bjarne, if I could I would, but I can't so I don't. I just do this so that I can validate the pages as xhtml 1.1. The arguments for and against this are endless. But I choose to do it this way.
(13.03.2005, 08:36)

Howard Rogers:-
A wonderful resource, so thank you very much. I just turned a graphical monster of a site into a svelte CSS-only one thanks almost entirely to your excellent examples. I hope I haven't infringed your copyright in drawing on your work. Please let me know if I have ( You get an acknowledgement, by the way, in the 'Other Bits' page.
(13.03.2005, 19:43)

No infringement as far as I can see Howard. Good luck with the site.
(13.03.2005, 20:03)

A most remarkable tour de force. What you have done will be invaluable to me. By the way, I have found it easier to use p's rather than ul's for menus.
(14.03.2005, 20:30)

I am a complet newbie in CSS. I have adapted your photograph gallery N°1 and it works pretty well, the only problem is that I would like to have the thumbnails under the full image instead of high top like in your gallery N°2. What to do ? Many thanks for what you are doing here.
(16.03.2005, 22:27)

Hi, I found your site through a link from your article on flickerless rollovers. I really enjoyed it, some of the best instructive writting that I've seen on the web.

I was inspired to test out your code on my own and I discover that there was a pretty yucky problem with IE5.2mac. The <li>'s were stretching across the screen!!!

I fixed it (in IE5.2mac) by assigning width to the <li> also:
/*IE5mac*/width: 150px;
/*OTHER*/width: auto;/**/
(22.03.2005, 02:29)

Thanks Mike. I often wish I had a Mac for testing purposes :(
(22.03.2005, 08:19)

stu, excellent site!
Is there any way to make the css changer sticky across pages?
(24.03.2005, 16:19)

Lex, all you need to do is call the same javascript routine on every page. But I have only used this on the home page. All demonstrations use the black and white style. I may get round to redesigning the whole site one day.
(25.03.2005, 19:19)

Glad to see you're using Alex's comment script.
(25.03.2005, 20:22)

A great resource. I had given up on static headers etc. I think there is a glitch on the body 4 page as follows: " background: url(clouds.jpg) #000; background-position:0 0;"
I don't think the #000 is right, I bet it should have "background:" before it.
(26.03.2005, 09:38)

I think not ;o) It is possible to group background style together so this could have be written as
background:#000 url(clouds.jpg) 0 0 no-repeat;
(26.03.2005, 11:31)

Why does the title of your page contain this string? __________________________________________________ etc.

When you're citing a page by title (as and some scripts do), it breaks the page layout. It's also not good design practice in general.
(28.03.2005, 06:02)

Hi Anonym ;o)
The main reason was to move the browser name away from the title. But if it causes problems to my visitors then it is gone. You will now see the browser name next to the page title.
BTW there are millions of pages with query strings a mile long on the web.
(28.03.2005, 09:05)

Hi, I try to make a kind of thing like your Rainbow example described here: In fact I need to make appear colored the reactive zone of a image map but after make a lot test I dont see how I must do that...Please can you tell me a way?? For example if I have follow code: <img src="image.jpg" width="196" height="169" border="0" usemap="#Map">
<map name="Map">
<area shape="poly" coords="55,72,97,36,144,55,117,129" href="link1">
<area shape="circle" coords="41,131,34" href="link2">
</map> How I must use this code and your rainbow code ? Thanks in advance for any suggestions...
(29.03.2005, 01:37)

dotcom22, sorry to disappoint you, but what you want is not possible using css. The css image map can only use rectangular areas. Circle are not possible. The rainbow is done using overlapping rectangles so that the outside edges only are visible. Your only way in this case is to stick to the normal method.
(29.03.2005, 13:56)

I saw this mentioned a while back about anchors on your asic layout example. Because of the padding used to move the content down below the header, an anchor tag won't work on the page. I tried adding margin-top to my anchor tags to make the anchor appear to be at the top of the page (ie. beneath the header) but no joy. Has anyone found a fix for this?
(29.03.2005, 15:40)

If you just want to jump to the top of page then this works. I will put up a demo to explain how. If you want to jump to a specific place then you will need to place the position higher up the page to allow for the padding.
(29.03.2005, 16:21)

aie to bad !!! what you mean by normal method ? I dont have find any solution for simply show the reactive zone with a specific color when is in rollover...
(29.03.2005, 19:37)

dotcom22, the normal method is an imap without any hover effect. I have put up a demo here
of the nearest that CSS can do. This is very basic but gives an idea of it's capability.
(29.03.2005, 20:57)

Anchors now added to the Basic2 layout demo.
(29.03.2005, 21:06)

thanks a lot for your demo !!! Now I see how it work and also unfortunatly the limitation. For each zone you have set a specific image and after you have set the css coordinate for match into the layer. In fact I need that for apply in many geographical map images and the reactive zone I need is totally irregular shape and not simple circle or I will take to much time for setting this with your solution...I plan to use a different method like to make appear in rollover a new full image (with the zone colored I want) each time the user point the mouse on to reactive zone of visible image...So If I have 3 reactive zone on my map image I need to set 3 different image....So please what is the method more adapted for do that? Is not necessary to use CSS but after take a look of any existent javascript I dont find any script making this with more image...only the classical rollover script with 2 image...So CSS must be the solution...thanks for your time..
(29.03.2005, 23:48)

ok in fact is not take to longer longer for make the solution you suggest. I get just a little can see my test here: As you see the 2 region at bottom are rollover in green but when I stay to one zone the rollover are not made correctly because the image is not correct for sure because the layer are a rectangle and not cut equal to my image like a map reactive zone...So how I can solve this problem ?
(30.03.2005, 01:13)

Have a look at this which is done using CSS based on my styling. The only way you can improve yours is to layer the smaller area on top of the larger area.
(30.03.2005, 07:57)

I have a things to ask you about possible job if you are interested....please send me your email....My is: dotcom22<at>
(30.03.2005, 13:05)

I have a question about all your fitted doors/Snazzy menus. How do you center them on a page? I've been trying to use margin-left, margin-right, and text-align to center the menus in the middle of my page, but it refuses to center. See

The red border is the area where you menu would occupy (height = 20px).

Any ideas?
(02.04.2005, 21:27)

Stephen, this is a problem with any floated div. The only way to center this would be to give the a width (something like 38.4em).
(02.04.2005, 23:15)

Stu, that worked. Thanks. But only your spans are floated in your menus. Were you referring to floating elements of any kind?
(02.04.2005, 23:52)

Stephen, any floated item is taken out of the normal flow. Putting a container around it will have no effect unless the container is given a size (width/height). Once this is set then you can position the container where you want.
(03.04.2005, 00:05)

Stu, thanks for that. So that is how floated elements work. I had a floated element inside a "width: auto" DIV in a previous project, and I was wondering why that floated element never stayed inside the DIV. Thanks for this tidbit.
(03.04.2005, 02:55)

Hi Stu, love your site, it is a great service to all of us trying to figure out CSS. I have a quick question, is there any benefit to using a definition list for the markup vs. an unordered list on your image maps?
(05.04.2005, 20:12)

There are a couple of benefits.
1) You don't have to get rid of the bullets.
2) A definition list has dl, dt and dd tags that can be styled.
(05.04.2005, 20:51)

Thank you for the speedy reply. Just found your "puzzles". Unbelievable! Have you considered donating your brain to science?
(05.04.2005, 23:40)

Marvelous site! I have learnt a lot from your site. However, don't you think that if you have a tutorial sections, it would be even better because you can help millions of other people who are stuck in CSS with some lousy books.
(06.04.2005, 00:21)

Stu, great work! I've been visiting here for a few years now. Today I was looking for the hack to obscure the mailto: define that I thought I saw here before, the one that makes bots read it backwards. Please post it again.
(06.04.2005, 04:55)

Eric, what is left of my brain after all this css has been left to science in my will ;o)
(06.04.2005, 07:57)

DaveCKW, I have started writing freelance for and they are publishing a series of tutorials based on demonstrations on this site.
Flickerfree image replacement and image maps have been published with another to come in a day or so (well worth the wait).
(06.04.2005, 08:00)

Terry, Demos > hiding emails is probably what you were thinking of. But this does not hide the mailto:
You are probably better sticking to javascript for now (until :before and :after are standard in every browser).
(06.04.2005, 08:02)


I've see a great works around here... Respect for content and for site.

Where is your RSS... to book this... (excuse my self for my english)...
(06.04.2005, 09:16)

howbizarre, no rss yet for this site. I am thinking of a complete redesign at the moment which may include rss.
(06.04.2005, 10:13)

much of your site doesn't work in safari. you might already know this - and you might not care, but safari is a compliant browser, and the Mac platform is home to a large percentage of the world's web design community.

i've seen links to your site before. thought the headline was interesting enough to click on the link, but went away b/c i couldn't view anything. when browsing for pleasure i use safari - its the fastest, most secure and most elegant browser available to Macs. I use firefox when coding and developing new designs, and your site works in FF on the Mac, but perhaps you could reconsider your reasons - and code for safari as well. much appreciated. good site, BTW!
(06.04.2005, 17:56)

Hi scott, as I have pointed out many times on this site, I do not have access to a Mac so cannot test on this platform. If I could, I would.
(06.04.2005, 18:46)

howbizarre, as a temporary method I have 'hand crafted' a rss2.0 feed here
. As this is hand made I would be grateful if someone could test it out to see if it is ok.
Ta ;o)
(06.04.2005, 21:05)

Hi Stu
I've take a screen capture ( to see how your RSS looks in "Sage" for "Firefox"...
And.. looks like working normaly.
(07.04.2005, 10:00)

howbizarre, thanks for that. I will continue with this method for now and add new pages to this feed as and when produced. Hope this will do.
(07.04.2005, 13:07)

Wow this web site us amazing, I've been looking for a css switcher too! - but I need to be cheeky and ask if there is a get around for the following problem. the css switcher doesn't work for me if I use internal page links (i.e.,name="here" #here stuff). After an # linkis used the switcher stops working - is there anything to be done?
(08.04.2005, 09:36)

Your cross-browser drop down is great. Is there any way to add a sub menu to the drop down without using javascript?
(08.04.2005, 17:18)

FYI, the tabs in the Fitted Doors menu flicker in IE6. It's as if the image is being loaded from a server on each mouse over and mouse out. If you move the Anchor tag into the innermost Span tag, you can avoid this effect. Thanks again.
(10.04.2005, 18:03)

really really great!
(10.04.2005, 22:53)

i am really impressed with your abilities... on my quest to become a css jedi, i have apparently found my css yoda. in fact, i don't know if you're a fan of domain aliases, but i looked up (as well as,, and a bunch of others...) and it's available. you might want to register it, as it is very applicable to your site. anyway, thanks for the inspiration. i've been working with css for a little over two years, now, and i'm always impressed when i see something like this.
(10.04.2005, 23:14)

call me al:-
Hi Stu
wonderfully coloured and rounded new redesign
am enjoying the "cascading" of the style to all other pages
excellent as ever
(11.04.2005, 21:16)

Hi al, still requires a little more work, but I think that it will be a big improvement on the previous layout.
(11.04.2005, 21:36)

Tim Callahan:-
Stu, I now have a live bookmark in FF using your new xml feed, great job, thx ;o)
(12.04.2005, 23:33)

Ok Tim, glad it's working ok. I will update this by hand (the same as I do for all the pages on this web site).
(12.04.2005, 23:41)

Tommy the kat:-
Mr Nicholls, your site is simply amazing and incredibly informative! I'm slowly trying to learn CSS and would appreciate some book and online resource recommendations.

(12.04.2005, 23:42)

Paul Lamach:-
Stu: Great job....I can't wait to see whats next!!!! I don't know if it's been done, but I make circles in CSS using just DIV.....and of course ovals.....I seam to have no problem with larger circles, but when I get down small it doesn't work.....looks like a default height is taking over. Thank You for all you've taught me.
(14.04.2005, 20:38)

Very 'cutting edge' CSS and useful too.
(14.04.2005, 22:06)

OMG! you've changed it again... luv the look & layout (as always).
(15.04.2005, 09:50)

The old layouts are now buried in the archives complete with style switching should you need them. I now give my permission for anyone to use them. My current layout, however, is not to be pirated ;O)
(15.04.2005, 10:15)

ArtG in VA.:-
You have to be oe of the most inovative poeple I've ever run into on the Net. Your a credit to all working with (X) HTML and every other type of coding out there. I have implemented some of your idea's with my own and have has some outstanding results. I will forward them to you with all my instruction within a couple of weeks. Keep on keeping on---
(15.04.2005, 23:00)

Look forward to seeing them, and thanks.
(15.04.2005, 23:08)

Hi Stu,

Just wanted to say, I think the old layout looked better, the default one. Anyway, I'm going to expeirment with that old layout navigation, if that's okay with you? I won't use it commercially or anything, just for testing, to see what I can come up with.
(16.04.2005, 17:06)

I prefer this one, but it's all a matter of taste.
The old one has a width restriction on the examples with the side menu system (at 800x600 resolution) but it is all yours Zeerus, test away ;o)
(16.04.2005, 17:37)

I love the redesign. I find it clean, easier to navigate, and really visually appealing (but I'm a sucker for bold colors!).

I'm in awe of your site and I've spent a lot of time here over the last few months as I've been trying to learn css/web design in general. You are truly an inspiration for novices like me. Keep up the good work! :)
(17.04.2005, 21:38)

Dear Stu, thank for the site. It has made me rethink my current site and perhaps delve into CSS more and come up with a better site design.

(18.04.2005, 00:09)

Chris James:-
Hello Stu. A great site with some very useful info. I was looking for another image viewer idea and came across you website. At the moment I am playing with the one in your tutorial, but for some reason unable to view the loaded images. I noticed that you have another design using scrolling for the thumnails and it looks neater on the page. Is it possible to obtain the code for this viewer? I have used one on my website for a few years now, but this looks much more user friendly. Many regards.
(20.04.2005, 17:27)

Chris, the style and code for the scrolling gallery is available in the page source code. Just copy this and use as you want. However, this gallery does not work in Opera (and probably also on Mac browsers)
(20.04.2005, 20:37)

FANTASTIC, Luv the new look site - well done.
(20.04.2005, 20:43)

Renee Brunet:-
Hi, I am new to CSS and it is very difficult to start learning it. You have interesting thing that we can make using the CSS. Where can we have the CSS code and html to go with it. Only have a look to your thing dont help beginners. Thanks
(23.04.2005, 05:09)

Renee, the source code for each example will have the style embeded. All you need to do is copy the source code and examine it to find out how it works. I am also writing a series of tutorials some of which have been published already on
(23.04.2005, 11:20)

Thanks Stu. I will have a look of the Web site.
Do you have books also??
(23.04.2005, 18:27)

Yes I have books, but not about CSS. Back in 1980s I wrote a couple of books on Z80 machine code programming for the ZX Spectrum. Not much use now though ;o)
(23.04.2005, 19:43)

Roberto Gattinoni:-
Maybe it's already been pointed out: how is that the CSS box on the Home Page has no bottom border? Can You point out where is the problem (at least in IE 6)? A very great job: surely one of my preferred bookmark for CSS. Thank you.
(26.04.2005, 17:38)

Which browser are you using Roberto? In IE6 there is a border on ALL the boxes on the home page.
(26.04.2005, 18:00)


Just thought I'd let you know that your "frames with CSS" example works perfectly with the new Safari 2.0 (included with Tiger) as well.

A question while I'm at it. Your site is using valid xhtml 1.1. Although your meta tag says "application/xml+xhtml" you are still sending your pages as "text/html" in the http header (causing them to be interpreted as just that). Isn't this in violation of the W3C recommendation?

(27.04.2005, 19:26)

Hi MEMark, thanks for the feedback on Safari 2.0. There has been a lot of discussion on text/html and xhtml1.1 with no satisfactory answer. I have no control over how the pages are sent, this is down to my host. I prefer to code in xhtml1.1 which means that to validate I must use application/xml+xhtml. Using this I can validate my pages (and so can you). I have found nothing 'harmful' in doing this (so far).
(27.04.2005, 19:47)

I agree with you that it's not "harmful", and I've followed the discussions as well. On the other hand many deviations from W3C standards could surely be argued not be harmful, still I personally prefer to follow them strictly. (Thereby using 1.0 Strict instead, since there is no real difference.) But to each their own I guess. Thanks for a great site anyway!
(27.04.2005, 21:35)
I am realy fully positivly absolutly amazingly ASTONISHED !!!!
---- I came "just for some seconds" in the bunch of the Google results on "css", and
---- a) I spent the night HERE, instead of sleeping
---- b) I have learned SO MUCH that I demand not to receive an invoice for the training (could not pay at the real price...)
---- c) I have a splendid CHATEAU MARGAUX red wine bottle for you as soon as you come to Paris
---- d) ... now I may start my personal/professional sites

---- ---- ---- THANK YOU !!! ---- ---- ----
(29.04.2005, 05:58)

My invoice is being prepared as I type ;o) However, I have a special offer on at the moment whereby you get the first 1,000 visits FREE!
Glad you like the site - now get some sleep.
(29.04.2005, 07:56)
a) pleeeeeeeeeeeeeeze forget the invoice (or Im ruined... ok just for TWO CHATEAU MARGAUX red wine bottle, no more)
--- b) I wanna have the special offer !!! I wanna have the special offer !!! I wanna have the special offer !!! I wanna have the special offer !!! I wanna have the special offer !!! I wanna have the special offer !!! I wanna have the special offer !!! I wanna have the special offer !!! I wanna have the special offer !!!
(29.04.2005, 09:17)

ok, ok, ok you've got the special offer. But the wine would also be nice.
(29.04.2005, 09:41)

Your a CSS God.
(29.04.2005, 19:55)
and what IS the SPECIAL OFFER ???
haha I know !!! you make MY personal site !!!
great !!! I could not have a better gift !!! (at last Im gonna be visible...) OK for THREE bottles .. but in Paris of course...
(01.05.2005, 21:34)

Stu your site looked so beautiful I have decided to look closer at CSS-layout.
How do you manage to display such beautiful pictures and attractive Web pages? Is it function CSS or just artistic talent?

I am a novice who uses old-fashioned HTML (per my FSB Sccandal Web site at or

You will note that I use HTML frames so I was intrigued by your research into the use of CSS to produce a 'frames' equivalent.

(02.05.2005, 00:06)

Tim Callahan:-
Stu you can't use an old style with your new redesign. I tried in FF 1.03
(03.05.2005, 17:54)

Tim, you can view the archive home pages from my previous design with Firefox 1.03. Just click on the archive link and select the home page you want to view. This will not become your current home page though as the content is different.
(03.05.2005, 20:46)

I'm realllllly glad I found this page, awesome work!!! I learned a lot here just from looking arounds at most of your tutorials, one thing I did come across though is on this page -- your site/menu/framed.html (I shorted it because I didnt know if html is allowed here) how it was suppose to scroll wasnt working for me. I use Mozilla FireFox, I dont know what version, I'm sorry but then I clicked on the links on the bottom too see what you actually ment and then I understood haha but anyways, keep up the good work! I'll def. be checking back up here to see what is updated.
(05.05.2005, 14:10)

Pauline in Manitoba.:-
I can't tell you how impressed I am. I am on dial up in Northern Canada, and here is a site that is attractive and downloads beautifully in Firefox and IE. I found you through a search for css information, and like somebody else, I stayed for a long time last night, learning a lot. It is bookmarked! Congratulations on work very well done.
(05.05.2005, 15:55)

Only too pleased to help Pauline.
(05.05.2005, 20:31)

Gerard Doherty:-
First visit to your site tonight Stu. Beautiful layout and feel to it. Viewing in IE6. Will delve into css after this.
(05.05.2005, 20:40) in Texas:-
I've been in love with CSS since it appeared and thought I had a handle on it - but you make it sing in ways I never imagined. You may be changing the way people design web sites profoundly; I know I'm tossing out the javascript for css wherever possible now.

I feel like I just discovered my toaster can also balance my checkbook. What a glorious thing.
(06.05.2005, 04:13)

More on the XHTML1.1 front. If you can't set the header then don't say it's XHTML1.1 as it isn't (it's XHTML1.1 valid code with an incorrect content type). Merely validating the code isn't enough as it says in the W3C docs that you don't send XHTML1.1 as text/html. Adding the meta tag means nothing as that is purely a byproduct of when the page is loaded from local storage. If it validates as XHTML1.1 then it will validate as XHTML1.0 Strict (and then the content type can be text/html). The "harmful" bit comes from all the sites that claim to be "valid" when they mean "compliant". There's a difference. A page could be valid HTML4 and compliant with nothing.
Have a look at for true XHTML1.1 sites :)
(06.05.2005, 18:09)

Ho, hum..... yawn ;o)
Quote "In short, some browsers must be served text/html (ie. the default MIME type) to properly render XHTML documents. There should be no visual difference, but you won't have the benefit of the browser's built-in validation when developing, nor that geeky proud feeling that you get knowing you're living on the bleeding edge of browser technology. I suppose however as far as geeks and pride are concerned there are some some that can do without, and some that have plenty to spare."
(06.05.2005, 19:10)

Minor bug I noticed:

In mozilla 1.8beta1 the "now in colour" banner is rendered _below_ the "CSS playground" logo. I don't know enough about this stuff to tell wheter this is a bug in mozilla or your code. It is rendered as intended (i.e the banner above the logo) in IE6. Will only be seen by people with narrow screens, or looking at the site in a small window.
(09.05.2005, 20:59)

hi drbob, thanks for the information. I have added a z-index to the 'now in color' banner to see if that makes any difference. Mozilla 1.7 gets it right.
(09.05.2005, 21:15)

Pete Nicholls:-
Glad I ran across this page! Plenty to digest here as I try to gain some web skills. I do photography( and share the same last name as you. I am originally from Braintree in Essex. TTFN
(10.05.2005, 17:38)

Very, very chastening. I'd no idea that so much could be achieved with CSS nor that I knew so little of how to go about doing it!
The only contribution I can make to this site is to suggest that in a non-fishy, firework environment, the metaphor is probably "damp squib" rather than the much more amusing "damp squid". (It'll just have to put its Mac on? :))
(13.05.2005, 10:36)

Brian, well spotted ;o) I think I will leave it though (just for amusement).
(13.05.2005, 11:13)

The whole site's lovely to look at and the examples are very clear and easy to understand.
Thank you!
(14.05.2005, 18:23)

Tim (
Stu the new design has an organized feel to it, I like it. Keep it up.
(15.05.2005, 02:34)

Tim, thanks. I like this one and it will probably stay for a while anyway. Just a couple of small changes on the way to get rid of the background image and replace it with a fluid one. You need Trebuchet MS to see the site as I intended it, though it still works in arial and sans-serif.
(15.05.2005, 08:37)

Changes done, hope you all like it and, what is more important, I hope you all can see it.
(17.05.2005, 07:50)

Hi Stu, as with your older layouts, will this in-Color layout be available for tinkering now that you aren't using it anymore? One last thing, you say your website isn't one of the "big boys". Are you kidding, your website is very popular. Heck, I only get 500 hits a month and I'm proud of myself, but you get 11 million, that's amazing. Besides, compared tot he other websites I think you're referring to (A List Apart, Stopdesign, Meyerweb, etc.) your website has much better content. Keep up the good work, and I look forward to hearing back from you.
(17.05.2005, 13:22)

Another thing, the link to the Explorer category is broken. It goes to explorer/index.htm when it is supposed to go to ie/index.html
(17.05.2005, 15:24)

Zeerus, thanks for the broken link. This was corrected but has crept back in with the latest upload. I will see to it tonight. My logs show about 140,000 'visits' and 42,000 'sites' per month. As to your question about my old site the answer is yes it is available for tinkering. I have even put the menu as an example for use (see the last 'menus' entry).
(17.05.2005, 16:01)

Do you have the full layout source code available anywhere on the site? I never really looked at it when you first redesigned. I imagine the CSS is huge for that template, with all of the rounded boxes and all. Still, 140,000 is pretty good. My website launched on May 1st and I've had 100,000 hits so far, though most of them aren't unique. For some reason people keep searching for a file called robots.txt on my website. Most likely because I am developing a robot for my forums and they want the source coding.

I've decided not to use my website layout anymore, so this summer I'll be launching a new version, most likely using some things from here. One last thing, what are you going to do about the Mozilla section when IE7 launches. Because IE7 will have more hover support, so there will really be no need for that section anymore.
(17.05.2005, 16:36)

The source code is not on the site anymore, sorry.
'robot.txt is normally associated with search engine visits. I will wait to see what IE7 actually contains before I decide on the way forward.
(17.05.2005, 17:09)

Well, the first Beta will be this summer. Unfortunately it's only for XPSP2, and this comp is using 98 SE, the best Windows OS to date, IMO. I can't wait until I get a Mac. Either that or a comp running Gentoo Linux
(17.05.2005, 17:15)

The worst thing is that we will STILL need to cater for IE5 and IE6 as well as the (hopefully) compliant IE7.
(17.05.2005, 17:25)

Yeah, I forgot all about that. I doubt that every Windows user is going to upgrade to XPSP2 just to get IE7. Hopefully by the time IE7 is released most internet users will have switched to a Mozilla based browser. I've decided to go with Opera instead of Firefox, mainly because of all the security holes found.
(17.05.2005, 17:29)

I doubt that many PC users will upgrade to IE7. Only web designers and enthusiasts will bother. The rest will get it when they buy a new PC. So I think it will be slow to take over from IE6.
(17.05.2005, 18:15)

I was just speaking with my dad and he agrees completely. He also wants me to tell you that he loves your site. He has probably made about 60 pages this year, almost all of them using your experiments some way or another. Well, I turn 15 this year and hope to get a new computer. This computer, like I mentioned, is on Windows 98 SE. My computer, which doesn't have internet, is running on XP SP1. I may upgrade when the time comes just for IE7. Then again, I don't even think designers will upgrade. If they do it will be solely for testing purposes.
(17.05.2005, 19:08)

Tim []:-
Stu I noticed you changed the head image colors to a gray, was it orange originally?
(18.05.2005, 06:14)

Tim []:-
hmm, at a closer look as I sneak around with the handy right click (view image) I see that isn't an image your using for the head. /me searches through Stu's source vigorously to find nothing. Although I have a sneaking suspicion that tells me the last 7 lines of s7u.css have something to do with it ;o)

On another note Stu, I've noticed over time your css has become less redundant, I havn't snooped around your code since the beginning of 2004 and am quite pleased with your use of em sizing as of now. I mean not to say I wasn't pleased with your code a year ago as it goes without saying I have what I think of as a mutual respect for a fellow designer/developer.

Keep up the great work, and I will part on this note: If this site ever dies or goes down (however not implying it will) It will be a sad, sad day. Priceless little resource you've got going.
(18.05.2005, 06:51)

Thank Tim, The header text was a light blue on a background image. But as you have noticed the image has been replaced by those last lines of the css. This enables the layout to sort of stay in shape with increased text sizes.
My css control has got better over the last year and I have changed to em sizes where possible (I am converting my early menus to ems and putting the css/xhtml on the page for all to see). Glad you like the site and I hope to keep it going as long as possible.
(18.05.2005, 09:51)

Hey Stu, when did you add that orange bullet? It gives the website just a little bit more "flare" to it. Also, Tim, I think I crashed your website. I posted a comment about your redesign, and a minute later the database was no longer available???
(18.05.2005, 13:57)

Zeerus, the bullet went on last night (but only on the home page). Also added the 'NOW WITH GO FASTER STRIPES' to indicate that the page loading is much improved. I am still experimenting with the colors so you may see a few more minor changes before I'm happy with it.
(18.05.2005, 14:50)

Are you using a CMS for the website, or do you have to edit specific pages by hand when you want to make a change to them all? I'm looking into a CMS right now, do you have any suggestions for a free CMS?
(18.05.2005, 15:33)

Every page is hand coded using Editplus then tested on as many browsers as I can get hold of. I have IE5.01, IE5.5 IE6, Netscape, Mozilla, Firefox and Opera (all latest versions). No PHP or CGI is used so every page has to be altered for any layout change. My web site is hosted for free by Blueyonder with unlimited bandwidth which is just as well because it has crept up to over 16GB per month now. Unfortunately the free sites do not get PHP or CGI and MySQL is not supported. I have used CMS in the past and have tried several but reckon that Mambo (free version) is the best. It is simple to understand and easy to customise. But, as with all CMS, you are using someone elses code so you really need to understand what's going on before you start hacking it about.
(18.05.2005, 16:00)

Yeah, Mambo was actually the one I was looking into. I was also thinking about using the CMS created by Alex at What's the URL to blueyonder? I may want to look into that. I have a friend on my forums who gives me unlimited bandwidth and upload space along with unlimited email accounts, 99 mySQL databases, and more, all for free too. It's hard to find good free hosts that don't make you link back to them.
(18.05.2005, 16:16)

Blueyonder is the hosting package that comes free with a Telewest telephone and cable tv package.
(18.05.2005, 16:22)

Okay, thanks. I was wondering if I could put this,, up on my website for people to use as a charcter code reference chart?
(18.05.2005, 17:04)

Certainly can, just a link back to this site on your page please.
(18.05.2005, 18:39)

Stu, I've been through wordpress ( although the wordpress community is pretty large/strong, the people involved with and are more of a tight knit group of developers who are very helpfull ( I've learned Textpattern's easy tag system and use output_form tag for including all parts of my documents (, so I have what you call a form that holds my doctype/html/head which is included on every page on my site with the output form tag; same thing with my footer and head/h1 sections.

Note: Wordpress is clustered with PHP tags everywhere.

I'm now remembering you've used Textpattern for a blog. Just make note that it's much more than just a blogging tool. If you need me to send you the latest revision of RC3 1.0 I could easily send it just give me a hollar ( Textpattern makes sections which are married to page template (holding html etc), when creating a new section (and marrying it to a page) it then becomes /sectionname on your site , I think it modrewites the dir there. It's cool. I'll talk to you later. Take care.
(18.05.2005, 21:09)

By the way, my last comment took up the maximum character limit [1200]. I'm thinking Maybe it was more of an email than a comment ","
(18.05.2005, 21:11)

Thanks for the info Tim. I do/did use Texpattern for a blog I started but could not be bothered to keep up. I chose TP because it looked easy to customise. Not sure if I will bother with it again, but if I do I will let you know.
(18.05.2005, 21:21)

It's funny you two were talking about those two programs. Currently I have a blogger account, but when I realised that both WP and TP were free I decided I might go with one of those. Which do you suggest using. I want a blog that's easy to manage, allows me to use my own template, and has a comment system to go with it. Which do you suggest?
(18.05.2005, 21:35)

Textpattern is much easier to manage tag wise. Simpley, you don't need php tags everywhere, just a few tags to show articles, and you can just manage static templates of html documents with the page section.
(18.05.2005, 23:42)

...When I say "just a few tags", I mean <txp:article /> which will display articles on your page/template that you write. Then you make a form for articles and use it to display the way you want your articles to look.

Then there are tags like
<txp:title />
<txp:excerpt />
<txp:body />
Which when used with an article form; their function's are self explanatory.

Good luck.
(18.05.2005, 23:48)

okay, thanks. I'll definitely look into it. By the way, your site is pretty nice. I posted some comments earlier...
(18.05.2005, 23:58)

One of the things we've been trying to accomplish here is a CSS-based "pull up" menu -- Imagine a recipe box, but the header of each card is pulled up enough to view the name of the recipe -- and then when you hover over one of the titles, it pulls the card up so you can see the whole recipe, and then when you mouse out, the card falls back into place.

In this case, my recipe cards are divs with messages, and the last card is completely showing...

I used a modified version of a css-pull down, but the problem i had was that when a menu raised, it pushed down the lower elements -- as well as raising the hovered menu.

Any ideas on how to keep the bottom "cards" from pushing down?
(19.05.2005, 15:02)

Brian, just as a very rough idea I have posted this on my site. I am not sure if this is what you had in mind.
(19.05.2005, 21:32)

Isn't there something similar already on the site somewhere? If not you should put that up as a new experiment Stu.
(20.05.2005, 17:41)

Hi - love the simple, pared down, re-design... but where have the access keys gone?
(24.05.2005, 10:07)

Although access keys are useful there are not enough available on some of the pages. The demonstration menu for instance has more menu items than keys available. You can still tab through the menus. Did you actually use the access keys and if so which ones were most useful?
(24.05.2005, 11:01)

I don't like using access keys. On the old BW layout I tried using them. Like hitting alt+a for the demonstrations page brought up my add to favorites menu. And other keys brought up other menus. It was very distracting.
(24.05.2005, 13:08)


I don't know if it has been said already or whether it's a bug, but the wall before last is closing instead of opening for the approaching smiley. All other walls show a different behavior. A little trick to get faster to the end is to use the context menu as some kind of a bridge.


(24.05.2005, 13:10)

Christoph, the wall is meant to close to fool you into thinking your way is blocked.
(24.05.2005, 13:26)

Just a quick note. In IE on PC(don't know which version of IE) the Horizontal Style has some display issues. The Comments header element is floating over a list of links instead of it's regular spot.
(24.05.2005, 15:08)

Yep, noticed that myself a week or two ago. But as these are now archived i am not too worried about it (it is just an absolutely positioned div).
(24.05.2005, 15:36)

Stu, what hapenned? Your website was down for about an hour. Was it an internal glitch, or maybe it was just my computer...
(24.05.2005, 19:16)

My ISP had problems.
(24.05.2005, 19:20)

oh, okay. By the way, I have one of those buttons ready for you. I'll send them to you all at once. I don't have access to Photoshop Elements right now (have to go to my comp to use it), but isn't the black rabbit logo the same as the stock rabbit shape that comes with Elements?
(24.05.2005, 19:44)

The rabbit is the number 1 using INTER font, available from
(24.05.2005, 20:44)

Stu, Brian again - thanks for the great start on the "recipe" thing -- I've almost got what I'm looking for -- just one snag -- look at -- any idea on how to slide the headers of the upper recipes up if a lower one is selected?
(24.05.2005, 22:02)

One more thing -- I use firefox, so i don't know if it's just browser specific, but -- if you click on one of those menu tabs and then scroll up using a mouse wheel -- all that hidden stuff scrolls -- just useless trivia, no doubt, but it might be interesting for some sort of windowed app...
(24.05.2005, 22:14)

Brian, the scrolling thing is a FF bug (there is a workaround). As to your recipe thing, I don't think there is any way of selecting a menu once it is covered. I have had another look at the way you have styled this and think that might be of interest.
(24.05.2005, 23:20)

Stu, that's the concept I wanted, but with recipe 5 showing first. Of you look at my,
i want to swap the menu of names to have a the name with a blurb about them on the "card"...but starting with the top.

I've also considered stacking thne pictures in the same way...
(25.05.2005, 10:07)

Though I hadn't used your AccessKeys, I had noticed they were there your old site layout...As I'm building a site which requires them - I came back looking to see how you had implemented them (as I always do when I want to see the best way of doing something) Your site is a fantastic resource, with or without AccessKeys - many thanks...
(25.05.2005, 10:13)

Thanks Mark, if you go to the archives then the old home pages are still there complete with accesskeys.
(25.05.2005, 11:11)

yuo can send me the image of this page
(25.05.2005, 15:27)

image, this is available from
(25.05.2005, 15:42)

Stu -- so, I modified the "recipe" menu some -- it's here:


Thanks for your help -- I've made significant strides I believe...My only question now is how do I prevent the white bar that show up on hover over what is now the Home tab from showing up (or bleeding through...)
(31.05.2005, 14:00)

Brian, looking good. To get rid of the white bar, either reduce the overall height of the #menu to about 389px or increase the height of the hover span to about 151px.
(31.05.2005, 14:46)

In IE when you move from Sam to Mason it skips over Mason and Home appears again. You may want to look into this. Just make Mason taller and there shouldn't be a problem
(31.05.2005, 15:39)

Zeerus -- "Just make Mason taller" -- I'm afraid he's going to have to grow into his height -- Just like we all do :) -- But thanks -- I always neglect IE.
(31.05.2005, 15:47)

Actually, it looks like IE is flaking out bad -- I've got a gap between horizontal border of the inside taps, and the hover is exhibiting the behavior of kicking the menu all the way back down to the first item -- except of course for the height problem. I saw this in Firefox with multiple display:blocks -- it's SUPPOSED to go down the same way it goes up....hmmm...
(31.05.2005, 15:53)

Ok -- I surrounded the b tags with a b instead of the div -- that fixes the spacing problem in IE but i'm still getting the skip problem...<sigh>
(31.05.2005, 16:01)

Brian, IE has a problem with the rounded borders which have a 1px gap beneath each top line. This causes the hover to jump and lose it's function.
(31.05.2005, 16:11)

Looks like IE is having problems with the display:block attribute on the line that styles b tags 1-5 (line 16)...removing it allows the menu to slide in IE...putting it in drops the menu (the "broken" behavior")
(31.05.2005, 16:13)

Brian, the answer to IEs problem is quite simple once you realise what is happening. Just change the css for the <li> tag to:
#menu li {list-style-type:none; float:left; display:block; width:140px;}

It is the float left that does the trick.
(01.06.2005, 11:29)

Stu - WOW! i LIKE it! (Was that effusive enough or should i add a few more accolades?)

(01.06.2005, 20:36)

Um, that last anonym was me...I was just too excited to type brian <grin>
(01.06.2005, 20:37)

I guessed ;o) Glad you like it and thanks for the idea. I think that it works quite well.
(01.06.2005, 20:42)

hey, your are great! Just a question, do you mind if i use your code in some pages?
(03.06.2005, 18:36)

Your wish is granted ;o) Use the code by all means just don't pinch this sites layout. Ta.
(03.06.2005, 19:03)

Really nice image galleries. I was looking for a nice looking gallery using CSS and not PHP.
Nice one. The tutorial was perfect and allowed me to follow and understand step by step the development.

Thanks a lot Stu.
(05.06.2005, 05:12)

Stu, the rounded corners menu is fantastic. I can't figure out how to make a current or chosen state work for the pages in that menu tab--will I need to define an .current_xb1-4? Thanks for this big step forward.
(07.06.2005, 14:09)

Kristen, it would depend how you want the current state to look. If it affects the color of xb1-4 then you will need to define that change.
(07.06.2005, 15:24)

Okay. Now I'm having a different problem; the menu buttons won't show the correct href on rollover (this is when they are in the normal state, but on hover they show the current page's address#nogo. Here's the draft:
Thanks for you help; I really want to use this.
(07.06.2005, 23:11)

Oops. Sorry about that. I had repasted code and forgot to add the urls back in. Thanks.
(07.06.2005, 23:14)

Very cool website Stu. Thanks for sharing with the rest of us!
(13.06.2005, 19:34)

How you manage to get a couple of lines and large text to look so nice I'll never know.
Though I do hope to one day :p
(14.06.2005, 15:07)

Hi Stu, your site is a godsend for a CSS newbie like me. I just spent hours pulling my hair out trying to make a class other than <a> have a :hover effect in IE and it was driving me mad. Have looked at one of your menu examples and have used #ID a:hover {width:'width of button'; height:'height of button';display:block;background-color:#nicecolor;}" and the effect is basically what i was after & works in IE! :-)

cheers from oz


seb76 at
(14.06.2005, 17:21)

Stu, You have some great info on your site here. Really enjoyed looking through what you have. I have a question though. On the photo gallery that you have, I followed the tutorial and it works beautifully in mozilla but not at all in IE 6. I am wondering what I could have done wrong.
(14.06.2005, 18:04)

Larry, check that you have a valid doctype and that this is the FIRST line of your code.
(14.06.2005, 20:36)

Stu, I am using xhtml 1.0 strict and I have the doctype in the first line. The page validates. What else can I try?
(15.06.2005, 05:54)

Larry without seeing the problem it is difficult to say where you have gone wrong. Do you have a url for the page?
(15.06.2005, 07:41)

Because of the recent increase in comments spam I have added a 'banned words' routine to the comments script. If you get a posting error then you will have used one of these banned word. I have tried to make the list short and used only obscure words or web addresses so you shouldn't have a problem. If you get a posting error and your post is legitimate then I apologise, but this is the only way that I can keep these comments spam free.
(15.06.2005, 20:24)

Stu, your site is my "bookmark of the month". Your combination of great technique & design is awesome! Thank you.
(17.06.2005, 20:48)

hi stu, visit ur site since a few months. can u give me some feedback for my page ? sorry i couldn't validate the html, but i have some problems with my style-changer.
(19.06.2005, 22:13)


I have been looking at all these sites, and it looks like a great alternative to frames. I just have had trouble dealing with bookmarks when the page has a top margin... when you click on a bookmark, it will go to the top (hidden) area. How can you go around that? Thanks a lot!
(23.06.2005, 16:25)

Manuel, you can see one answer to this in the layout at

The links at the bottom of the page will take you to tags further up the page.
(23.06.2005, 17:13)

Stu - I wanted to let you know that I have 'embraced' your idea for creating flickbooks. Have had a dance documentation project on the go for sometime (with plans to implement the animations in flash), but came across your guide. As you will see, I have adapted the code and I'd like to know how best to credit you (and also confirm that you are happy with this situation). Regards, Simon
(24.06.2005, 13:06)

Simon Ellis:-
Stu - further to my previous comment - I noticed that the CSS animations don't function in Safari - any idea why this is? Regards, Simon
(24.06.2005, 15:10)

Simon, I am unable to test on a Mac but I am told that the smaller animations work ok on this platform. You may use this method without any credits but if you wish you can just add a link back to this site (which, by the way, will soon be on the move).
(24.06.2005, 18:50)

Simon Ellis:-
Stu - I am running both mac and pc platforms - and can verify the small animations on your site (Muybridge etc) do not work in Safari (running panther), but fine in firefox and explorer on the mac. I'll look into it and get back to you. Will definitely link back to your site. Regards, Simon E.
(24.06.2005, 22:29)

IE5.01 gets it wrong
When you hover the horizontal gallery you get
a gray blank block instead of the pic
(note: I am hovering the pink photo at
the time of the screen shot).

I don't know what's going on with the top either.
(02.07.2005, 06:02)

Gotta love the go faster stripes btw.
(02.07.2005, 06:03)

Tim, it's too advanced for IE5.01, though with a little hacking it may be possible. I expect it fails on Mac IE5 as well.
(02.07.2005, 07:36)

Geoffrey Sneddon:-
Stu, I'm thinking about using your CSS Sliding photo-gallery for my photo gallery, and I'm wondering if I need to put something like "Based on Stu Nicholls' CSS sliding photo-gallery (copyright © 2004/2005 Stu Nicholls - all rights reserved)?"
(09.07.2005, 23:22)

Geoffrey Sneddon:-
Also, the normal horizontal and vertical ones work fine in IE 5.02 Mac, but the IE 5.01 hack doesn't work.
(09.07.2005, 23:44)

Geoffrey, you can use any of the examples on this site as you wish. A link back would be nice but it is not compulsory. The IE5.01 hack is for the PC version and works fine on my windows xp.
(10.07.2005, 08:42)

Stu - what an excellent site.
I am trying to convince the programmers here to offload from JavaScript to CSS for navigation and other features of our web-based application. Your site is a great showcase for what can be done!

I wanted to ask your opinion of an idea. We have to show a detailed weekly schedule (software to schedule broadcast of music and news clips). This creates awkward scrolling for the user as they look for specific time slots to edit.

Is there a way to present the whole schedule scaled down - just barely legible - and display just the area over which I am hovering zoomed large? How would the other columns of the table "know" to adjust themselves?

Any help or insights would be appreciated.
(11.07.2005, 14:14)

Joshua, this should be possible with css using small em size font for the scaled down schedule and large em font for the zoomed area. It could be done in the same way as my two step gallery with a hover 'zoom' and a click 'goto'. Do you have an example url?
(11.07.2005, 15:05)

Don't yet have an IP address you can access from outside the company. I will analyze your example. Thanks again
(11.07.2005, 16:57)

Bob Dobbs III:-
I love your site, since I am kind of a design geek. I just stumbled upon it and spent about 30 minutes looking at your cool & creative use of CSS. Thanks!
(14.07.2005, 09:06)

Stu, just noticed something (w/Firefox 1.0.5) on your homepage...When I hard refresh the page (Shift-Refresh) there is a perceptible shift down of your by-line and image on the homepage. When I just refresh (^R), the by-line and image shift up. It's definitely repeatable, and am assuming it's a gecko bug, but was wondering if you see the same behavior...
(15.07.2005, 14:48)

It's fun isn't it? But yes, it's a FF bug and has been spotted before. Works correctly in IE, Opera etc. and is to do with the negative top margin on the 'NOW WITH.....' h3 text.
(15.07.2005, 16:21)

Brian (previously Anon):-
Fun...yes i could play with it all day...but then my employer would probably get a tad annoyed. Ah what the heck, it's only money. <grin>
(15.07.2005, 16:48)

Luckily I finish at lunchtime on Friday. So I have all the time in the world ;o)
(15.07.2005, 18:24)

Thanks for your generosity in making these scripts available. I run a free local community website and they will make my life much easier.
(19.07.2005, 05:37)

Stu, I see your using 76% font size, I also found this to be the most consistant cross-browser wise. Is it just me of does your site's font look a little larger than my site? I ask this cause I'm also using trebuchet ms 76% for all my body text.

Let me know what you think
(20.07.2005, 02:58)

Tim, although I have set the default font size to 76% I have also set the <p> font size to 1.1em (with a line-height of 1.5em) which will make it slightly larger.
(20.07.2005, 08:42)
I love how orange border-bottom stays at the foot of the viewport in ie5. It's kinda cool, Maybe if it had a little text in it or something of that nature.. :o)
(23.07.2005, 07:42)

your site is so amazingly helpful - ahhh!
I just installed your fabulous image gallery snippet onto my site and it works like a CHARM! nothing is more effecient, let me tell you.
keep up the fabulous work.
(26.07.2005, 06:43)

J Spencer:-
I love coming to your site. I love your experimental stuff, you have some of the best out there. It's nice to see some original ideas once and a while on the web. It's also cool you are 58 and not 16! Right on! You give me inspiration at my job. I'm a web designer and occasionally visit your site for ideas for the next big project that's coming up.
(26.07.2005, 16:00)

J Spencer, thanks (almost 59 now ;o)
(26.07.2005, 16:17)

Des Speed:-
What a great new front page. I love coming to your site and seeing what new things you have come up with to amaze me.
(29.07.2005, 17:19)

Des, just a taste of things to come ;o)
(29.07.2005, 17:25)

Excellent site. I am grateful that you allow free use of your examples. Your samples always work without any tweaking. Keep up the good work.
(29.07.2005, 19:23)

Any chance we could get you to move the front page's comment blocks further up the page ala your interior page? My scroller finger is week and I like to monitor this page (after looking at the front page to see what you've changed, of course...)
(29.07.2005, 20:49)

Brian, moved up a bit.
(29.07.2005, 21:19)

Stu, my finger thanks you!
(29.07.2005, 21:45)

Hi, great new index. But could you sort the homepage this way?

Latest pages:

It would be easier to see the new stuff on the site.
(30.07.2005, 00:55)

Now go update the comment script ;-0 I agree with Kevin, using a category would be cool :-)
(30.07.2005, 04:36)

Trying to help you further, if you'd be coding it semantic use a definition list. But I'm sure you'd come up with that if I didn't suggest it :-D
(30.07.2005, 04:38)

Just wondering, but why do you have you page into a frameset now?
(30.07.2005, 06:48)

Nevermind that last comment, I was being a bit stupid, because you have moved your new site. Looks great by the way. You never cease to impress with your CSS accomplishments.
(30.07.2005, 07:57)

otto, the site has not yet moved to the new host so I have redirected here. Frameset (masking) redirection was set up by default.
(30.07.2005, 09:11)

Thanks so much for sharing this site Stu. Your methods and examples have saved my butt more times than I'd like to admit! Besides that, everytime I come here I learn something new, enriching, and impressive and find this to be one of the best resources on the net.
(30.07.2005, 16:35)

Nice design, Stu.
(30.07.2005, 23:18)

Thanks Morehart. If you have Firefox then check out the home page links 'welcome' 'search' comments' etc. to see :target:before in action. Also try resizing the home page font to see the effect.
(31.07.2005, 14:45)

Great redesign, best yet. This is your most intuitive navigation I've seen. You don't have to scroll from initial page load to get to all the various home page contents now.

The new logo is nifty also.
(01.08.2005, 04:27)

It's allways a pleasure watching, and learning from your work ... Thanks.
(01.08.2005, 08:58)

Thanks, the new logo is all done with text (no graphics) and it will all resize without loss of quality.
(01.08.2005, 10:38)

mhennig gmail com:-
"two step photo-gallery"
> Can Mac owners please let me know if this works in their browser, thanks.

my test results:

Mac: OS-X (10.4)

Safari 2.0 (412.2)
not complete:
hover shows preview
pictures clicked do not stay

Firefox 1.0.3
works perfect

OmniWeb 5.1 (563.34)
does not work at all
(01.08.2005, 17:11)

Craig Snyder:-
I've been following your work for a long time and love what you are doing...the redesign is excellent, simple, and very visually pleasing...about the name change, I assume you're aware that there is a site called "CSS Play" that's been around for a while:

So I was just wondering why the name change for your site...?
(02.08.2005, 16:05)

Simply amazing! You are an inspiration. I hope I can learn from your generous gifts.

(02.08.2005, 18:31)

Craig, that site is actually called 'sea mus n squirrel' it just happens to have a sub directory cssplay. There are several sites on the web that use css playground or css play. But this is the ONLY site that is reachable using I chose this as it best describes what this site is all about. It DOES NOT go into the semantics of using css, DOES NOT preach to its visitors, DOES NOT stick to css for presentation, what it DOES do is 'play' with css to see what it is capable of doing (and its fun). So CSS PLaY fits the bill.
(02.08.2005, 18:43)

Craig Snyder:-
Sounds good to me!

"It DOES NOT go into the semantics of using css, DOES NOT preach to its visitors, DOES NOT stick to css for presentation, what it DOES do is 'play' with css to see what it is capable of doing..."

This is an excellent quote for you to use on your about page...
(02.08.2005, 18:50)

Stu, will your new host serve your documents with app/xhtml+xml? or is it still being served as html/text like at your old server?
(02.08.2005, 23:59)

Tim, that's the theory ;o) but we shall see. It's someone just starting out in hosting etc. so there may be some teething problems at first. He has promised MOD REWRITE will be available so I should be able to serve my documents as they should be. I will let everyone know the host's name as soon as I have moved. Unfortunately I am off work sick at the moment so have not been able to get an update on the move.
(03.08.2005, 08:51)

Uh oh... looking at your site using Ubuntu (Hoary) and Firefox 1.0.6, the 'a' screws up. See Sorry it's slow. :(
(03.08.2005, 23:10)

Morehart, your link does not work, but if an 'a' is the only problem then I will live with it ;o) Mac IE5 has a similar problem with th 'fullstop' but I have hacked that one. I would prefer to stick to a text logo than have to go to a graphic.
(04.08.2005, 09:06)

Interesting design, but I prefer the old green layout.
(04.08.2005, 13:22)

Oh well . . . you can't please everybody ;o)
(04.08.2005, 14:04)

Ok, the link should work now, if you want to see. Somehow the file wasn't there. Not sure where I put it the first time... :D
(04.08.2005, 14:34)

Thanks Morehart, I see that the problem is in the font. You do not appear to have Times New Roman on this PC.
(04.08.2005, 14:40)

Ah... yep, you're right. Well, good, long as it's not an actual design problem. :)
(04.08.2005, 23:13)

Just had to drop you a line and say how fabulous I found your tutorial on styling unordered lists with CSS only (from the site). It is by far one of the best tutorials I've ever read. The instructions were easy to follow and understand, and the addition of examples of how things should be looking and working for each step was very helpful. I also liked that you explained each line of code. Very thorough tutorial. Great job! Thanks for sharing your knowledge. You have a gift for teaching.
(05.08.2005, 00:01)

Stu, noticed a change in your markup, what sparked the doctype change? Just curious. Also your referer validation link is still labeled 'xhtml 1.1' on your homepage. Anyhow, just thought I'de drop a comment.

Kind regards.
(06.08.2005, 20:09)

Stu:-'s a MISTAKE!! The doctype should not have changed. I must have copied it from from the wromg file. I will set about correcting as soon as possible. All the other pages should be as before - xhtml1.1
(06.08.2005, 20:36)

Stu, what are you using now to get the content type served correctly?
(07.08.2005, 07:38)

Tim, nothing at the moment, it is served as text/html. Hopefully when the site moves it will be served correctly.
(07.08.2005, 20:37)

I love the red layout, but i like the simplicity of the current blue .. :)
Hey stu, thanks for the tutorials on the Rounded corners with inset borders in :)
(10.08.2005, 01:27)

Thanks Jeipi, I have so far had 10 articles published on, all of them about CSS and based on demonstrations on this site. Glad you found this one interesting.
(10.08.2005, 07:55)

yep and very helpful! (thanks again) but starting this validation thing gave me a headache lately, as i get my pages to xhtml 1.1 things started to get crappy :) maybe u can point me to the right direction?
(11.08.2005, 01:25)

@Tim, Just to see if I could get this comments page to application/xhtml+xml I have use php to get the correct mime type to understanding browsers. If you check this page you will find that it is now served correctly. Some comments contain non UTF-8 characters which will cause a validation error but will not stop the page from displaying (IE gets text/html).
(11.08.2005, 08:05)

Hello Stu. Thanks for your helpfull pages. They helped me a lot while trying to get rid of the frames for a site. But I do hope you can help me out, because after 2 days of struggling I am not able to get what I want and I am sure it should be possible. Please have a look at its a combination of a couple of your examples. The top and footer are seperate files so i can update them without touching the mainpage. Same for the menu. Problem is the centerpart, it should look like that shadowed box, but it should be stretching as is the container box now, and only the most inside box should have scrollbars as necessary. Then I can use the box with the shadow as the mainpage of a site, with or without pictures and backgrounds around it. If possible the "mainpage" width should not be in % but 100%-100px or something, as in your percentage plus pixel sizing example. Am I asking too much now? I tried from different sides but I am not getting there. :(
(12.08.2005, 14:35)

Stu, just an fyi regarding the new site. In safari 1.3 the picture at the top of the page is over the menu with the bottom ~just~ above the mozilla, explorer and opacity links. When any of these links is in hover state they slip under the image almost completely.

On FF for Mac, the menu has a 1px gap between some of the items. As typical for FF/Mac, resizing the page causes the gap to close/open around different items. My assumption is that its got a round-off error somewhere that's causing this. Using a matching background in ul.horizontal should hide the gaps (if you want to bother with it).

In both Safari and FF, the list of updated pages on the home page are up a little too high. I didn't look to see how you styled them, but it looks like you've got all of the padding below the list item between it and the very faint border. Getting half the padding back above the item would balance things out.

Sorry to just be pointing out flaws here, Stu. I appreciate all you've done, for me personally and the CSS community at large. I just figured you probably don't have a Mac to look at these pages with ...
(13.08.2005, 22:19)

Paul, thanks for the feedback. You are right in that I do not have access to a Mac for testing, I do however check screen shots of Safari 2.0 and IE5.2.3 and both these look correct. So I am just going to have to live with some browsers not quite making it (until the next redesign). I hope that it doesn't stop your enjoyment of the site though.
(13.08.2005, 23:24)

Stu, if it's of any value to you, here's what it looks like on Safari 1.3.

I'll leave that up there on my site for awhile, or will remove it when you delete this comment (which would be perfectly fine with me). No, it won't stop my enjoyment of your site. It does surprise me a little that 1.3 has a layout problem that 2.0 doesn't. I thought they were pretty much using the same layout code. Still, almost every problem I've seen with 1.3 has been related to images ...
(14.08.2005, 02:44)

The image is stretched vertically (which is a little odd) so I have changed the css to set the image height instead of the width. This should correct the problem.
(15.08.2005, 09:09)

I now have the feeling that what I want, might not be possible.
Anybody has any ideas?
If you cannot help me Stu, could you please let me know?....
(15.08.2005, 20:48)

Tineke, unfortunately what you want to do would take a while for me to work out and at the moment I do not have the time. I am busy with moving my site to another server and ironing out the problems that have occurred. I also have a health problem at the moment that is still waiting for the results of byopsies. Sorry to be so negative but I am sure you will understand :)
(15.08.2005, 22:07)

Ok Stu, no problem. Hope you will get well soon. I am still struggling on, because I need the result. I'll update the link contents if I make any progress. Maybe you can use it for your next example. That would be ok for me, after all its a combination of your work, not mine. :)
(15.08.2005, 22:18)

Stu, the image on your home page is now nicely positioned above the menu on Safari. (The image at the top of this page is still over the menu.) Hey, have you seen what your snazzy borders look like with tiled background images? Pretty nice!

Sorry to hear of the health problem, Stu. The very best of luck with that ...
(16.08.2005, 10:33)

Thanks Paul, fixed now that I have moved to a new host.
(16.08.2005, 11:07)

I have mod rewrite set up to serve application/xhtml+xml to browsers that understand but if you arrive using (without the index.html bit) it serves the page as text/html no matter what. Does anyone know the answer to this? If you arrive using then mod rewrite works correctly.
(19.08.2005, 14:47)

Sorted (I think). Just use mod rewrite
RewriteRule ^$ /index.html [T]
to add on the index.html bit.
(19.08.2005, 16:41)

Stu, I hope your host change hasn't been too much of a bumpy ride. Speaking of, I was hoping you could provide me the source of your .htaccess rewrite for app/xhtml+xml assuming you are using a rewrite? Does your host send xhtml1.1 correctly or did you find a way around this? I'm interested in what method you've chosen as I've been looking for a solution.

If you think an e-mail message would be more suitable you can contact me through my form mailer on my site:

See you around. Good luck with your new Opera problem btw.
(23.08.2005, 00:48)

Tim, replied through your contact form.
(23.08.2005, 09:25)

Stu, don't know if you have read the excellent article on IMAGE PLACEMENT via Mezzoblue ...
Thierry Image Placement
"Image Placement vs. Image Replacement"
(25.08.2005, 02:31)

John, I have read this article but I am not 100% sure why the <img> tag has been used. It could just as easily be replaced with an <em> tag. It still suffers from not allowing you to use a transparent .gif or opaque .png for the replacement image and if the underlying text is sized large enough it peeks out or the right hand size of the image. What we really want is for <object> to be correctly implemented in all browsers and then there would be no need for these 'workarounds'.
(25.08.2005, 11:33)

Rich Pedley:-
Stu, how come you haven't implemnted a:focus on your main menu, or links in the content? Considering you specifically mention it in one or two articles it seems that maybe you forgot!
(though I noticed the same applies to the Google Adsense...)

I have been visiting your site for some time, and is one of only 2 that I class as being inspirational.
(25.08.2005, 20:35)

Hi Rich, :focus and :active are only useful when the page does not change and so the 'clicked' status of a link is held until you click elsewhere. On my pages a main menu click will take you 'instantly' to another page so you would not see the :focus or :active state.
The same with links in the content. I am glad that you like the content though and hope that you will keep visiting.
(25.08.2005, 21:03)

Hey Stu-
I'm currently working on a PHP app for a catering company. More for fun and saying that it does it than anything else, I'd like to send my pages as application/xhtml+xml, but I definetly _don't_ want to break any browser my clients maybe be using. :)

I'm currently looking around on Google, but it would be great if you could tell me which browsers support application/xhtml+xml... Thanks!
(27.08.2005, 14:19)

Ok, according to what WaSP is saying, IE is pretty much the only browser which doesn't support application/xhtml+xml... rats. Probably the one they use most often.

Oh well, no surprise. :/
(27.08.2005, 14:25)

Rich Pedley:-
rteurning to a:focus, and a:active.

erm, what about keyboard navigators... thereby enhancing the experience for thos that are unable to use a mouse :-) (in other words, good for accessibility)
(27.08.2005, 22:08)

:focus and :active are not necessary for accessibility. You can tab through the navigation on my site and the links will be highlighted. Several of my previous layouts used access keys on all the links and had the keys to use in brackets [a][b][c] etc after each link. When I dropped this no-one noticed or complained so I guess no-one used them.
I suppose that this site does not get many visitors with accessibility problems, BUT it does stay in shape (even the images) when larger fonts are selected so in some way it does cater for people with eyesight problems.
(27.08.2005, 22:27)


Your IE6 min-width solution is interesting but too complicated for me. I am considering to simply surround my text with a "table shell." (One <table>, no <td><tr>.) This works. But does this have any of the drawbacks of using a table for page layout? I doubt it...... but unlike you I am no expert......your opinion on this?.......

I have credited your site at ......

You can see my "table shell" solution at .........

Forum discussion:
(28.08.2005, 14:35)

Krystof, as you have found out in your forum link, there is no easy answer to min-width in IE. Most people expect the image in a div to work but it still doesn't stop the text from collapsing. There is no problem with using a table shell (which has given me another idea to try...) if you don't mind it not being 'correct' ;o)
(28.08.2005, 15:05)

Stu, thank you for the reassurance that I'm on the right track. It's confusing enough for a CSS beginner, without seeming to contradict experienced web designers...... And I don't want to clog your blog here, but just thought I'd report another curiousity...... If a FORM contains an image, then in IE6, the FORM+image does not respond to display:inline. The FORM in question is the PayPal shopping cart button......And you guessed it, seems the only cure is to surround the FORM with TABLE. Well it's just a curiosity but if anyone is curious, details are in this (old and abandoned) discussion:
(30.08.2005, 05:31)

Gerhard Lazu:-
Hi Stu, nice site ; ). Love your commitment and inquisitive manner towards CSS. Besides congratulating you on the site, I just wanted to point out 2 *minor* styling issues as rendered by Safari 2.0.1 : and (1px extra for the border) .

Your site has been bookmarked and will be extensively used because it's so useful.

Cheers Stu, keep up the good work, Gerhard ; ).
(03.09.2005, 11:03)

Gerhard, thanks for the feedback. Unfortunately I am unable to test on a Mac so cannot check 'mouseovers' etc. just static pages on sites that do screenshots. However, I am busy working on the next layout so if my changes do not correct this then in about a month the site will be changing.
(03.09.2005, 20:44)

Mauricio Samy Silva:-
Hello Stu,
Have a look at:
There is a XML parsing error on that document.
(05.09.2005, 02:00)

thanks for an incredible offering. i've been playing with your slide image-galleries. is there any way to do this without using the <img /> tag? to do it using just background images? just a thought.
(05.09.2005, 02:35)

Mauricio, firstly thanks for the inspiration to produce my version of the flag. Also for pointing out the XML parsing error. Somehow the uploaded file has been corrupted, I will re-upload tonight. Thanks again.
(05.09.2005, 08:15)

Phil, it is always possible to use background images.
(05.09.2005, 08:16)

Hello Stu, I am still struggling with that centered fixedwidth-bordered boxlayout with shadows. Searched the whole web and found dozens of different approaches, that looked a bit like mine. Tried changing many of them, but because my little knowledge of CSS (or maybe better of all the hacks necessary) I am not able to change them into correctly working browserwide. Can you spare some time?
(10.09.2005, 13:18)

carlo de marchis:-
Hi Stu, I'm xperiment with your layout as per the webreference article. i'm trying to add a menu on the left that behaves the same as the container but can not make it work in IE, please have a look at: and let me know if you have an idea on how to achieve that. p.s. I expect the menu div to also have a scrollbar
(11.09.2005, 11:35)

Excellent resource. This site is a must for anyone who is interested in the future of css. Ground breaking stuff, keep up the fantastic work.
(14.09.2005, 09:34)

There is a basic sample of the rounded corner example with colors. The original from this site was inspirating me. You should download the files from index.php|gw.css|bottom.gif|upper.gif|gw.jpg to have a closer look. The hoster does not correctly interpret the code.
(14.09.2005, 11:00)

Hey stu, first off thank you very much I learned alot from your techniques, currently I am redesigning a website for my schools diner, I was wondering if the image from could be used? I am having a hard time comming up with a "chef" concept and wish to use the main image "" I am going to edit it to include a chef hat or something similar but of course I wont be using the image unlees you agree thank you.
(14.09.2005, 21:25)

hey Stu, I just wanted to say thank you for everything you have provioded us here on your site! it has taught me a lot, and I've been visiting quite often for the past 7 or 8 months just to see what you've come up with next, You've always seemed to amaze me!

anyways I was looking through some of your comments pages on the "non floating menus comments" and I saw a post you made about you not feeling to well and I just wanted to say I hope you get better and everything works out for the best.
take care and best of wishes to you.
(15.09.2005, 06:43)
thx for your image-galery tutorial. just what i needed. gonna show you results soon..
(15.09.2005, 09:58)

Thanks for the CSS-only version of setting a min-width in IE. Do you know of any way to maximise the content to the full browser height as well? I can't find a way to get height:100% in IE without breaking hasLayout..
(15.09.2005, 13:20)

Can any help me with this problem. I design a couple of webpage using css. I tried printing the webpage but not all the content on the page was printed. It just printed what was visible above the fold in the content div. Is there a way to print the entire page.

What can I do?

(15.09.2005, 15:26)

Compliments for this site, wonderfull.
(15.09.2005, 21:05)

Soniya Mathur:-
Wonderful work. keep it up. I am very much interested in CSS and was really impressed with the fantastic work you have done. Trying to learn a lot from your work.
(19.09.2005, 13:00)

does anyone else have a problem printing css pages?
(20.09.2005, 02:50)

Brian Kim:-
Muchos mahalos for graciously sharing your skills and experiments with panache.
(21.09.2005, 18:28)

Pete - Australia:-
Fantastic work Stu. I have to admit, I've been a bit of a css fan for a while, after crossing over from actionscripting, and im totally blown away by some of the things you are doing with style sheets.... Wicked stuff mate! (p.s: Long live the speccy!!! :P )
(27.09.2005, 22:58)

STU?!?! Are you still there?
(28.09.2005, 04:23)

otto, I'm still here ;o)
Just been very busy with one thing and another. Just to bore you with a few details, I have had a health problem (on top of hypothyroidism) requiring endoscopies and biopsies, resulting in a diagnosis of H. Pylori requiring a cocktail of strong antibiotics and acid suppressants (an ongoing course of treatment). Also diagnosed as having coeliac's (no real surprise). Been on holiday for a week in Menorca where my wife broke a bone in her foot on our last day so have spent the past week taking care of her (she's able to get around a bit now). I have also been working on another new design for this site which should be finished in a week or two. I think that takes care of my news and explains why I have not posted or produced anything new for a while.
Once everything has calmed down I will be back ;o)
(28.09.2005, 08:49)

Simply the best!
(29.09.2005, 11:00)

Jon Tan:-
Great site Stu, a colleague just pointed me in your direction as he knows how I love good CSS resources. It's beautiful too in it's visual clarity, congratulations.

I notice you're using Google as your site search and you have no site map as such. I'd gladly donate a valid plug-in to index and search your site and produce a site map if you think your audience would find it useful. Feel free to contact me via if you might be interetested (couldn't find contact informtion to email the offer so please delete the last part of this post, it wasn't supposed to be spam).
(29.09.2005, 23:15)

Absolutely excellent. I've wasted half a day on here just tinkering with stuff. Never knew half of this was possible. A couple of things in return ... I'm assuming you know all about the WebDeveloper Extension for Mozilla browser, but if not, then you really should check it out. Especially the live CSS editing funtion.
Secondly, I've been playing with a Content Management system called Mambo (now Joomla) and it seems that there's a real fit between what you're doing and their templating system. <br>
Keep up the good work.
(30.09.2005, 07:13)

Jim, I use the WebDeveloper Extension for Firefox all the time for solving problems with other sites. I have used Mambo in the past but have not checked it out recently (in my opinion it is was one of the best CMSs around).
(30.09.2005, 09:56)

Hello! I love your work, and I was wondering if there was any way I could use it? There aren't any codes or tutorials anywhere.. And if there are, where? Haha! I would love to hear an answer:
(01.10.2005, 23:43)

Sarah, the css for each example is in the source code for the page, and a few of the examples do have links to tutorials. The copyright for each example is now stated clearly at the top of the third column beneath each example on this new layout.
(02.10.2005, 08:38)

Thank you :)
(02.10.2005, 16:23)

Amazing work Stu! I found you site 4 mounths ago and i always come back to check the news! Keep up the good work!! >:)
(03.10.2005, 02:20)

SandRock Mp4:-
Great !
(03.10.2005, 16:38)

Stu, I was a little lost when I visited your site today. The new layout and design is so much different from the blue theme you had going on. It seemed scattered compared to the previous design. Well I suppose you'll change again soon anyhow and this message is pointless, besides the fact that I like to let you know how I feel about the site.

Well I hope all is well and wish your family a full recovery in health ;o)
(04.10.2005, 11:37)

Tim, you will get used to it ;o) and I like it.
(04.10.2005, 13:08)

BTW, the health thing is improving, but being hypothyroid, I am taking thyroxine for the rest of my life (it does mean that in England I get free prescriptions though) and as a 'coeliac' I cannot eat anything containing gluten (bread, biscuits, cakes, BEER etc) in fact MOST processed foods. So it's fresh meat, fish, fruit and veg from now on. Oh, the site was changed to cater for more browsers, reduce the height of the header, increase the readability and, as everything is hand coded, make it easier to update.
(04.10.2005, 13:22)

Great website. Kudos. I have a question about your opacity examples. I see that you are able to get opacity to work in IE6 for text (&bull; in the colours example) and images. I would like to get opacity for IE6 working for the background-color of a div--particularly the snazzy borders example on your site. I've tried using the same css code in your opacity examples, but it won't work. Do you think this is even possible? P.S. Thanks for your site and for taking the time to answer comments!
(05.10.2005, 23:52)

Your new site is aso both beautiful and creatively designed. we have become used to that, though. My host does not properly serve xhtml1.1, but handles 1.0 OK, so I had to back down for now. They use a PHP parser and are destroyed by the XML header beginning with <? because it treats everything thereafter as PHP.
Visit my ongoing and crude creation using many of your examples and all CSS.
(06.10.2005, 17:24)

kenny, you can always use <?php print "<?xml version=\"1.0\" encoding=\"utf-8\"?>;";?>; to get around the <?xml problem with php.
(06.10.2005, 20:35)

I'm really confused about the dropdown menu thing...what's a DOC Type...nothing is working for me...they show up, but they look retarded :/ Can you plesse help me?
(07.10.2005, 00:52)

Ally, the doctype is that first line of your code.
As for your menu, all you need to do is specify a width (400px?) for your menu then position it as you want.
(07.10.2005, 08:37)

found this site tbrough a link. ive been trying to learn css and this iste has really opened my eyes to what can be done with it.
Excellent site :)
one for my favourites one thinks
(07.10.2005, 14:51)

Stu, you make these horrendously difficult things so easy! I hve tried your solution, and it seems to be working. Hopefully, it will now validate and my site will become beautiful..well, maybe not, but at least everything will actually work. Thanks again.
(07.10.2005, 23:01)

:( ?
(08.10.2005, 00:32)

John from New Jersey:-
Hi Stu, Greetings from the USA.
Just thought I would drop you a line to let you know how much I appreciate your web site. It is a terrific resource that I find myself coming back to again and again. Thank you for taking the time to create it. (Have you ever considered writing a book?)
Stay well.
(10.10.2005, 20:02)

hello hello,

thanks for ALL u do ! excellent WWW !!!

so :

on Mac G4 / Mac OS X 10.4.2
Safari 2.0.1
firefox 1.0

= OK no problemo

enjoy ;)
(11.10.2005, 12:16)

Great site keep up the good work
(12.10.2005, 16:17)

yes, I'm with John - write a book! Your site is such a treat to look at. your CSS photo gallery made me go "oooh" when I saw it - so elegant, so clean - your work is an inspiration to designers starting out (and those of us trying to do web design...)
(13.10.2005, 05:35)

You work is amazing. Thank you so much for the reference.
(13.10.2005, 20:21)

Kelley Perry:-
I applaud you. I am a 41 year old designer and sometimes it just feels like I'm past my web designing prime. This is an excellent site.
(15.10.2005, 21:03)

Many thanks for sharing Stu. The site is valuable resource.
(16.10.2005, 18:48)

Thank you, thank you, thank you!!! I finally have found a place with practical examples. Your writing is so easy to follow, it's as if your sitting here guiding me! If you write a book, I'm definitely purchasing a copy!!

Thanks again
(17.10.2005, 17:20)

Christy, spread the word, the book may happen one day ;o)
(17.10.2005, 17:24)

How do you do it? I love playing around with CSS and have come up with some good stuff or so I thought till I found your site. Keep up the excellent work and I'll go with everyone else, a book would be great, I'd certainly buy it.
(18.10.2005, 16:45)

Stu, if you ever do write that book I will be one of the first to buy it ;) your examples here are awesome! and I've been following you around for quite some time now from site to site..

1 question though.. I remember on some of your previous layouts you would have the examples layed out and then a "next page" for the next example and I've realized that with this layout you dont have that :(.. well.. that was a pretty good feature and I know I enjoyed it more that way, but if you cant get it in then thats fine.
(19.10.2005, 10:20)

John, top right corner of each page has the 'home' 'list' 'previous' 'next' 'comments' menu from the previous design. Hope this improves your browsing experience.
(19.10.2005, 11:53)

George Hite:-
Do you have a pure css version of Max-width for IE? I find that you are a genious at comming up with pure css ways of fixing issues... :)
(19.10.2005, 20:55)

George, max-width is a little more difficult. I have tried several times to come up with a css answer but so far have failed. I may look at this again but I am guessing there is no easy answer.
(19.10.2005, 21:05)

Wavy Gravy:-
Just Amazing, I hope you don;t mind borrowing your ideas, I have been struggling with the frames layout for a while now, till I came across your site. Good Work
(24.10.2005, 22:28)

pure CSS insanity!!! thanks so much for putting your work out for us all to learn from ;-)
(01.11.2005, 03:14)

yo stu, how did ya get your google search or any other <forms> xhtml compliant? Thanks stu...
(04.11.2005, 00:56)

Pierre, just check the source code to see what was added / changed to get it compliant.
(04.11.2005, 08:18)

Henk van Voorthuijsen:-
Stu, I have been trying to adapt your 2-stage photo gallery from, but I'm getting stuck - I have several images of different heights, which is no problem for top and bottom row, but I can't seem to get a good solution for the left and right side... Any suggestions? (You might consider this a challenge :)
(04.11.2005, 15:31)

Stu, thanks. I got it (somehow) but after i used some of ur corks, it works, i dunno how or what it did, but sure works the way i wanted it. Thanks again.
(05.11.2005, 06:45)

Does any one know if the sized-by-content menu at: ...
... can work in combination with Son of Suckerfish menus?:

Or if the cssplay centered menu work with drop-downs?
(05.11.2005, 21:23)

hey stu, thanks for your great work with css! quick question: i'm trying to get your rss feed run in thunderbird and it shows the message titles but then in the body/description part it displays this:

XML Parsing Error: undefined entity Location: Line Number 78, Column 5:<li>&nbsp;</li> ----^

what's up?

(08.11.2005, 21:09)

Phil, no idea. The RSS feed is valid and displays in FF and also the page
is valid
(08.11.2005, 21:41)

stu, working now... no idea what was going on. had to reload it and then restart thunderbird? but s'all cool now. thanks again for making your work available!
(09.11.2005, 00:40)

A co-worker sent me your link and I have been looking at it ever since. Your work has inspired me to re-think the way I have been doing things. Thank you.
(10.11.2005, 02:07)

Hello Stu, your "amazing puzzle" is great!
I am planning to do an online advent calendar (don't know if this is the correct english word; I'm german) on the web site of my football club. May I use your puzzle for that? At home I already changed it a little and built in a timer using some Javascript and a high score list for the fastest puzzler.
(11.11.2005, 10:44)

Reini, you may sue for this purpose only as long as you link back to my original puzzle page. Can you let me know the url once it is online (I may link to it).
(11.11.2005, 11:35)

A test version is already online (nobody knows the link yet...)
The address is
But it is in german.
(11.11.2005, 12:09)

Reini, looks ok. Just add a link to my page to show where the original maze came from and that will be fine.
(11.11.2005, 12:42)

Okay, thanks.
I will add a link as soon as it will be available for the public.
Have a nice weekend.
(11.11.2005, 12:50)

Hey Stu,

Was wondering: have you noticed that Krazy Korners goes a when you place a form inside them. At least, that's been my experience with 3D inset and forms. Do you have a quick "fix"? (I certainly don't mind playing with them...just don't have much time right now and thought about asking you first.)

Thanks for the excellent stuff!
(12.11.2005, 11:20)

Lee, probably something to do with padding or margin values.
(12.11.2005, 11:27)

Matthew, Oakland, CA, US:-
Hey Stuart,
I came across your site in a mad search to find interesting CSS horizontel menus. And to my great surprise I got so much more; to see what is possible with CSS. Even though it is a fairly simple programming language, there is so much more going on underneath. I am impressed with what you have done with the language.

I also really appreciate how generous you are in sharing your knowledge,especially in a hostile greedy world, I am impressed with your generousity and goodwill.

The other reason I am writing is to ask permission to use some of your code. I am working on several projects so I am not sure how I would use it but I would thank you in the source code with a link to this site.

I have learned a lot in one visit to your site and I anticipate many more. Myself, I am a total CSS addict. The simple beauty of the look and feel can't be beat.

And to be stupidly naive and fool hardy I dream that one day IE will be CSS compliant (All versions) and that we'll never have to write another hack again. (now, pour me another whiskey, god damn it. I've got a float to clear :0)

(15.11.2005, 02:56)

Matthew, every demo has a copyright statement which mainly says that you are free to use the css as you wish. There are just a few demos that require my permission (the maze for one).
(15.11.2005, 08:09)

Lance (not the cyclist) A:-
I am writing to ask if I may use some of the CSS ingenuity found on the archived B&W home page. I understand that the images are protected, but am unsure how open (or off-limits) the CSS is on that page.

Respectfully yours,
Lance(not the cyclist)Armstrong
Research Technician
Penn State Institutes of the Environment
Penn State University
0130 Land & Water Building
University Park, PA 16802
(814) 865-3388
(16.11.2005, 14:25)

Lance (not the cyclist) A, the archive are of little use to me so if you have found something of interest then help yourself.
(16.11.2005, 15:00)

The other Lance Armstrong:-
Thank you. I will gladly reference your website in the code. By the way, Cheers from the other side of the pond. More specifically, from Penn State University, located in what is keenly refered to as "Happy Valley".

(16.11.2005, 15:23)

I was trying to add the css dropdown menu on one of my pages, but it requires the !doctype. The !doctype simple f*** my form (i.e. labels, textboxes, etc) because 100% for it is MORE than 100% :( Then, using a bit of javascript, I get the cssdropdownmenu to work without any !doctype...
But... It's not right, so, what about a part talking a little about entry-data forms? It would be nice learn some tricks about forms layouts with css, and plus some effects :D
(18.11.2005, 01:17)

Hi Stu, love your site! I have a question about krazy korners and using CSS drop shadows like the ones in the 'A List Apart' tutorials located here:

I've been playing with various methods and can't seem to find a way to make it work. Is there a way to combine the two or is it a pipe dream? Thanks, :-)
(18.11.2005, 08:53)

Giddeon, I think that it would be difficult to combine the two but not impossible.
(18.11.2005, 19:10)

John Russell:-
Stu, exelent work. I would like to have your permission to use the "CSS IMAGE MAPS" on my art page. I have one demo page set up at :

and maybe you could also help me trouble shoot it.

(of course I will referance your website in the code comments or some other way that you wish if I may use the code to finish this project.)

Thanks a million
(18.11.2005, 21:44)

I think my problem has to do with the #imap a#title

and changing pixel values because I am useing a 640 x 480 image. I tried changing them a lot though and noticed no differance.
(18.11.2005, 22:38)

JFR, you have my permission to use the css on your page. I do not have much time at the moment to help with your layout but if your really stuck I may be able to help soon.
(18.11.2005, 22:44)

Thank you, I will play with it some more this weekend and hopefully work it out. I think there was a little vagueness in the tutorial as to what numbers to change if you were useing a different sized image then the beatles example. If you have any quick insight on this I would really really appreciate it.

Have a great weekend and keep up the good work.
(18.11.2005, 22:54)

Okay, so I got it working! I changed around the -100px -100px for the background:transparent url of the #imap boxes untill there was "not trace" untill you did the mouseover. I guess this is because I am useing bigger boxes then in the example. Thanks a million, I'll post a link when I finish the site.
(18.11.2005, 23:24)

I meant to say "no trace" in my last post. The white boxes were not quite hidden before, but now it is working.
(18.11.2005, 23:25)

Came across the site while researching CSS opacity - and how it prevents W3C validation; I noticed that on your colours.html page, the CSS validator links to index.html; neither coulrs nor the menu page actually validate, but I suppose those links are auto-inserted?

Also, you probably know this, but much of your content is hidden in Firefox 1.07 - it does work in IE6 (and IE5.5)
(20.11.2005, 11:39)

Roland, the css validation on colours was an error from a previous layout and has now been corrected.
Opacity will not validate for some time to come. Not sure what you mean by 'much of the content is hidden from Firefox 1.07 as most of the examples on this site work with this browser as it is one I use all the time. The only ones that don't work are those listed under 'EXPLORER' and a couple of the LAYOUTS.
(20.11.2005, 22:46)

My mistake - I have the Adblock extension installed in Firefox 1.07, and it's killing - site works fine when I disable it, or set Adblock to 'hide' rather than 'remove'.

I did come across a method of getting opacity-enabled pages to validate, btw - a bit of javascript that document.write()'s the tags. Probably one of those hacks which goes against the spirit of CSS/XHTML's separation of style and content, though..
(21.11.2005, 05:14)

Hi, Im from Mexico city. I just saw your webpage and I think it looks very nice but the best part is that its made with CSS. I know I'll learn a lot of things about CSS
fercoho [at] gmail dot com
(21.11.2005, 23:20)

Stu, I love your works and site. You make it look so simple. God bless.
(23.11.2005, 16:13)

Oh great Stu, how wouldst thee changest the menu3 demo to show the spans to thy right of the artists, not aboveth?
(27.11.2005, 06:21)

Hi Stu, I'm from germany and just found your Page. I switched around in the internet for good css examples and I think your's is one of the best.
(27.11.2005, 17:27)

@WarAxe, it would probably be easier to use a border-right style in this case.
(27.11.2005, 23:31)

I did, but your button lights are thin and wide like real buttons... my border-right are more like squares. But they still look decent. I'll let you know when it's up. :-)
(28.11.2005, 04:31)

Dear Stu,

First off, I want to thank you for this unbelievable site! You're a CSS genius! :D

I was wondering if you could help me though... ^__^

I'm trying to get a "make poverty history" banner onto my page, like in this website:

but since journals/blogs don't allow the use of hasn't really worked. I was wondering if there was a way to use CSS to make it up at the top like that, working in all resolutions. I tried using DIVS and class tags, but to no avail.

(30.11.2005, 05:07)

Ally, it is difficult to say what would be the best way without seeing your layout, but basically you could just have the image link styled with a position absolute top right and place the link at the top of your page in the body tag, you could also give it a high z-index to make it always visible if the page is resized.
(30.11.2005, 08:24)

Stu, this site is so completely wonderful I can't even stand it. I wish I would have found you ages ago! All of your examples are so easy to use and modify; thank you so much for providing this resource. I do have one question, though: How would a person go about modifying your "SLIDING TAB MENU" example to have 9 tabs, instead of 5? I can't seem to get the formatting correct. Thanks again for being wonderful. :)
(30.11.2005, 22:24)

Aubre, it really is a case of trial and error, and depends on your content. Basically I have an outer height of 33em and a full tab height of 15em ( span) this gives 18em height for the four tabs (4.5em each). If you have 9 tabs instead of 5 then you need to increase the overall height to 8 x 4.5em + 15em = 51em.
(30.11.2005, 23:52)

I have used your cross-browser dropdown menu quite effectively for the "Writing " page of my site,"". Thought you might like to see it in action.
(02.12.2005, 22:25)

Oh great Dr. Stu, I have raised krazy korners all over my site. Is it terminal?
(04.12.2005, 04:08)

dear stu - just discovered your site - it is terrific and just what I needed when I needed it - good karma works that way. please don't stop working the css.
(06.12.2005, 20:35)

Mauricio Samy Silva:-
Hi Stu,
The link to "Two color text for Mozilla and Opera etc." into your RSS2.0 feed is broken. Regards, Maujor
(10.12.2005, 18:57)

Thanks Mauricio, fixed.
(10.12.2005, 22:28)

toto e:-
thanks again, stu! u are Great! how often must i post this??
(14.12.2005, 12:03)

I was wondering what you thought of these menus (note, they use javascript and css)
Not too keen on the use of div tags to lay out the content, I think li's or di's are a better choice.
(16.12.2005, 12:23)

hey good work... just found this site... i usually peruse alistapart, csszengarden, and zeldman's site. this is probably not as well known, but the examples and demos you have are pretty awesome too.
(18.12.2005, 11:03)

Stu, in regards to "two tone headings", wasn't sure if I should post this in the related comments page for that demo as I didn't know if you would actually go back to read. I'm not sure if you're aware of this technique similar to yours:

Anyways, enjoy your holiday!
(20.12.2005, 01:43)

is it ríght that you can not scroll the content in "fixed" layout 1-4?
or is it just a bug that happens when i try it.

greetings mks
(20.12.2005, 11:42)

mks, if you are referring to the mousewheel and Firefox then it is a bug that has been cured by the release of the latest version 1.5
(20.12.2005, 12:14)

Tim, I read all posts on all pages ;o) The method to which you refer is done using an image overlay, whereas mine is just text.
(20.12.2005, 12:19)

Thx, it was a firefox bug.

Great job
greetings mks
(20.12.2005, 20:15)

Kevin Gallagher:-
Stu, Thanks for sharing your methods of working with CSS. Always an inspiration!
(21.12.2005, 19:36)

All. If anyone has emailed me recently and have not had a reply then I apologise. My PC crashed on Christmas Day with what appears to be a hard drive failure, and as is always the case I have not backed up my data recently. So I have lost all my recent emails. I now have a brand spanking new PC with all the bells and whistles and will now set about trying to recover my old data. You could try sending your emails again as this will be quicker than me taking apart my old PC. Have a Happy New Year all.
(27.12.2005, 22:36)

Stu est le magicien des css. Son excellence du code doublée d'une créativité intarissable font que "This guy is the best of the best". C'est avec l'impatience des enfants que nous attendons chacune de ses nouvelles démonstrations ; émerveillés comme nous l'étions tous pendant les fêtes de Noël.

Thank you lot Stu.
(29.12.2005, 09:28)

Francesco La Macchia:-
This site is pretty awesome. I like your tricks and everything I've seen there, and in my future works I think that your examples becames my first source of inspiration. Thank you!! :)
(30.12.2005, 15:02)

hey stu, you are doing a great work and gave lots of inspiration. I cannot tell how I want to thank you. keep on rockin'
(05.01.2006, 10:05)

Chris Williams:-
Hey Stu. Just thought I'd leave a comment here to thankyou for your new "simple minimum width" layout. I was using your previous version that for some reason was causing havoc with form fields in IE5/5.5 (most likely in just my design), however your new version managed to fix this and all is now peaceful once again!

Thanks so much for creating this website and posting all your experiments for us all to browse - it's an invaluable resource for me and your hard work is much appreciated.

Thanks again.
(06.01.2006, 11:41)

Stu, Congratulation on the #1 spot ;o) Well deserved.
(08.01.2006, 04:30)

Stu, if the xmlns is defined for the html element, what is the benefit of defining the xmlns of a p? Isn't the p already defined as xhtml? Just wondering the concept behind your use of the namespace attr as I'm not familiar with using it within the body. I understand you can put xml in xhtml documents and vice versa and that's what it's for, just curious what the advantages of defining the namespace of an element.

Thanks for your time.

P.S. Would you mind enlarging your comment textarea a few rows larger? Would makes things easier when writing longer messages.
(10.01.2006, 22:50)

Tim, can you clarify where I have defined the xmlns of a p?
(10.01.2006, 23:01)

Stu, on your homepage, menu homepage, a three column list, and any p I've noticed since your current redesign with the class "highlight" where the background is set to light yellow.

I wasn't sure by your responce, but to clarify, my original message was not intended to criticize your use of this attr in any way, it was out of curiousity in what it is generally used for within a page ;)

Maybe defining the xmlns means something else than which I assumed and/or am unaware of. Anyways, I'm interested to learn about it.
(11.01.2006, 09:57)

PS - Thanks for the comment textarea increase. I feel like I owe you so much. You've opened many doors to CSS for the public's use, I feel somewhat spoiled asking for more of you. I will think of some way to repay you in the future..
(11.01.2006, 10:04)

Tim, textarea increase took 10 seconds and if it helps everyone then it's fine by me ;o) I think there is some confusion over the 'highlight' class which I have used on <p> elements. There is no additional xmlns definition for this. I think what you are referring to is the IE hack * html .highlight which is necessary to reduce the width of the paragraph in IE which has a problem in calculating widths when the text is italic.
(11.01.2006, 11:32)

Stu, view your site in Firefox 1.5 to see the xmlns attr in highlighted p's. It's only in FF1.5 as I've viewed source in IE, Opera, even FF1.0 and they all read your single attr of class="highlight" just like you intended.

Beats, me :o/ I'll ask around to see what this is about.
(11.01.2006, 21:18)

Tim, I am using Firefox v1.5 and cannot see this.
(11.01.2006, 21:58)

Stu, sorry, I recently had a plugin installed called "view formatted source" which is the only thing I can think of that would have done this sort of thing. I do believe it may have had something to do with your site being true xhtml1.1 , as firefox supports the mine-type, but I could be wrong.
(12.01.2006, 15:48)

Btw, there are no more xmlns attr's in your highlighted p's, must have been that plugin.
(12.01.2006, 15:49)

Tim, this site is true xhtml1.1 on conforming browsers (I use mod_rewrite).
(12.01.2006, 16:09)

Stu: I've build a page using a bar chart:
I used headings (h3), because it seems to me that they are headings. Anyway, it displays well in Firefox, but the far right side displays poorly in IE, since IE expands the box contain the text. Would you have any suggestions for how to fix, or code around, this problem?
(12.01.2006, 19:01)

Steve, you could try giving the <h3> a position:absolute with a specified width for the color background then use a containing <span> for the text.
(12.01.2006, 21:10)

Peter Quinn:-
This site is amazing and has taught me so much in a practical way.
(14.01.2006, 16:44)

Zac Gordon:-
I really like the demo for Image maps with extra detail. I am currently trying to do something very similar but was having trouble decifering how it all works. Would anyone have some suggestions. This is by far the best css image map I have seen. Thanks!
(14.01.2006, 17:36)

Stu, thanks so much for the informative site! I'm trying to simplify snazzy tab menus. It seems that the <b class="xsnazzy"> tag might be unnecessary for modern browsers. Is there a case where the tabs render poorly without it? At first glance it looks ok on Op8.5/Ff1.5/Saf1.5 on OSX and IE6/Ff1.5 on WinXP. Example with xsnazzy removed:

Thanks again. =)
(22.01.2006, 13:14)

... make that Safari 1.3 on OSX, not Safari 1.5.
(22.01.2006, 13:16)

In the cascading menu theres a simpler way (at least it works for me) to make the "child" have the same vertical position than the "father". Using a "margin-top: -22px" (father height + 2px) for the child makes it independent of the position of the father, thus don't needing to use one line for each child.
(22.01.2006, 15:39)

Curby, if you find that it works without the xsnazzy class element then leave it out. I have not checked this on all browsers and it may not work in older versions of IE.
(22.01.2006, 19:33)

Christian Montoya:-
Stu, have you seen Not as hard as your CSS Maze, but at least you can't cheat :)
(29.01.2006, 23:22)

Stu, can you assist with Snazzy Menus 2? I'd love to know how to A) get the tab to change colors when hovered; and B) Get the tab to stay in the up position when clicked (and stay in the up position with the hovered color on the target page. Little help? Thanks
(01.02.2006, 00:39)

Stu --

Can you confirm whether it's impossible to combine a couple of your demos.

I created your fixed layout design - it uses the "Quirks Mode".

I created your photo gallery design and intended to use it in the "content" area of the fixed layout design.

However, the photo gallery design does NOT use "quirks mode".

I only have a problem with IE6 not displaying the vertical scrollbar in the 'content' area on my photo gallery page [which is within my fixed layout design website].

If I put the photo gallery page into 'quirks mode', the gallery photo displays in the photo scrollbox. ????

Can you explain where the conflict is between the two? ie; What is actually happening when the browser is in 'quirks mode' to cause the photo to display in the scrollbox.

(03.02.2006, 15:25)

Bruce Pearcy:-
The past three hours have been a delightful and informative browse through your cssplay site. I am using a mac and the latest version of the iCAB browser (382). I would say that 95% of your code rendered properly ( even the 'explorer vertical align' sample). Sorry to complicate your life with another browser but Alexander's client should be on your list to check it out when you get a chance. Thanks again ... bruce in Toronto.
(05.02.2006, 19:15)

I visit here often, still learning, Just wanted to say thanks, CSS is very addicting, after I get a good layout set. I start playing with design. I am ending up with quite a collection. Thanks again
(09.02.2006, 06:08)

Had to take the script down whilst I fixed a hacker's attempt to corrupt the data.
(22.02.2006, 18:54)

Great blog:-
The blog is very useful.
(23.02.2006, 04:52)

B. Oria:-
M. Nicholls thank you for allowing us to see and get inspiration from your great work :)
(25.02.2006, 14:23)

mark from ireland:-
A general comment from someone you've helped a lot in the past.

I drop in here very regularly - you're a good host. And your new header image caused a guffaw of delighted surpise. It's genuinely witty - conratulations to whoever made it.

just sayin' :-)
(26.02.2006, 01:25)

Mark, nice to hear from you again, how's the doing?
The pebbles are not mine (I wish they were) but the photo from an unamed artist at the stock xchng
(26.02.2006, 12:30)

Sean P. O. MacCath-Moran:-
Greetings Mr. Nicholls,

First, (and I hope you're not tired of hearing this), thanks for providing such a wonderful service! You AND your website rock the casbah.

Second, I'm currently revamping my website using Savant2 two create a tight, template driven system. In doing so, I've decided to use your Krazy Korners for my various columns to and containers, and implemented these as a Savant2 plugin. My question is this: do you mind if I post such a code-base for general use on the Savant2 website and / or for download from my home page?

I recognize that you repeatedly state "You can use this method without asking my permission", however, I thought it would be polite to ask your permission first! =o)

Please let me know,


Sean P. O. MacCath-Moran
Voice & Fax: (877) 313-8381
cssPlay at emanaton dot com
(03.03.2006, 23:49)

Sean, you have my permissionand good luck with the site.
(04.03.2006, 00:12)

Sean P. O. MacCath-Moran:-
Coolies - thanks muchly. =o)
(04.03.2006, 00:28)

Repeating many others, but hey, great site, really showed me that CSS is more powerful then I thought. I was wondering if you can tell me how to use CSS to Hide blocks on my page that would show up when a user clicks a tab on the Snazzy Borders Menu. If you know my space, what I want to do is make it so that my page components are all hidden, and just the menu shows, and when visitors click on tabs different parts appear and disapear. I could do this in 2 seconds with javascript, but you cant use javascript on MySpace. if you need more info you contact me at thetmcwizzard (at) yahoo (dot) com. Thanks.
(08.03.2006, 02:51)

Karaethon, this web site is full of styles that can be adapted to do what you want. The click photo gallery for instance shows images when a user clicks on a 'menu' image.
(08.03.2006, 10:18)

I spent close to the entire day checking out all the funky things you have done using CSS, and trying to utilise these concepts in a site I am currently designing. This really is packed with some really great ideas, its definitely a CSS reference to remember.

(10.03.2006, 13:45)

Hi Stu, I'd really like to see if you could come up with a solution for borders with round corners using css. I have found a few solutions online, but they are quite complicated and I'm having trouble making them work with nested divs. I'm sure you could probably come up with something much better. Cheers.
(13.03.2006, 17:19)

Andrew, have a look under, Boxes > Snazzy borders and Krazy Korners.
(13.03.2006, 20:12)

Hi Stu - as always knocked out by your work and like the re-design. I utilised your original 'photograph gallery' (hover and click), finally working out how it all hung together. Now I see your latest 'Click Gallery'. I am trying to work out the trick that doesn't pre-load the images and the more I look the more dumb I feel! Can you point me at the key? And thanks for all the wonderful stuff.
(15.03.2006, 10:05)

andy, it's the em, span {display:none;} bit that does it. When a browsers sees display:none; it doesn't fetch the image information. It is only downloaded when the :active/:focus is applied to the <em>....</em>
(15.03.2006, 10:16)

Thanks Stu. Damn! I played with that bit too and didn't see the difference! Probably made a mistake. I'll go back and try it again!
(15.03.2006, 10:31)

By the way - I meant to ask. Do you accept CSS challenges for people that are stuck? :)
(15.03.2006, 11:14)

andy, it depends how much time I have available. I am always willing to take a quick look, but no promises of an answer.
(15.03.2006, 12:33)

It's something that sounds so simple until you try it! We are wanting to centre an image of UNKNOWN width (it changes dynamically so the next image may be wider); give it a border and, preferably, an outer border as well - say 10px outside of the image border. For all current browsers! Do it with tables :) and it's a breeze. But we can't find the right CSS for it. Can't find any examples either unless the width is fixed. Any ideas?
(15.03.2006, 12:48)

Wow the new validating link calendar is great! It's just what I'm looking for to implement into my homepage. I'm trying to combine the validating link calendar with the hover click demo. So when you stand on a date a picture under the calendar appears. But I do not get this to work. Is this possible? By the way,
(15.03.2006, 14:00)

Robert, it should be possible using :hover, but may not work using :active or :focus.
(15.03.2006, 14:25)

andy, to center an image use text-align:center; to give it a double border use border:10px double #000; or if that is too bold then do away with the inner border and use 10px padding with a 1px border.
(15.03.2006, 15:09)

Ah! The 'double' might work - hadn't thought of that. it's for my son so I'll check with him when he gets home- thanks. Very sneaky! Thanks for the tip.
(15.03.2006, 16:32)

Stu, I managed to turn your original dropdown menu into a flyout menu that works in IE, FF AND Safari. No, it doesn't validate fully, but it does take care of the Trifecta of browsers for all intensive purposes. I'd be willing to post it, if not for the word limitation.
(17.03.2006, 22:28)

Peter, you can email me stu{at} I will take a look.
(17.03.2006, 22:31)

Tim Callahan:-
Stu, definitely a diverse looking header. I hope this one stays for a while. Great color palette.
(19.03.2006, 00:58)

Tim, thanks. May be a tweak or two, but it will stay for a while (until I tire of it).
(19.03.2006, 09:00)

This is an amazing site! I browsed through all the demos, beat all the mazes, and then when I came to the last one, the validating list calendar, an idea was born. I'm using this bit of genius as the basis for a native event calendar system for the MODx CMS/CMF ( No javascript, no extra database manipulation, just a bit of code to add the CSS to the head of the calendar's page at run-time. Absolutely unbelievable stuff here! By the way, I'm a self-taught grandmother, 3 kids, 7 grandchildren.
(20.03.2006, 04:53)

sottwell, glad to be of help. Oh, and I too am self-taught heading for my 60th birthday. Good luck with the calendar project, let me know when it is finished so I can take a look.
(20.03.2006, 08:15)

Your left scroll bar works in Opera v8.02. You had a comment on your page that said it didn't work in Opera.
(21.03.2006, 19:08)

how can i vertical center a div tag?
is there any compareable method with:


mfg mks
(23.03.2006, 09:53)

MKS, there is no easy way to do this, though if you search Google you will find a few hacks that will achieve this.
(23.03.2006, 10:11)

Thomas Isaksson:-
I have an irritating problem with horizontal tabs. I want them to have a min-width, expand if necessary (with padding on the sides) and have the text inside them centered. Is this even possible?

Of course I can get it to work in IE since it doesn't need the mid-width and just expands anyway. But in Firefox the text is automatically left aligned, and in Opera they dont expand beyond the min-width.

Any solutions in sight? I've tried google for a solution with no success.
(23.03.2006, 16:06)

I'd love to use your css click gallery as the basis for an online portfolio I'm currently putting together. Trouble is, there's an awful lot of work to be displayed in various sub-galleries. Is it possible to convert your CSS to handle multiple galleries, instead of having to write a huge CSS script which details each and every thumbnail corresponding to the artworks?
(23.03.2006, 16:19)

I always loved this site. I learned so much of it. My website looks SO MUCH BETTER, just by your demos!
Thanks Stu!
(23.03.2006, 19:10)

Oh, one last remark, through this is a great site, it sometimes a bit difficult to see how it works, it would like some extra comments in the css, like this:
h1 {
/*Sets font size to 26pt*/
font-size: 26pt;

I know it is not a good example, but, for example the frame page, is very difficult to understand (I don't understand it at all, and I would like to use CSS frames).
(23.03.2006, 19:25)

Birchtree, I'm afraid that you will need to use something like php/MySQL to hold the required data and update the page information in real time.
(23.03.2006, 20:15)

Ach, thought so. Thanks for the response!
(23.03.2006, 20:18)

Stu, inspired by the Simple List Calendar I tried to make an appointment calendar whereby different day background colours are changed by a mouseover on each month. Failed miserably so far, any ideas?
(25.03.2006, 10:06)

Chris, to do this you would need to enclose the complete month within a link tag and then the individual days with another link tag.
Now it starts to get complicated because you have links within links, so tables to the rescue and you end up with something like the validating link calendar.
(25.03.2006, 10:16)

Stu, agh, got it thanks! Is there a shorthand way of adding selector id d2 to the first line without the parent selectors?

#year li a:hover table #d1{background: #0db669;}
#year li a:hover table #d2{background: #0db669;}
(25.03.2006, 11:20)

David Reagan:-
Howdy Stu,

Love the sight and have started playing around with some of the freebies. In the spirit of open discourse, I have something I developed that might interest you.

I've been using a background-image(gif) to achieve a mouseover effect for some of my older pages, but I wanted a way to do it that had two colors and was pure CSS.

I got the idea of using pure CSS popups as described on Eric Meyer's CSS on the Edge site.

I finally figured out a way, but thought you might have a better way, or maybe streamline the code. I've only been at this since January, and I don't "think" in CSS yet.

See it here: Mouseover.html

Then I got real ambitious and came up with this: Background Color MO Red-Blue.html

Thanks again for the site. Cool stuff, and I was just commenting last night how CSS is more like a video game than work...

CSS Play indeed

-David Reagan
(27.03.2006, 04:51)

Your website is AMAZING !!!
you're in my top5 best programmer !!!
(27.03.2006, 17:43)

Stu, I was checking rendering engines out for a project being discussed with someone and figured that using this site would show flaws in any specific engine fairly quickly. I was right.
using Konqeror with the khtml rendering engine there is a lot of flicker in the position:fixed; fixed layout. The other fixed layouts it kills the scrolling on a wheel mouse. [ I know, not an issue with the site, an issue with the browser :) ]
I just figured that you would like to know that the KHTML rendering engine isn't a compliant engine either.
(28.03.2006, 20:07)

All of them have their faults, just some more than others ;o)
(29.03.2006, 08:14)

Great site! Very inspiring, yet daunting! I am also a novice at CSS and more remarks/comments in the CSS would definitely be helpful. And, if I may get greedy, tutorials on all your different techniques (especially on how to get IE to do the frame-like thing) would be even better.
(29.03.2006, 22:00)

IsamuM, thank you for your comments. I have written a few tutorials on my work but I find that this takes way too long to do and if I were to spend the time doing this the content would only be half what it is at the moment.
However, new pages that I put up have had the css and html separated into downloadable files and the css files are commented to help you understand the styling.
But nothing can beat a good understanding of css before you embark on copying these demonstrations.
These will be of little use if you are just starting out with css as some are very complex and may put you off if you try to alter them without knowing what you are doing.
So, grab a good book, get a reasonable grasp of the basics, then delve into my site ;o)
(30.03.2006, 08:06)

Stu, Thanks for the response! I said that I'm a novice, but I have a basic understanding of CSS. I just haven't programmed in it much.
You wrote above that some of your new pages have the CSS and HTML separated into downloadable files. Could you point out one that does a reasonable job of simulating frames in IE?
(30.03.2006, 10:57)

Isamum, look at
for an example of a 'frame' layout which also has a tutorial giving step by step instructions.
(30.03.2006, 15:14)

Hello Stu,

I must say I find your work amazing! I've been inspired by many of the demos on your site. I'm trying to develop a page using your Snazzy Borders as the background, and using your Inset Borders WITHIN the Snazzy container. The problem I'm having is centering the Inset container. It just wants to be left-aligned. Do you have any thoughts around this?
(30.03.2006, 16:56)

Stu, Thanks! The tutorial at is also very helpful in helping me understand the components you are using.
(30.03.2006, 19:10)

John Doe:-
I'm totally new to CSS. I followed the photo gallery tutorial and it worked great. I'm hoping someone can let me know what CSS/HTML I need to add to retain the full size image once a thumbnail is clicked.
(30.03.2006, 21:22)

John Doe, it is not possible to retain the image using just css. The image will remain until you click elsewhere on the page (except for Opera and Safari which will only retain the image whilst the mouse click is held). You would need javascript to retain the image.
(30.03.2006, 21:43)

John Doe:-
Thanks stu. Doesn't the gallery at retain clicked images without using javascript?
(31.03.2006, 00:07)

great site!
(31.03.2006, 06:37)

Hi Stu
I wrote you a question on the IE weft fonts page.. can you check it please ?
(31.03.2006, 16:33)

John Doe:-
I guess specifically what I want to know is how would I modify the following example gallery to retain images when thumbnails are clicked:
(31.03.2006, 16:42)

Saludos desde Chile excelente pagina.

Hi guys! from Chile, css rulz!!!
Queen is the best band of the history.
(31.03.2006, 17:20)

I just want to say, your an ispiration and i love your work. It keeps me wondering how ar we can go and where the future takes us.

I'm just a web addict but dont have the skills and time to do it all the right way so i wanna thank for doing it ;)

CSSPLay Rocks
(31.03.2006, 22:43)

I enjoy your site, the css gallery is great.

One suggestion. After click a main menu item (menus, layout, etc), the menu items are no longer active, so you have to go back, then next demo, then back, etc.

Just a thought to keep an active menu item at the top for the current section.
(31.03.2006, 23:01)

brian, at the top right of each screen is a sub menu that allows you to browse previous/next or return to the section list or return to the home page.
You don't need to keep going back to the list to move to the next demo.
(31.03.2006, 23:23)

Dear Stu

You are bloody funtastic and you're site is the best most fun experience I have seen on the web.

Regarding the Cross Browser Tabbed Pages With Embedded Links page, could you please do one that with an up direction menu?
(01.04.2006, 19:18)

Mary, the up style would be identical to the down except that you will need to change:
.menu2 ul li:hover ul {top:30px;}
.menu2 ul li:hover ul {bottom:-44px;}
This value may need adjusting as I haven't tried it. But the idea is that the absolute positioned ul is given a bottom value rather than a top value. Simple.
(01.04.2006, 20:19)

John Doe,
You will need to set up the :active and :focus state of the mouse click.
If you look at the other demo:
You will see how this is done.
(01.04.2006, 20:27)

Thank you very much, Stu. We are trying a solution using an up style version of your Cross Browser Tabbed Pages With Embedded Links on our site. As soon as we get it working we'll get in touch for your permission and to donate to you!

Best wishes
(02.04.2006, 11:01)

Hi again Stu

{bottom:-44px;} didn't work but we did find out the correct property of {bottom:50px;} is perfect. No minus value. Will keep you up to date via email. Cheers!
(02.04.2006, 11:18)

Hi Mary, simple solution isn't it. Look forward to seeing it working.
(02.04.2006, 11:39)

This is THE BEST web site about CSS and HTML that I have ever seen !!! I really like it, you've made a great job !
(02.04.2006, 12:24)

Hi Stu,

I have asked for permission before to make use of the image map menu, but cannot seem to find my original post, let alone a reply. So, I thought that I'd double check.

This is a great site. I am new to learning CSS and am finding it very exciting. Thanks fir creating such a great site. One day I hope to become as good as you (it's gonna take a long time tho!!).


(04.04.2006, 14:31)

Stuart, there is no copyright attached to the image map menu so you can use this method as you want.
(04.04.2006, 15:47)

kevin keiper:-
ive sent an email about this, so if you've seen it ignore this, but if not... im having trouble with, making the green and blue outlined boxes to line up... each pair is within a yellow outlined wrapper div, and i still cannot get them to line up in IE. any tips? much obliged... thanks,


kevin keiper
(04.04.2006, 16:38)

kevin keiper:-
an update... regarding (see above), i had to take the .experiencebox and .descriptionbox div pairs out of their wrapper, and create an empty .break div which i placed between each pair... that way it worked in IE... but im still confused... why i could not get my .experiencebox and .description box pairs to align when i placed them in a wrapper div ? if you check my site now, it reflects the use of the .break div seperating the pair of other divs. surely there must be a way around this? ...lastly, the * html hack you told me about for IE did not work... and i took out the xml declaration in my doctype (all pages still validate without this) and it works... any advice/comments would be appreciated... thanks !!
(04.04.2006, 19:39)

I have emailed you direct with the way that I would do this.
(04.04.2006, 20:25)

It's really a great job! I'm really impressed by your job and I'd like to do a personal website with your job, well copy your job but with your copyright of course :-)

Is is possible?
(04.04.2006, 23:43)

Hi Stu,

Many thanks for the reply. I am looking forward to using this image map design for my next home page. I am having a few problems tho, and was wondering if you can give me some advice.

I cannot seem to get my pre-hover images transparent, like you have in the example. I have set them to light blue, given them partial transparency and saved them as an index transparency in Fireworks. When they are displayed on the internet though they are not transparent. Once hovered the clear button is tranparent, but not pre-hovered. The page in question is:

Thanks very much mate

(05.04.2006, 00:14)

Stuart, if you are trying to use the 'mantis' image map then there are no tranparencies used. It is made to look like a background with a semi transparent menu on top but is in fact a single background image with the menu items.
Have a look at
to see what I mean.
(05.04.2006, 08:08)

reat site. Many thanks for the freely available css codes. I've been working on putting one of your dropdown menus on the top of a page, with two divs below (one of which features a background image). Whatever I try, though, the menu always drops down behind the divs (it drops down over the page or a <p> as it should). Any help you could offer me on this one would be very much appreciated.
Graham R.
(05.04.2006, 09:10)

The only time this menu will drop down behind is when there is a form or an object (IE only).
The controlling style is the z-index.
You will need to give the following divs a relative position and a low z-index.
(05.04.2006, 10:12)

Just wanted to drop you a line to let you know that I am a great fan of your work here and visit your site almost daily as I continue to develop my own CSS tricks and treats. Keep on having fun!!
(05.04.2006, 19:40)

Thanks Stu, I have used your coding but maybe I am a little out of my depth. I printed it out and made notes next to each bit of coding to get an understanding of how it works (and thought that I understood) but this transparency thing is confusing me.

I understand that you created the link images, two together so that one shifts out / in view when hover is activated. So, did you
(06.04.2006, 00:17)

Thanks Stu,

I thought that I had an understanding of the Mantis CSS coding (I have examined it closely and pretty much copied it as a test) but maybe I am a little out of my depth.

I understand that you created one composite image for the two link buttons, they shift in / out of view when hover is activated. But for the non hovered link did you color & label the button background yourself? I have done this, got rid of partial transparency (so there in no transparency on the gif at all) but it still doesn't work.

I have seen that you are using background:transparency. For some reason this doesn't seem to be working for me. However, when I got rid of this command and substituted it with the below command I achieved transparency on the unhovered button.

filter: Alpha(Opacity=70);
-moz-opacity: 0.70;

I appreciate you help, this design is very cool indeed!!


(06.04.2006, 00:29)

Stuart, I don't think you are seeing the menu correctly. All I have done is create an OVERALL background image (just one) that looks like it has the transparent links over the mantis image 'insect/hex_nav.gif'. The links are by default transparent and allow you to see this background image through the links. When you hover over each link you then get the link background image which make the link look completely transparent 'insect/demos.gif' for example.
one <ul> background image
links transparent by default
link background images for each link on hover

NO transparency involved.
(06.04.2006, 08:46)

Hey Stu,

This is a grea resource for people, and i'm very glad there are people out there like you that share their talents like this.

(06.04.2006, 17:41)

Your site is in my RSS bookmarks and I keep an eye on it because you have a real talent for finding new applications and ideas. This is a great source of inspiration.

Thank you very much for showing me the way to go.
(10.04.2006, 07:06)

Täteretä, yo Stu - nice thanks 4 keeping it real.

greetings from germany
No.1 fan
(10.04.2006, 17:46)

You have put a lot of work into this web site.
Great job done. You give CSS a new vision for all to see - Thank You
(12.04.2006, 11:09)


Thanks for the great site. I refer to it constantly for new ideas. I have implemented your drop down menu without javascript, and it works perfectly. Thanks again!
(12.04.2006, 14:22)


Congrats on the site. I have used your rounded boxes for link buttons and am having difficulty getting them (x4) to appear inline. They keep appearing underneath each other. Any suggestions on how to resolve this. Thanks for the tip. This has been a fantastic help. Keep up the good work.
(16.04.2006, 15:51)

hey stu, I just wanted to say Great Job on the new header for the site!! I love it!
(17.04.2006, 01:26)

Thanks John, it is fairly basic, but I think that it is easier to use than the previous ones.
(17.04.2006, 09:03)


You have saved the day! You are a CSS genius. I like the update to the site as well.

My new moto is "What would Stu do?"

Thank you so very much for your work!!!
(19.04.2006, 03:16)

you are a genius!
(19.04.2006, 04:42)

Your site is great! I have used a lot of your code in my own web site and it works flawlessly! Don't worry, I always link back to this site.

Keep up the good work!
(21.04.2006, 06:40)


I had a look at table scroll examples and i must admit they are awesome. Do u have examples on vertical and horizontal table scroll. Because in case there are many columns in a table, one needs to have horizontal scroll with headers scrolling with the body.

Any ideas?
(21.04.2006, 11:39)

vicky, I haven't tackled horizontal table scrolling but I think that there are several examples on the web already.
(21.04.2006, 12:31)

Alex Thorburn:-
A great site for a novice. I've used one of your earlier photo album designs in a web page, ( I'll try one of your more recent designs in the future.
Reference to your name is included
(21.04.2006, 20:23)

I have no idea where my comment has gone. It'd be nice if latest comment is placed on the top. Just a thought.
(22.04.2006, 12:59)

Geneva, if you posted under this page's comments then you can see all comments for this page by selecting the 'show all comments' * beneath the last posted comment.
(22.04.2006, 13:14)

Hi Stu, got you, and I'm seeing my message now. But I still think it makes more sense to place the latest comment on the top of the first page as well as the all comments page. Your cutting- edge css and photography are both amazing! I'm a photographer too :)

I've posted my question twice but don't know where they went. Now I'll repeat. Having seen the demo you're using on the redirecting page (from an old url), I'm wondering if it's possible to make a tad more complex use of the scripts to create an organigram tree (i.e. an organigram of an organization). Thanks in advance for your advice.
(22.04.2006, 13:30)

I meant the page.

I'm thinking of a CSS-based organigram with pop-up boxes showing thumbnail photos and the description of the staff. A too wild thought? :)
(22.04.2006, 13:39)

Genevois, sorry I missed any of your previous posts.
I think what you are after may be possible, but would require a fairly complex css structure.
I may attempt it one day, but at the moment my time is fully booked.
(22.04.2006, 14:13)

Dear Stu, I would like to use your multi-page photo gallery in a commercial web site. I could not find an email address for you. How can I contact you? Thanks
(22.04.2006, 17:22)

Hi Stu,
Thanks a million for Krazy Korners.
It's an excellent tool.
I'm building my own site now (finally!)
It's a work-in-progress at the moment.
I'm using Joomla CMS.
(24.04.2006, 12:24)

The site is at
The problem I am having is that firefox displays the centre div's Krazy Korners correctly, but IE6 doesn't.
I've been going around in circles with this thing and I haven't gotten any closer to resolving it.
Can you help me out please?
(24.04.2006, 12:25)

Hi Stu,

I always feel guilty posting like that, i.e. - "Great work... Can you help me out?"
Anywho, I came across a thing called a "Tan Hack".
It seems to have sorted out the problem by increasing the border on the boxcontent element to 4px for IE.
I'm not sure if there are other issues with using this hack, maybe it doesn't resize well, or maybe new or previous versions of IE will have a problem with it.
I'll jump that chasm when I come to it.
Thanks again for the class Krazy Korners, and on this excellent site, it'll be a regular haunt of mine from now on.
(24.04.2006, 13:17)

Previous post by mrjohnpc
(24.04.2006, 14:13)

mrjohnpc, glad you found the answer.
I had a quick look at your problem and noticed that you have divs nested up to nine deep within the content box and though that this might lead to problems with padding/margins/borders.
(24.04.2006, 14:32)

Thanks Stu,
A lot of those divs are created by Joomla although I've added a share!
But the excess ones added by Joomla are a pain, and have caused issues in the past.
I worked out the problem (mostly).
I hadn't given the div, I wanted to apply the corners to, a width.
I want my site to be vairiable width, fluid, etc.... so I gave the thing a width of 100% and set the margins to clear the side navs.
Quelle surprise this works as I'd hoped in IE6, but for some reason Firefox was causing the div to flow off the right side of the screen, ignoring the margin-right property.
It's probably my error, because I've searched high and low and there's no mention of this problem in Firefox.
The fix was to revert to no width property, but use the tan hack to give IE a width property.
This has worked, except corners at the bottom of the div are a pixel or two off.
I'm not really sure why that happened, plus there's occassional peekaboo there too.
I still have a lot of work to do on the site, and I hope to iron out these relatively small problems before finishing.
Thanks again for your help, this site is a brilliant resource.
Take care.
(24.04.2006, 16:28)

Tim Callahan:-
Stu, I was talking with a friend about a redesign of their site. He mentioned having a reaper that points to an image of a member when you hover the member image. As soon as he said that I thought of you. Do you think any of your examples could be adapted to this, or does this sound like something you may be interested in developing in the future. Just an idea.

Talk to you later.
(25.04.2006, 05:34)

Tim, you are correct in thinking that this may be possible using css. All that would be necessary is a reaper image for each member which would change on hover. Simple.
If you have the reaper images and the member images already then I could perhaps look at them.
(25.04.2006, 07:58)

It's wonderful! it demonstrates us the deepest thing in such a simple way.
(25.04.2006, 09:20)

You are a mage!
I'm green with envy!
(25.04.2006, 13:16)

Hi Stu, someone recommended me to your site and I have to agree that this is really amazing. I'm not an advanced user, so I have a very basic and perhaps even stupid question. When I saved your page and opened in my Dreamweaver, it becomes a total mess. Do you pages look nicer in your Dreamweaver or you only look at the codes then view them with browsers? I guess there're others like me but they're just too shy to ask :))) In fact, I have the same issue with other advanced sites too.
(25.04.2006, 16:47)

Yuan, Dreamweaver? what's Dreamweaver? No, seriously, I do not use any web template program to produce this site. It is ALL hand coded using EditPlus. This way I have ultimate control over the page styling and if it doesn't work it is my fault as I cannot blame the tools.
(25.04.2006, 19:50)

Hi Stu

A Lot of great stuff on your site. As a newbie to CSS can you recommend any books references to learn CSS. There is so much out there not sure where the best place to start. Any advice aprreciated:-)
(25.04.2006, 22:57)

Chris, I have not looked at any books on css. I downloaded the specifications for css1 and css2 form the web site and ploughed through them. Then my eyes were opened to the possibilities by Eric Meyer's site and the rest is self taught with the help of the web.
So, no, I cannot recommend any books, sorry.
Anybody else got a list?
(25.04.2006, 23:11)

Hello Stu!

I found your Page in a css list. Since nearly 1 hour I´m surfing through your page - completly astonished about all the things you made.

On this way I want you to congratulate and thanks a lot for the possibility to use some really great things ;o))

Nice Greatings from Austria ;o)
(26.04.2006, 12:26)

Stu, you're a genius! Wish I could crawl into your mind and harvest your vast CSS knowledge. Re: your mantis menu. Did you know that your hexagon arrangement represents a flower in a Grandmother's Flower Garden quilt pattern? I'd like to make a hexagon flower menu but how do I start? Did you create your hexagons separately or image slice them from your gif? Could you please set me on the path to making my own hexagon menu? Thanks very much!
(26.04.2006, 16:24)

In regard to my last post ... harvest? Yecchh!
That sounded sick. Sorry! How about if I could just get in there and Ctrl-C? Wouldn't want to actually surgically remove anything. ;)
(26.04.2006, 16:37)

Helma, the Netherlands:-
Impressed with everything, I simply had to donate. I keep coming back here. Small designers like me cannot do everything themselves. So, if you want to present good stuff, it is great to have people like you, offering your knowledge and examples.
Keep it up, Stu, we need you.
(26.04.2006, 16:43)

This site is TRULY amazing! I am a middle of the road CSS designer and your site has given me SOO many ideas. I have searched the web for hours looking for cool CSS tips/tricks and found the mother load when I found you. THANK YOU for being so creative in a very simplistic way.
(26.04.2006, 19:35)

charli-bar, oooh, I don't like the sound of Ctrl-C. You may get more than you bargained for, or worse you might Ctrl-Alt-Del by mistake.
Anyway...I started off with the mantis image and overlayed the hexagon grid with layers allowing my to turn on and off the grey opaque background.
The unhovered menu uses a background image with the overlay and all hexagons greyed.
Then I sliced each link hexagon with a transparent background (the link is in fact rectangular and includes areas of the surrounding hexagons greyed out).
These slices are held as background images for each link and are switched on and off with :hover.
Hope this is clear as it is difficult actually describe. But if you check the images used on the menu you will see what I mean.
(26.04.2006, 23:06)

Hey Stu,
I work with a search engine optimization company. I can tell you that your work is not for nothing because it has helped me make a dynamically drawn out menu that uses your scheme for vertical and horizontal menus.

I say by far your latest menu the final_drop was cached in the search engines and the menu still works unlike some menus that are CSS that uses JavaScript to make the menu work. The menus you use that can be cached by the engines is a big deal because that has a lot to do with your rankings. Because if it don't cache properly then yahoo, since they also use humans to determine your rank, will penalize your site. When I have placed the menu on my site and when Yahoo caches it, I will let you know the final verdict of the dynamically drawn menu.
(27.04.2006, 06:53)

Hey, Stu, thanks truckloads!
How about if I Ctrl-C just the CSS folder? And promise not to slip and hit Ctrl-Alt-Del? :)
Thanks ever so much for the valuable info. You made it crystal clear. This is so exciting! However, I'm fairly new to this -- an old dog learning new tricks -- and I'm a bit in over my head. Or could it be that I'm having a blonde moment? I've only sliced once but I messed around with your mantis gif (that praying mantis is so adorable!) in PSP 8 (or was it 9?) yesterday and it was immediately apparent that the slicing process wasn't going to accommodate the hexes. Con't...
(27.04.2006, 13:22)

Dang it, I keep forgetting to post my name. Anyway, I don't get how if the slicing is rectangular, you can click anywhere in a particular hex and end up at the proper link.
I saw the Top and Left settings in your CSS file for each hex, within the 400px gif. Does that have anything to do with it? Did you change the cursor for a reason or just for kicks? I mean, does that have anything to do with the clicking?
I'll give this a go and report back.
Thanks so, so much!!
P.S. This is so cool. I just love having the master teach me the new tricks! ;)
(27.04.2006, 13:28)

charli-bar, The background (unhovered) image is

The opacity hover image is

You will see that the hover image is rectangular. If you hover over the centre OPACITY hexagon and then move into MENUS or DEMOS, for example, then you will notice that it doesn't register until you are well into the new hexagon. But you tend not to notice this as you move from hexagon to hexagon.
(27.04.2006, 14:40)

Hey Stu,

Check out the dynamically drawn menu at
(27.04.2006, 18:05)

Your streaker animation is absolutely magical.
(27.04.2006, 18:12)


All are gr8 stuff..

can i use one of your css template with graphic i.e. the holy grill page for my personal page ?

i like it..

(28.04.2006, 13:10)

fixan, you can use the method and style, but not copy it with graphics exactly.
(28.04.2006, 13:27)

Great sight; thanks for it.

FWIW, I've run into issues using the KRAZY KORNERS examples in a CMS's WYSIWYG editor. Had to switch the B tags to STRONG or SPAN for to not get bolluxed up by the WYSIWIG.

(28.04.2006, 14:48)

Hey Stu. I've seen you do a lot of cool stuff with unordered lists (mainly lots of different menus), but I was wondering if you're any good with ordered list? I've been trying to make an ordered list that displays inline, but I don't want to lost the numbering. If I put

ol li {
display: inline;

it loses all it's list properties. Do you know a way around that?
(28.04.2006, 18:58)

Jonas, I'm afraid that I do not know of an easy way round this. Sorry.
(28.04.2006, 23:56)

Well, do you perhaps know of a complicated way around it then? ;) That seems to be your thing, doesn't it? At least so with the dropdown menu with parallel css files and a dual purpose menu and stuff...
(29.04.2006, 01:54)

It's too bad that you allowed the blinking favicons. Blinking gifs are old school.
(29.04.2006, 05:26)

Zapped, the favicon ads are a way of generating interest in this site as well as demonstrating a css technique and finally to bring in a little money to keep this site up and running.
So in this case I considered aimated gifs to be acceptable.
(29.04.2006, 09:11)

Tim Callahan:-
Stu, regarding the reaper idea; I've chosen a double rollover menu, which I'm sure you're familiar with, similar to the adaptive path team menu.

I thank you very kindly for offering to write a menu based on the repear pointing idea. However I will be taking a crack at writing one myself if I ever do decide the site needs it. Although if I did the imagary and handed it off to you I'm sure something much better would come of it.

Anyhow, thanks again for the offer.
(01.05.2006, 01:27)

Hi Stu

I came across your site about 4-6 weeks ago whilst looking for an xhtml/css alternative to table based photo galleries. I have used a merge if your MK I and II click galleries and also one of your menus (credited on my site)

As a matter of interest I was looking for something a little more traditional (boring *yawn*) but practical, and came up with this, I'm not sure if you allow web links so apologies if this isn't allowed, you can remove it if necessary.
This layout seems to be something that is a problem for xhtml/css and is loosely based on a method by Mark Newhouse of A list apart.
I have a feeling that there is probably an easier way than this, but I quite like it, and seems ok in the main current browsers, I'm sure this is pretty basic stuff to you, but you or some of your viewers might find it interesting.

Anyway, this is a most fascinating site and I have found it very inspirational.

(01.05.2006, 19:25)

David Wood:-
Hello Stu
thanks for your inspiration. I have used a few of your techniques on our site.

Could you include a link to our site in your 'sponsors' page. I didn't realise you could do this. I made a small donation a while back.
The web site is:
David Wood
(01.05.2006, 21:34)

David, 'tis done, and thanks again for the donation.
(01.05.2006, 22:11)

Hi Stu,
am working on grey hill page with css..
but i found there is a problem with "overflow" in firefox for vertical scroll..

can you please suggest me in this regard..

some times i found that the whole page will scroll or scroll will hide..

please help me ...

(02.05.2006, 07:08)

Grafixan, I can't help without a url. if you post one then do not use the http:// bit as this will flag up a posting error.
(02.05.2006, 08:31)

Hi Stu,

Thanks for you quick response..
here is the url which am facing the problem ..

and am still changing the graphics and all as per my design..

please let me know your suggestion..

(02.05.2006, 09:56)

Grafixan, you are missing the '*' before all your html styles.
* html etc.
(02.05.2006, 10:41)

Hi Stu,

yes, its workin now..
Thanks for your gr8 help..
(02.05.2006, 10:51)

Hi Stu,
i'm pretty new to anything around CSS, but have been bitten by the CSSbug seriously! ;-) I really must say your site is one of my greatest resources for anything concerning CSS.

thanks for going public!
(02.05.2006, 15:42)


I love your site... I have been using it as my main resource for a while. I like how you put comments in with a lot of the css like the menus to explain what the different elements are acutally doing.

Anyway I was hoping you could take a look at a site i am working on. I feel like my problem is simple.... but I really have a hard time with css. I know you have some examples simaler to what i need... but I still get confused. Anyway if you can have a look. I am wanting a site that stretches 100% in height with a footer and header... but also need to be able to throw in a column when needed that grows according to the window but has scrollbars. kind of like your layout4 under layouts. here is the address.

I could really use the help... but I know your busy. Also if you have any tips on my code that would be great... I am still new and I feel like i just put stuff in and try to make it work... i never understand fully why i use what I do and I may even make things more complicated then they need to be... any tips or resources in that area would be great.

you can email me at thanks man
(02.05.2006, 22:13)

Please bear with me as I re-organise the menus on my site. Because the site has grown so much in the last year the menus were getting a little disorganised.
So I am revisiting them, reorganising and adding pop-up screen shots so that you should be able to find what you want more easily.
I am also testing Kontera 'In-Text-Advertising' which at the moment is limited to the home page and comments.
Only IE will see the home page ads but most browsers will see the comments ads.
This may, or may not, be a permanent thing, and depends on final outcome of the tests.
(08.05.2006, 09:39)

do you have a secret life as an artist? how ever did you make that cute little bunny outlined in words on your b&w archives home page?
everything you do has such an artistic flare and is so artistically laid out.
just out of curiosity, do you use psp?
i'd like to make a shape out of words like you did. would this require knowledge of vector graphics? i have learned through online tuts how to do text-on-a-path but can only do really basic stuff.
p.s. having no knowledge of vector graphics, i had to put my hexagon flower project on hold for the time being. :( i'm thinking a simple shape out of words might be easier?
many thanks for all your help!
(08.05.2006, 15:55)

charli-bar, the rabbit was done using Macromedia Fireworks. Just draw a vector line arount the rabbit shape then add the text and finally map the text to the vector line (simple?)
(08.05.2006, 17:19)

that's greek to me, stu. thanks very much for the explanation though. i'll try to figure it out using your terminology and f1. ;)
so how about this: is it wiser to create such things as menu buttons and flags, banners or whatever you want to call them -- the big text at the top of a web page -- as gifs or to use css to style them into existence?
i've noticed that you use lots of gifs. is that so you can get the exact look that you want?
what about loading time for gifs though?
i'm muddling through my first web site. i want it to be stylish but also efficient. which way should i go?
thanks, stu!!
(08.05.2006, 20:07)

charlibar, if you don't mind using the available fonts (arial, verdana, times etc) then style using text. If you want that special font (in my case filosofia unicase) then use gif images.
These can be quite small in file size so shouldn't be a problem with page load times.
Use an image replacement technique that shows the original text when images are off. If you can switch images off on this site you will see the original text.
(09.05.2006, 11:14)

stu, thanks for the tips on the gifs versus css thing. now i have another question for you: could your two-step photo gallery be adapted to include text? how about links to pop-up windows with text? your gallery tutorial is fab. most of my css knowledge comes from you, i.e. all i know how to do is copy your stuff instead of write it on my own. i still can't figure out how to make things work the way they're supposed to. all these hacks and things are horridly frustrating. thanks once again, stu!!
(10.05.2006, 21:04)

Tim Callahan:-
Stu, thank you so much for the demo and menu organiztion, I was waiting for that to come too. Much easier for me to reference your work when I'm looking for something.
(11.05.2006, 23:53)


I am having trouble with your new information balloon pop-up. I have it working in FF perfectly but am struggling to get it to work in IE. I changed a few things in the CSS but am really stuck. Would you mind taking a look @ what I've got and giving me some feedback? Thank you.
(12.05.2006, 00:56)

Christina, your best bet is to take my original styles and modify one thing at a time in both IE an non-IE style sheets.
This way you can make sure each change is correct in both browsers.
(12.05.2006, 10:07)

you're a wiz, i can't believe my eyes
i'm thankful,

mirek from prague, czech rep.
*clap *clap
(12.05.2006, 11:14)

Thanks Stu, I'll do that.
(12.05.2006, 16:50)

Nice new menu you have Stu. Oh, by the way, please look at the comments in the DEMOS -> CSS FRAMES. I asked you to simplify the css a bit, because I can't understand it.

(12.05.2006, 22:23)

Hey, I couldn't seem to find an email for you, but I was wondering if I could use the CSS Flyout/dropdown menu for a university project? I'm asking because it's not exactly personal, but not commercial either.

I am also somewhat interested in your hosting situation. How much bandwidth and space do you need? I might be able to host you. My email is my name
(13.05.2006, 10:02)

chendo, my email address is dotted around the site. stu{at}
My bandwidth is now around 200GB per month, but I am happy with my current host, thanks anyway.
(13.05.2006, 10:40)

Stu, little homepage request: dates, or some way of knowing which example is the latest.

Thank you.
(15.05.2006, 03:59)

Tim, if you hover over any of the list items 'title text' will give the date. This is the best I can do at the moment.
No doubt you have noticed changes to the lists to show a part image of each demo 'on hover'. This is part of some changes I am doing to make navigation easier.
The site has grown like topsy over the last year and it is necessary to re-organise the demos.
(15.05.2006, 07:56)

John Brittain:-
you're always busy updating your site!! I love the new features with the hovering over the links man, it makes browsing muchhhh easier to find what I was looking for. I do miss how the text overlapped a little in the navigation bar, but I guess I'll live with whats there haha
take care Stu.
(15.05.2006, 09:25)

Great work Stu, site looks cool!
(15.05.2006, 22:24)

usability is everything:-
thumbs down for use of mystery-meat navigation on home page (or is it a splash screen?)
(17.05.2006, 08:23)

usability is everything:-
the splash/mystery-meat page is
(17.05.2006, 08:24)

usability is everything, this is just a redirect screen from the original web site prior to
(17.05.2006, 09:54)

Brendan Vogt:-
I'm looking for a fixed width div layout where the colours of the columns stretch all the way down, irrespective of what column is the longest. Can some one please point me in the right direction, I have been searching between 5-6 weeks. Please mail me at

Thanks for the great Site, and keep it up.

(18.05.2006, 09:08)

Great site! I landed here looking for info on cross-browser CSS opacity, and thought I'd let you know that Opera 9 beta 1 is able to render all your opacity examples.
(19.05.2006, 18:52)

The link to your css play button isn't clickable.
(19.05.2006, 19:21)

Stu - love your image-less rounded corners. I'm having an IE jumpiness problem when using them in .net. When I hover over a link button, it causes all your border to expand by 1 pixel. Very odd. Anyone else mention this problem?
(19.05.2006, 20:32)

hey stu
i love your site! there's heaps of great stuff here.
in particular i like your krazy corners article. I was wondering if it could be applied using css generated content?
(20.05.2006, 08:08)

Hi Stu love your site, It's really given me some great ideas.

Your "Gradient Image Magnifier" works perfectly for me in FireFox and IE beta 2.

Looking at your code, I am curious as to what problem did the IE7 conditional comments solve.
(20.05.2006, 13:29)

What a fantastic site! I never thought you could do so much with just css.
(20.05.2006, 13:38)

Nevermind, figured it out.

I'm learning more about how these browsers work everyday I come to your site.
(20.05.2006, 13:42)

Cam, The IE conditional comments are not what they appear to be. They not only target IE7 but they also target ALL other browsers except IE5.x and IE6.
So all browsers except IE5.x and IE6 see the first closing </a> and only IE6 and below see the second incorrectly nested closing </a>.
(20.05.2006, 17:34)

Stu, thanks I thought that was what you were doing, but wasn't sure about targeting other browsers.

There is another way that does the same thing with fewer characters typed called "down-leveled revealed conditional comments", acording to microsofts website.

It makes the HTML visible to other browsers nomatter what the expression is. I've tested it in FireFox but haven't tested it in Opera.

Thanks for your site, it's great.
(20.05.2006, 18:05)

Sorry had problems with posting.

here's the syntax

downlevel-revealed <![if expression]> HTML <![endif]>

Thanks again
(20.05.2006, 18:11)

Hi Stu,
You have done an amazing job, the site is fantastic.
How do you add further drop levels using flyout.css / flyout_ie.css.
You have 2 levels from the master now but I need 3 or more
(20.05.2006, 22:12)

Nic Hughes:-
Thanks for the helpful site. Your background image example just solved a problem I have been wresting with for 2 days - how to create a faux-border around a div full of text that resizes without javascript (and without css3 of course).

(21.05.2006, 11:05)

Well, I made the jumpiness stop, but it looks a little clumsy now. The trick was to change the tag height from 1px to 2px. What it comes down to is the .Net datagrid renders to the page wrapped in a table. So, it's not pure!

(22.05.2006, 16:41)

Great Site. Thanks for it.

It would be sweet if there were some community aspects encouraged. Perhaps a wiki ( and/or forums? Something where folks can help each other out as they adapt bits from this site for their own?
(22.05.2006, 16:54)

Hi, the "ultimate CSS dropdown menu" is fantastic. I was wondering if the width of dropdown menus has to vertically strictly follow the width of the cells above (i.e. that cells that contain "DEMOS", "BOXES", "MOZILLA", etc). In other words, could the width of the dropdowns be more flexible? Thanks in advance for your response.
(22.05.2006, 20:22)

Dave K:-

You flicker free hover mk3 is great, but I still find it failing in safari (all versions). Apparently a bug safari was supposed to have fixed, was never properly resolved. I've found that by giving the mouse-over image enough transparent spacing at the top, you can position the background using left top,left bottom without a numerical margin. You may want to revise your tutorial to at least address this. Keep rockin man.
(22.05.2006, 22:17)

Genevois, if you look at the pull-up menu you will see that the width vary. This can be applied to the drop down menu.
(22.05.2006, 22:27)

Ben, it would be nice to have a forum, but that takes a lot more management, and I would spend more time with questions and problems and less time on experiments and pushing the boundaries.
There are several good css forums out there that are very helpful with css problems in general.
(22.05.2006, 22:30)

Dave K, thanks for that. Unfortunately I cannot test on Safari (or any Mac browser) so it is difficult to find a way round this.
(22.05.2006, 22:31)

BobD, the answer is it is possible but it becomes very hard to keep track of the css for each level.
If it were just non IE browsers then it would be extremely easy to manage (as can be seen from the Mozilla demo).
(22.05.2006, 22:33)

Any chance you'll make a download that has all of your examples in a zip file? It would be a handy resource to access locally on my machine.
(23.05.2006, 20:37)

Maybe one day, but not just yet. Too much to do and so little time :(
(23.05.2006, 23:46)

Do you think it is possible to use the photo gallery layout at as a layout for a retail website site by using the thumbnails to add the items to the shopping basket . Any ideas on how to reconfigure this would be appreciated. Thanks
(24.05.2006, 16:44)

I have developed this little HTML/CSS trick to display an image. There is no image file, it's just HTML and CSS code and therefore the image cannot be copied without a screen capture (or, I suppose, by deconstructing the html source and reversing the algorithm...)

I love your CSS work and I wanted to show this to you, but I can't find an e-mail address to send it to you and HTML is disabled in the comments. Whatever shall I do?
(27.05.2006, 02:31)

Hey Stu,
At the moment I am writing I book (and don't say my book is crap, because I know it is!). It's about CSS and XHTML 1.0 Transistional (altough there is an appendix which handles XHTML 1.1).

Anyway, to get to the point, I would like to use menu fifteen in my book. Of course, you say there is NO copyright attached to it.

However, I thought I should at least inform you about it, and since my e-mail service is doing weird, I do it this way.

Of course, I will write that the example comes from your site.

So can I please use menu fifteen in my book? If needed, I will give a donation (though it might be a bit difficult, because I live in Holland).
(27.05.2006, 14:58)

Hi Roy, you have my permission to use this menu in book form :) Good luck with it by the way.
(27.05.2006, 15:11)

Hi Stu,

The new dropdown menu here is great: A very good variation. Is it possible to have it centred?

(27.05.2006, 16:22)

.. and a third level dropdown even? ^_^

(27.05.2006, 16:25)

Genevois, it is always possible, but it gets too complicated in Internet Explorer for it to be a sensible option. But you can try if you like :)
(27.05.2006, 16:33)

I was attempting to contact you regarding possibility of permission/cost of using one of your menu schemes on a website. However is reporting failed delivery. Is this address correct?
(31.05.2006, 14:09)

GeoffW, the adddress is correct, not sure why you are getting a failed delivery error.
(31.05.2006, 14:50)

I have some problems with the ultimate dropdown menu (even on this site, actually) using Opera (v.8.5, Build 7700, Windows XP). Google ad frame overlaps the DEMOS block.
(01.06.2006, 07:50)

minemax, this is an Opera bug. Opera 9 beta 2 corrects this (but introduces other bugs which I hope will be fixed before final release).
(01.06.2006, 07:53)

unkle e:-
i've just come across your site. i think it, and you, are awesome. i wish i understood all the stuff about what is "corrent" xml, xhtml, etc, and various browser incompatibilities, but i'm so glad someone else does. i wish even more that they were all compatible :)

anyway thanks so much for sharing all this stuff - i will take a whle to get around everything, but i'm sure i'll learn heaps
(02.06.2006, 05:31)

All, I must apologise for the loading problem on my home page. This is due to a link out to which is not responding for some , as yet, unknown reason. I will fix this as soon as I can.
(02.06.2006, 09:14)

Hi Stu, I am also an older person learning CSS and the other web languages. I am simply amazed at what you have acomplished here with CSS. I do have a few questions starting with, may i use this page design If so how can I incorporate "the thumbnails at right" version of your image gallery posted here: into that page design?
(04.06.2006, 21:43)

Kevin, the only answer I can give you without actually doing it is by 'trial and error'. Most of my demonstratons are made this way. I try something and if it doesn't work I try something else until it does. It's amazing what you stumble upon when doing this.
(04.06.2006, 22:22)

Fantastic site ^^

With regards to your "snazzy menu" is there any way to add a focus or current tab option (without a bottom border) to the menu. Seen it done but was wondering how it would be applied to this one. Thanks in advance!!
(06.06.2006, 04:54)

kevin keiper:-
im having trouble keeping my default style sheet in place when using a list of alternates. i have defined my <LINK> elements and TITLE="####" to define my preferered and persistent sheets, and am expecting that the last sheet listed will be my 'default' sheet... I know that if you do not define a TITLE then by default this is your persistent sheet... but i have one main sheet and one alternate, and cannot get my main to show up by default. i thought the order is alternate on top of the list, and then down until you put the one you want to show up by default on the bottom of the list... is this right? what is the proper way to have one main sheet show up by default, and then list the alternatives ? thanks for the help
(06.06.2006, 05:00)

kevin, have a look at my archived page at which uses default and alternative which are selected by javascript or your browser (if your browser supports this).
(06.06.2006, 10:31)

karin butenhoff-taufertsh:-
Dear Stu,

once again me (from Germany)...

After I am really overwhelmed of the possibilities of CSS I have one thought in my mind, I cannot get rid of :-)...

I would like to create a first (index) webpage, where e.g. one picture (box etc.)appears, after some time (second-s) the next, perhaps overlapping, tansparent, positioned absolute or not..., perhaps another already disappears - something like a flash film, but not made with flash.

Until now I havn´t found any advice, how to do it in CSS, perhaps by telling the computer to stop for x seconds, before going on...

Do you think, that it is possible? It would be so kind, if you would be able to help in any way!

Thanks a LOT!
(06.06.2006, 15:53)

GA Black:-

Many thanks for your ingenuity and creativity. I enjoy checking your site a couple times a week to see what you've come up with.

Have you any tricks to position a graphic at center of a particular column (or old school, in a table cell) that would work in IE? Decided to redesign my site using CSS. Validates, looks exactly as I'd like in FF and Netscape, but as usual, IE repositions differently.

Any advice would be greatly appreciated.

Best regards,

GA Black
(06.06.2006, 21:34)

GA Black, I have a demo to center a div full of text here that works in IE. You could adapt this to work for an image in a column.
(06.06.2006, 21:57)

karin, this is not possible with just css. You will need to use a language such as javascript or php to do this.
(06.06.2006, 22:29)

kevin keiper:-
thanks for the lead on the javascript styleswitch... i was using the one from A.L.A. but could not get your version to work right. I have tried unpacking your example but without a 'step by step' or some explanation it is hard to follow... I thought i could make sense of which variable was which in your javascript, but what i tried did not work. is there a 'step by step' somewhere you could recommend, or a tutorial? thanks !

(07.06.2006, 05:41)

You are amazing! Thank you, thank you, and thank you for not putting copyrights on the things you have made here!
(09.06.2006, 19:09)

Hi from France
I just discovered your great web site.
As you said in your cover page, this site works fine with Apple's Safari 2. But the "Image Map" page doesn't. I have report the bug to Apple.
If you want screenshot or other informations, you can mail me : sanji at seyres dot net
(10.06.2006, 10:06)

Hi all, can I have some feedback on the Kontera text ads, the ones with a double underline on the text with a balloon. Thanks.
(11.06.2006, 16:19)

D. Gary Jones:-
Newcomer from Canada and CSS. I have looked at your amazing site (where do you find the time?), I would like to try some of your horizontal drop-down menus, but I can't find any download option or method, can you advise please.
(12.06.2006, 00:43)

Unless stated otherwise in the information, the css is embeded in the &lt;head&gt;&lt;style type="text/css"&gt;.....&lt;/style&gt;&lt;/head&gt; of the source code and the xhtml is held in the &lt;div id="info"&gt;...&lt;/div&gt;
(12.06.2006, 09:45)

I'm making your "visited menu" and I've got a guestion if is it possible to put an image instead of the color #000 in menu. I tryed to do it but I can't do that.
(in this part of css)
#menu a:hover {
border-left:0.5em solid #000;
Thank you very much
(excuse my english, I'm from Czech Rep.)
(12.06.2006, 16:03)

Jaa(c), you will need to set this up as a background image that appears on :hover.
(13.06.2006, 12:17)

hi stu, great menus - i'm want to get icons into the third layer of the menu:

.menu4 ul li ul li.subserv5 {background:transparent url(menu4subserv5.gif) no-repeat;}

something like the above line - but not right yet.
(13.06.2006, 14:18)

wow wow and wow. you are amazing and talented. thank you so much! hopefully i'll be able to (figure out) and use some of these great examples!!!
(13.06.2006, 22:37)

Jacka, I have added third level icons to show how it can be done.
(13.06.2006, 23:14)

hi Stu, Thanks. I implemented the three level icons already. i use server side includes to call the menu.htm file. Next i develop the script to generate the menu.htm file. See it at
(14.06.2006, 01:16)

Hi Stu, Your menus are so much easier to work with; and when the menu structure is isolated as an include file the menu itself displays very well as a site map. eg, & - now i need to try and create a four level version for to replace the java / xml menus, which have a huge download overhead.
(15.06.2006, 09:37)

Kent Lee:-
I am so impressive with those css things.
playing with css very well there.
But, it can't be learn is it?
cause i wanna view some code to learn, it seems nowhere to get it.
(15.06.2006, 10:04)

Kent Lee, unless stated otherwise on each demo page, the css is embeded in the head of the source code and the xhtml is hheld in the div id=info.
If you know anything about css then you should be able to find this by viewing the source code of each demo page.
(15.06.2006, 10:56)

While working on my own cross-browser, pure-CSS flyout menu (mostly working now), I noticed what appears to be a typo in the CSS on your own magical menu:

* html .menu2 ul li a, .menu2 ul li a:visited {width:100px; w\idth:90px;}

Shouldn't that be:

* html .menu2 ul li a, * html .menu2 ul li a:visited {width:100px; w\idth:90px;}

(oh yeah, original CSS here: )

btw: Your work, especially the mantis menu, has caused a couple of web designers I work with to coin the term, "nerdgasm."
(17.06.2006, 00:27)

I glad too see this interest site, I tell my friends about it! They like sites like that: site
(17.06.2006, 09:06)



broken link!

where is it now? (pls rsvp at digg comments)

(19.06.2006, 15:57)

Great work Stu, it's good to see that there's still decent people out there that don't just wanna make money from passing education onto others! I hope you continue to provide us with examples of your fantastic work...

Cheers: hm.craig
(19.06.2006, 21:50)

Rob Kirton:-

Time to revist some of the comments about Opera, I downloaded 9 this morning and hey presto image opacity is supported. I guess a few other bug bears of mine should also have been sorted, it runs acid2 :0)

keep up the good work
(20.06.2006, 11:46)

You are the best! Im glad...
(20.06.2006, 20:46)

You know Stu, I had a problem with the fix for position: fixed; in IE. Whatever I tried, it wouldn't work. Now I discovered what was the problem. It was:

<?xml version="1.0" encoding="utf-8"?>

Which, we all know, IE doesn't understand. So everyone with the same problem should check on this.
(21.06.2006, 16:54)

For the love of God, can you make examples available as zip files? Though I have no problem with having your name and url in the cade but I don't want to have to remove loads of other code to get a simple function working on its own. Cheers chap.
(22.06.2006, 09:35)


I'm absolutely flabbergasted (what a great word!) about your site. The things you do with CSS, are really impressive. Especially your Holy Grail impressed me.

Right now, I'm looking at your "Final Drop" menu. It's working quite great.
I just found a tiny line in the CSS that's put in double (the color attribute in the ".menu ul li a" etc). It's not an error, but in terms of putting your code on a diet, that's another line left out.

I can't seem to find any information online about the hacks you use in your ie CSS of that "Final Drop" (the ones with the slashes inside the text). Could you provide me/us with some link(s) or info explaining this? Thanks
(22.06.2006, 15:17)

Hey Stu,

I need, I think I need your help. I use your "position: fixed; fixed" for my website. Works fine in all pages except one. In this page the scrollbar goes too far to the right. Do you have an idea what might have happened?

Thank a lot!

P.S.: If you would like to see the page then just go to
(22.06.2006, 18:54)

Achim Hoth:-
Hey, great site! Did some experiments, and this is what turned out by accident:

.curvy {position:absolute;
background:#08c; color:#000; margin:5em auto;}

#quadtl, #quadtr, #quadbl, #quadbr {position:absolute; font-size:150px;
font-family:arial; color:#08c;line-height:40px;}
#quadtl {left:-8px;}
#quadtr {left:-25px;}
#quadbl {left:-8px; top:-17px;}
#quadbr {left:-25px; top:-17px;}
#txt {position:absolute; top:5px; left:5px; color:#fff;}

<div class="curvy">
<div id="quadtl">&bull;</div>
<div id="quadbl">&bull;</div>
<div id="quadtr">&bull;</div>
<div id="quadbr">&bull;</div>
<div id="txt">I know it's been done before, but not this way!<br />A box with curved

corners into which you can put text that goes right up to the corners.<br /> Again,

no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet

point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
(23.06.2006, 17:52)

Hi Achim, looks 'different' but not sure what use it is ;o)
(23.06.2006, 18:55)

@zahadum , the link you have given is correct. It is just badly formed on and includes the closing bracket in error.
(23.06.2006, 19:01)

Sean Fraser:-
Are you going to be redesigning your site annually? It seems so. [I miss your first design. Or, was it the second? :-)]
(25.06.2006, 00:12)

I have lost the white transparent cover over the header on layout version 1 any ideas?
(25.06.2006, 00:54)

Thought i had better make myself a bit clearer:-
I viewed the source for your layout 1 and copied it to notepad so that I can change the layout for my own needs but I have hit a problem on your fantastic buttons at the top something in the header is not working quite right and i don't get the effect on the graphics at the top when you hover over a button.
The line responsible for it is there i have changed background:transparent to a color so I know the line works but when you hover over the buttons it doesnt change the header div perhaps there is something missing but not sure what.
(25.06.2006, 01:06)

Keep up the great work!

Great to say your own site has had somewhat of an overhaul. ;) Looks sharp!
(25.06.2006, 03:55)

Ariana Saraha:-
My new hero! I have a feeling I'm going to be spending waaaayy too much time on your site :-)

I'm curious if you know of anyone creating custom scrollbars in css. I'm aware of, but am curious if anyone has designed any not-for-profit?

Not holding my breath, but hopeful nonetheless...

Ariana Saraha
Boulder, CO
(25.06.2006, 05:33)

have solved the problem with the graphics not displaying properly with the buttons.

To all, recently someone wanted to do a "To top" in the content of version 1 I have come back to find it and it has dissappeared...anyone remeber how it was done?
(26.06.2006, 01:37)

BTW, Stu,

You stopped serving webpages as XML + XHTML 1.1. Because many users didn't use it, Internet Explorer caused problems etc.

But I discovered you don't need the <?xml version="1.0" encoding="utf-8"?> if you use UTF-8 or UTF-16. And you use UTF-8, so you can serve your webpages as XHTML 1.1 (without XML).

Thought it might be handy for you to know, but probably you already knew this.
(26.06.2006, 15:05)

Hi Roy, the problem with xhtml1.1 is that you need to change the MIME type to application/xhtml+xml. Just having it in the xhtml will not do.
(26.06.2006, 16:20)

I really like your site content, but the design still sucks. It is sometimes difficult to follow the content and your ad placement is all wrong. When it comes to page design, think KISS Principle.
(26.06.2006, 18:03)

Anonym, just a matter of opinion ;o) it is still ranked 12,678 by Alexa, and over 23 million hits a month.
(26.06.2006, 18:13)

Hey stu! This website is really great. I am currently working on some open source scripts for my personal website. The scripts (mostly PHP) implement some CSS examples you have here such as the photo galleries. Full credit will be given to you when they are done.

Anyway keep up the good work. :D
(27.06.2006, 12:31)

great website! keep up the good work. Almost anything is possible with CSS.
(27.06.2006, 15:59)


Sorry for posting so much (I know you must be bored by answering everything), but I had a suggestion for a new demo. On some webpages you can find a picture, which you can rotate. Mostly it is done with Quicktime or javascript, but wat about doing it in CSS?

Oh, one other thing, on your website, I found a nice tutorial of how to make a photo gallery. I would like to use it in my book, but before I do this I would like to seek your permission.

(27.06.2006, 17:02)

hey stu,

is it possible to have another sublevel to the "final drop" menu? as there are just 2 sublevels in your example, would it be possible at all to add a third or even fourth one? i've been trying to figure it out on my own already by adding a new "ul" and "drop" class but no luck. maybe you can help? that would be awesome. thx!
(27.06.2006, 17:30)

rack, it is possible but as you have found it is very difficult to control. If it wasn't for IE then it would be VERY easy to add as meny levels as you like, but to include IE with the use of tables it get almost impossible.
(27.06.2006, 17:43)

@ Roy, not sure what you mean. Can you email me stu{at} with a url of an example (and also about the book).
(27.06.2006, 17:45)

Well, about the demo, have a look at


You also asked about the book. You have a tutorial on your website about how to make a photo gallery ( At the moment, I am writing a book about CSS and XHTML, and I would like to use the tutorial you made about how to make a photo gallery. But I don't want to do it without your permission.
(27.06.2006, 21:50)

Hi Roy, that's some task for CSS :)
It would be possible to run a set of stills to give this impression but it wouldn't look anything like as good as these demos.

As for the article you can use this in a book as long as css play is given full credit. and the web site url is given.
(27.06.2006, 22:07)

Whoa - fantastic site. I've been trying to get to grips with CSS for a while, but have been rather baffled by it all.

There are a great many sites out there one the subject, but they seem to be aimed at the professional rather than someone of my (ie numpty) level.

I am now a little less mystified than before!
(28.06.2006, 03:55)

Wow and who says age does matter!! Stu you still have it. But your old layout was way better ;)

Why did your incroporate so mush ads... it ruins the whole thing.
(28.06.2006, 19:23)

fred, when you have a bandwidth of over 200GB per month and a wife and two kids to support then you have to find the money from somewhere :)
Without these ads the site would close.
So what is it to be .. a site with ads or a no site :(

The layout change was done to simplify it as much as possible whilst retaining the simple navigation.
(28.06.2006, 19:31)

I wanted to use the Menu #1 CSS on a website. I have a flash on home page and when i move mouse on navigation links, drop down menu doesnt appear on flash but it goes to under flash movie. is this a bug or i have to do something about it?

BTW, thanks for helping us.
(28.06.2006, 19:58)

John, this is a flash bug that can be fixed.
Visit my page and there is a link at the bottom of the page to and answer.
(28.06.2006, 20:26)

Thanks for clarifing things here.

But for the host, even with 200GB of bandwith, I doubt you have problem paying it considering all the ads everywhere on the site and your traffic. The adsense part itselft should report you more than you need for hosting. There is probably something wrong somewhere...

What is your host? Are you on dedicated or Virtual Hosting?

If you still can't pay, why don't you go for a sponsor who will be willing to host you? Just ask on a web hosting forum. I'm sure that with those hits you get you would get a free host in minutes. I could help you for that.

Also, why don't you stick with ads only on 'sub nagitation page' and remove the on the homepage. This could help your image quite a bit!
kind regards
(29.06.2006, 00:09)

this is awesome stuff. can you put up some tutorials.

(01.07.2006, 08:39)

I have an answer which statifies both of you:

fred - Download Mozilla Firfox and use the Adblock extension. You can then easily block the ads. But why make such a fuss about it? I have seen far, far worse then this.
(01.07.2006, 22:18)

Charles Joseph:-
Hi Stu,

What an incredible site. So many ideas to play with! I'm trying to get a version of your photo gallery to work, but IE6 keeps crashing! Would appreciate any inputs to fix:

Charles Joseph
(02.07.2006, 19:00)

Hey, you probably get this alot, but I was wondering if you could help me with a layout I have been trying to make?
(02.07.2006, 19:43)

Charles Joseph, your problem is with the #container style. The styling of this encompasses the #container_right style and is causing problems with the link styling within the gallery.
If you delete the #container style then the gallery will work correctly.
(02.07.2006, 20:49)

Charlie, I would love to, but I have no free time to offer this sort of help, sorry.
(02.07.2006, 20:50)

No Problem, I think I've found a hack.

Damn IE! Causes too much trouble with it's lack of support for .png's
(03.07.2006, 12:36)

Hi Stu,

Your work really has inspired a lot of what I do, but currently I'm trying to use CSS hovers to change properties of a Parent Element. I'm told the only way to achieve this is using JavaScript. Do you have any ideas? You seem the best resource for advanced CSS techniques!
(03.07.2006, 16:27)

Aaron, you don't need Javascript for to change properties of a parent element. If you have this code:
<p>Text <span>text</span> text</p>, then p is the parent of span. But I think you actuelly meant this:

<p>Red text</p>
<p>Just normal text</p>

And then in the CSS:

p:first-child {
color: #f00;

Also, for this, you don't need Javascript. BUT if you want to make it work in Internet Explorer, you do need Javascript (IE doesn't support this).
(03.07.2006, 16:47)

Aaron, if you mean:
<div id="parent">
<a class="child" href="foo.html">Hover this to change #parent</a>

Then using a:hover to change #parent then no it is not possible with css.
(03.07.2006, 17:15)

hi Stu,

your work is awesome.. thank you for sharing it, it helped me to much, i owe you a boon i think !!
thanksss thousand times!!!
(04.07.2006, 10:04)


i'm so impressed by your stuff! i'm a newcomer to css having taught myself so i could design the website for the charity that i am chair of (

i would really like to produce a photo gallery so we can show off our pictures of the kids having fun but i'm baffled as to how to make the code work with my existing css style sheet so the overall look is the same.

i would be really happy for you to use any of my photographs from flickr (my username is jokerthelurcher - in case you want to see whether they would be any use) in your stuff in return for a bit of help!
(04.07.2006, 19:11)

Angharad, have a go at implementing the gallery and if you bump into any problems I may be able to help find the answers.
(04.07.2006, 20:08)


First of all, this site is really great and your menus are awesome :) So good job!

I was wondering if you could help me with this question. I wanted to take one of your menus, where the buttons are aligned horizontal. Now the thing is, I need to make those links without a boarder. Whenever I changed

.menu ul li a:hover ul li a
{.... border: 1px solid ; }

to 0 px, the menu wouldnt work right anymore. The same was with the background, when i took it out, the menu wouldnt work right anymore. I had a solution for that problem though (background pic that doesnt exist), How can I get rid of that border ? Im only using the Internet Explorer version of the menu (I hate the IE but my company uses it :/ )

thanks for any help! If you want to contact me via mail -->
(05.07.2006, 09:13)

Internet Explorer requires that the :hover state changes something in order to work. This can be
# direction: ltr;
# display: inline;
# float: none;
# position: static;
# border: 0;
# height: auto;
# margin: 0;
# padding: 0;
# list-style-type: disc;
# list-style-position: outside;
# text-align: left;
# text-indent: 0;
# vertical-align: baseline;
# white-space: normal;
# overflow: visible;
# visibility: inherit;

So just select the one that works.
(05.07.2006, 10:21)

Fantastic site, it's been a really useful resource for me. Regarding your static header tables, is there anyway to do a similar thing with a static left hand column so when you scroll horizontally it is almost on the left.

I can do this in JavaScript but so far am not having joy with CSS. Just wondered if you knew if it was possible, if not I can stop wasting my time!
(05.07.2006, 16:40)

Kev, this can be done but requires two tables. One for the fixed left hand column, and the other in a horizontal scrolling div.
(05.07.2006, 19:03)

Hi Stu!

First of all - thank you for awesome resource!
Have troubles with tableless photogallery. Just few thumbnails in row/cols at fixed div width.
<div id="ph">
<a class="gl ph01"><span>[1], </span></a>
#ph {width:700px} {display:inline-block; float:left; margin:6px; width:128px; height:92px}
#ph a.ph01 {background:url(...)}

It works on IE6, Opera8, Mozilla. But on IE5 interesting effect. If mouseover thumbnails (exept first one) - block with images go down. Each time down and you can't click on it ;) In your "click gallery" the same effect for thumbnails at left/right. With top/bottom all is ok.
(06.07.2006, 09:57)

Sure if necessary - can post URL with example here.
(06.07.2006, 10:01)

rey, not sure which photo gallery you are using, but none of them will work in IE5.1
Most will work in IE5.5 and all in IE6+
(06.07.2006, 10:36)

Ok. URL is
Problem both on your and my site I see on IE5.0/Win98. sure it's not modern configuration... If i remove floating all is ok in IE5/6, but "table2 breacks in Mozilla
(06.07.2006, 10:53)

Oh... found solution for myself: put .clearer after each row. Sorry for trouble :)
(06.07.2006, 11:19)


thanks so much for your help. i am working my way through the tutorial with the dog pictures. i'm running into problems with the location of photos - i managed to make my full size ones appear but cannot work out how to locate the thumbnails so it can find them. you refer in your code to "url: and then a location - if i am using my own pictures would i still use "url" or would it be where they are on my computer or on the remote server where the website is?
(06.07.2006, 19:35)

Angharad, you would still use url() and it will be a file on your server. If you have the css in a separate file then the image file will be 'relative' to the css file. If your css is embeded in the html file then the image file will be relative to the html file.
(06.07.2006, 19:54)

Fran C:-
I appreciate this site. I am in the process of "rebooting" a personal site from table to table-less format. There is however a slight problem. I thought about using for the background image in CSS 2 different colr gradient "chips" placed in exactly opposite each other in the corner, upper right and bottom left corners. I was thinking of placing the images one in the body markup and one in a div markup that would be like an outer container. The problem is the upper one shows up fine. The bottom one doesn't, even with paddings or margin. Not going to even say anything about the footer. That disappears!!!
Firefox can show the lower one fine as well as the upper one. IE shows the upper one placement fine but forget about the lower one. That's gone!
If you would like me to explain it in more details, I will be happy to put it on the net for you to look at it and email you the URL.

About the 100% background image placement? What is the dimension of the image you used?

Thank you again.
(08.07.2006, 02:49)


I found this site via, and man am I glad I did! You have done a tremendous job of putting a site together to educate those of us developers striving to move ahead with CSS. I would also like to tip my hat to all of the developers who have contributed their talent and time to this site.

You can be sure this will be the first place I go for my CSS issues and ideas. Hopefully I will become proficient enough to donate my ideas as well.

Keep up the great job!!

Bryan Zimmerman
Center Valley, PA
(09.07.2006, 17:11)

Bryan, thanks for the comment. The 'developers' are just me I'm afraid. Now frantcally working on the redesign.
(09.07.2006, 19:59)


Then I tip my hat to you over and over again!!

(09.07.2006, 20:13)


I've just realisede why this wouldn't post yesterday - I hadn't seen the bit below about http!

After HOURS of messing around here is my first effort at a gallery:

Thank you so much for the code and tutorials and for your help.

(10.07.2006, 10:20)

Angharad, looking good. Hope the site does well.
(10.07.2006, 13:01)

I have a question.

I know the rounded corner issue has been discussed and run into the ground, but I am still coming up empty handed. The latest article I can find is from 2003, and is utterly confusing. I recently went to to order some tutorials and BAM! right on the front page are cornered boxes with links nested inside. AND they work in Explorer!!

Can anyone explain to me how this is accomplished without using 8 pages of CSS code and 2 seperate images? There has to be a better way.


Bryan Zimmerman
(10.07.2006, 23:42)

Bryan, uses tables to position the corner images. The usual css way is to use corner images at the moment. Firefox does have a css style to radius corners that is referenced in css3
border-radius: < length > < length >
but this is not IE compatible.
(11.07.2006, 09:57)

Hi Stu,
I love the site. It seems that i can not copy top.gif, top2.gif etc. from the information ballon pop-ups, i can only copy the bottom.gif, bottom2.gif etc. What should i do?
thanks again
(12.07.2006, 16:17)

John, if you look at the css file you will find the urls for all the images.
(13.07.2006, 12:19)

All, I am in the middle of a site redesign, so may not have the time to answer all the questions posted.
(13.07.2006, 12:20)

< ? xml version="1.0" ? > as the very first line in a page makes most other IE specific coding un-needed. :)
[ By first, I mean even before the doctype declaration ]

I was playing around with a variation of the "fixed" css styling and IE wouldn't play nice with it. By adding that one line, IE played nice, even older versions will render it with that line.

I testing the flyout dropdown css after removing the ie specific code you have, and it worked.
(13.07.2006, 14:11)

Jaqui, if you add any line before the doctype then IE will be switched into quirks mode and IE6 will act the same as IE5.x with the faulty box model.
For IE6 to use standards compliant mode then the doctype MUST be the first line.
(13.07.2006, 15:19)

Hi Stu,

Can you suggest any good books on CSS?
e.g. I want to understand how to do layout in css ; right now, I only know how to do layout in tables.

Thanks, Elliot
(18.07.2006, 09:19)

Hi Elliot, I don't posses any books on CSS so cannot really advise. I have downloaded the CSS specifications form and use these for all my information.
The rest I get from the web.
Perhaps other visitors can advise you.
(18.07.2006, 09:32)

Your website is just fantastic. I m juss a newbie to css stuff. But i enjoy practising demos.I actually combined simplified menu with three sublevels & tried using transparent looks for the sub menus. . Also, i dont use your way of having the styling code in the style tag. Since i m just a beginner i wrie the styling code in a seprate .css file n then load it with. Its nt working with IE6. The complete look is ruined. I still wanna retain the looks for IE. What can be the prb.
(11.08.2006, 06:38)

So here is my question for you. I�d like to have the drop-down menu I created, drop from (pull-down?? Link from??) the graphics that look like buttons, which are on the image map I created. I played around with combining the two together�I got as far as them both working on the same page, independently. I have not been able to figure out how to put them together. What would you recommend?

Mahalo for all you assistance with a newbie to CSS2!=)

(06.09.2006, 08:04)

I had had an amazaing discouraging time (the details of which are not important here).

I just wanted to let you know that visiting your web site was the most uplifting experience that I have had in a long time.

It's really renewed my faith in the world.
(29.09.2006, 00:55)

Regarding John's post about Image Placement ( Using a real image (vs. a SPAN for example) comes with two benefits: it can be printed, as in this drop cap demo ( As a side note, real images can also *scale* (
Great site. Keep pushing the envelop.
(08.10.2006, 17:15)

Your site is an excellent resource of inspiration. I keep recommending it to all my css enthusiastic friends. Thanks, Stu.
(31.03.2007, 20:05)

(13.04.2007, 12:21)

I love your multi-level fly-out menus! My challenge is getting it to work in conjunction with a main content area. I'd like to be able to make changes on just one file and have it changed for the entire site, without having to copy & paste the code on each and every page. (Like how we used to use Frames). I have searched the Net and read three books, but nothing has popped up that puts these cool navigation menus together with a main content area. Any suggestions or can you put the code together on your website as an example?

Thank you for all your help!=)
(15.04.2007, 10:24)


I love your site, i just have a quick question is there anyway to get words to scroll in the footer of my page kinda like the ticker on ESPN. The code would finnaly finish my site.

(30.07.2007, 21:05)

Firas Swidan:-
Dear Stu,

this is a great site. Thanks to it I was able to get rid of most javascript on

I have a question though regarding auto text scrolling panels. Is there anyway to implement these without javascript?

(09.10.2007, 15:57)

Paco Tomei:-
In the case of the style switcher, how can you modify this line to make it work with the URL contains a "named anchor"?

self.location = self.location;
(30.12.2008, 02:07)

Thank you Stu.
(20.11.2009, 15:22)

Nice page, however
your 508 and aaa (accessibility) links are broken.
(16.03.2011, 17:35)

Thank you for your Awesomeness, dedication ,and hope give me to be of use I need education,time,and along which-ever direction The Good Lord leads me oh and to your wife as well thank you both so very much for your work.
(26.11.2015, 16:48)


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