it is common for websites (this one included) to have the ubiquitous '|' as a link divider, here is a neat way to do it with pure css

To get this menu:

• Home
• Contact
• FAQ
• Other Crap

You dont need to actually put in the '|' character, you can do it with just the following advanced css selectors:

<style type="text/css">
	ul#nav li{
		float:left; 
		margin-right:20px;
	}
	
	ul#nav li:after{
		content:'|';
		margin-left:20px;
	}
	
	ul#nav > li:last-child:after{
		content:'';	
		margin-left:0;
	}
</style>

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Other Crap</a></li>
</ul>

I realize it's not exactly space-saving, but it is a cool trick that could be adapted to all sorts of possible situations.

a slightly modified, very simple approach to css sprites

Css Sprites are nothing new, it is a way to take one image and use it for everything for faster page loads; pretty simple. On my latest project, I came across a simple way to to employ these sprites in a logical manner; this method even makes for intellisense images in Visual Studio.

prepare your sprites

The first thing to do, is to get your sprites together in a zip file. Basically gather up all the pictures and icons you will be using and put them into a single folder, then zip them up. Here is the zip I am using for the demo demo_sprite.zip (14.12 kb). Then simply go to Project Fondue set up your settings and process. For the purposes of this method, set the 'Css Prefix' to 'i' and clear the other 'Class Output option' fields. Now you have your css, and you can download the image that Fondue produced, which is the image directly to the left in this post. The tough work is alreaday done, now you are ready to implement it.

the <i> tag

As stated in the title, I chose to use the <i> tag. This tag was originally used for italics, but that practice is not always followed, and most people use CSS reset anyway, so it is up to us to choose what we want it to mean... and I chose 'image' (the img tag wont work as it rendered the ugly 'image not found' image in most browsers). So for this to work, you are going to have to first reset the <i> tag to nothing in css, then set it's background to the sprite image; I will assume you are using your own css reset, and my sprite to the right is called sprites.png.:

i {background:url(Images/sprites.png) no-repeat; 
   display:inline-block; width:24px; height:24px; }

/* code produced by Fondue */
i.danger { background-position: 0 0; } 
i.download { background-position: 0 -74px; } 
i.error { background-position: 0 -148px; } 
i.folder { background-position: 0 -222px; } 
i.reload { background-position: 0 -296px; } 
i.success { background-position: 0 -370px; } 
i.trash { background-position: 0 -444px; } 
i.warning { background-position: 0 -518px; } 

I am setting the default height/width to 24px because that is the size of my icons, if all of your are not the same, you can either set a default size here, or size every one indivually; I recommend using the most common size as the default for the smallest css.

*If you do have images of different sizes, be sure to set their height/width in their corresponding css classes.

use it

Now you are all set, the html:

<i class="danger"></i>

Produces and:

<i class="download"></i>

Produces and so on. Plus, if you are using visual studio, you will notice since these are css classes, they pop up in your intellisense, so it is easy to push out images on the fly in code.

I am amazed to see how many asp.net programmer do not use this

A fully interactive image map of the united states using pure CSS; great rollover technique

I had actually written this in 2006, but I saw this technique used recently and apparently it's a 'new' technique. You can see this example here. Really the coding is pretty simple, though a little bit tedious.

First thing is to simply make a list of the items you want in the image map. I use dl->dt/dd here instead of a ul->li which would work just as well. Notice my dt element is just 'us', then I start with the states: 'al', 'ak', etc. Also notice that each dd has an 'img' id and each a holds an id and a span with the state name in it.

<dl id="imap">
   <dt><a id="us" href="#nogo" title="us"><span>United States</span></a></dt>
   <dd id="imgal">
     <a id="al" href="#al" title="Alabama"><span>Alabama </span></a>
   </dd>
   <dd id="imgak">
     <a id="ak" href="#ak" title="Alaska"><span>Alaska </span></a>
   </dd>
  ...
</dl>

Next we move on to the css, which is pretty simple to understand, it is just that getting the values is a pain. One of the most imporatant values is the position of the 'box' for each state. You can see if you look further into the css that all of these are relatively positioned in relation to the whole map - it is the upper-left corner of where the 'box' is. I say box because css only works in squares. It takes some planning, but most any shape can be achieved by overlapping squares, and that overlapping is controlled by z-index. Also you will see that the images are positioned negatively against the position so they sit int he right place. And finally, the height and width are just the height and width of the image.

/*ALABAMA*/
#imap #imgal { left:400px; top:220px; z-index:20; }
#imap a#al:hover { background:url(images/states/al.gif) -400px -220px; }
#imap a#al { width:45px; height:70px; }

Repeat this over and over, and you have a full 'image map' made with CSS only. Not the fastest method, but it works and is better than the old image map methods IMO.

Simple way to add watermarks to your textboxes for a little flair in your input forms

I have always used the TextBoxWatermark control that is supplied with the AjaxControlToolkit which is very easy to use and I highly recommend it.  But recently I was asked to figure out a way without using 3rd party tools, hence in JavaScript.  At first I figured it was going to be simple, just clear the text when you click on the box and maybe change the background color.  Simple, that works.   Thats when I ran into my next problem.

 

I wanted a textbox that was forr passwords, it would start out and say 'password' but then when you clicked on it, that would disappear and it would become a type="password" box (display text as: ******).  It worked flawlessly! ...in non-crappy browsers.  IE7 dumped all over my dreams yet again and left me with a Javascript error.  Turns out you can't change the type property in IE7 (apparently it works in IE6???) which is completely stupid.

 

So, I did some good old googling which brought me here to find out that in order to change type, you now have to make an entire new object and swap it out with the old one.  So after that, it works, but my focus is all screwed up: I click on the blank, the password text disappears, but the cursor is not in the textbox I just clicked?!  That brought me here which showed me a crazy way to reset focus on a lost object:

window.tempObject = newObject;
   setTimeout("tempObject.hasFocus=true;tempObject.focus();",1);

Now everything seems to work just fine.  BUT, they aren't.  For one thing, I had had an onblur statement in my textbox originally (not in the example, but for discussion purposes) and since the new object did not have an onblur, I had to make sure to re-add that back in.  Also, the same loss goes for CSS class, but that might want to change, so I added a new field into the function to take into account a new CSS class.  If it is left blank, it will inherit the old CSS class if there is one, or simply have no class like Britney Spears. 

 

Ok, so I *thought* that would be easy, but IE comes back again to spite me.  For most browsers, you can set Object.setAttribute("onblur", "JSmethod") but IE decides that isn't good enough, so you have to to this Object.onblur = function(){js_function(god, damnit, ie);}; (from this thread).  Ok, now that we have that fixed, we can look at the CSS class.  It's mostly the same, but this is yet another IE specific problem.  You need to include two different declarations: Object.setAttribute("class", "css_class"); for most browsers and Object.setAttribute("className", "css_class"); for IE.  This time the IE fix/hack will not work for cross-browser compatibility.  So here is the finished JS:

 

 

Remember though that you will have to validate that the original values are not in the textboxes when the user submits, as they will not be empty initially.  Here is a fully working example to mess with, it shows how to use it both for a simple watermark/mask and also with a password field change.  It also includes how to add javascript function calls and deal with changing (or persistent) css: