Sticky Footer using only css/html (works in IE)

For a long time, I tried with no avail to get a sticky footer that would work in IE, here is a slick way around IE's incompatibility

For css, all you need is this:

* { margin: 0;}
html, body { height: 100%;}
.wrapper {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -4em; /* the bottom margin is the negative value of the footer's height */
.footer, .push { height: 4em; /* .push must be the same height as .footer */}

And for html, this:


  <div class="wrapper"> 

    Put your content here

    <div class="push"></div>


  <div class="footer">
    Footer Here



All credit goes to - thanks this is great!



Introductory tutorial on using objects to pass information from page to page

Passing information between pages can get quite messy, unless you clean it up using objects

 Recently on a forum I was asked to help out a user on passing information between pages using  After some contemplation, I figured the cleanest way to do this would be through an object passed as a variable.  Basically, take in some information on page one, manipulate it, and regurgitate it on page two.


 For this tutorial, I will be referencing the demo that I have uploaded: (4.06 kb) Also, this tutorial assumes you are using Visual Studio or the Free version: Visual Web Developer Express


First we need to think of how we are going to pass the information. Since we are going to another page, we have to store it somewhere as html is stateless, and you are using .net controls and not a regular POST. So, we have a few options:

1. Store variables for each value
2. Construct a single object and store that
3. Use a PreviousPage declaration
4. Use a querystring


I vote for 2, as it is cleaner, and more scalable. Next you need to make an object by right clicking in your solution explorer, clicking 'add new item' and choose 'class' - name it what you will, I chose 'employee'. (its going to ask you to put it in the app_code folder, you want to do this).  Now you need to define what the object has for properties, and how you are going to set and access them.  This is what I came up with:

//here you declare all of the properties that each 'employee' object will have
string name;
string id;
public employee() { }
// this one actually builds an employee object - requires 2 strings as of now, but you can add more
public employee(string nameInput, string idInput)
  name = nameInput;
  id = idInput;
// methods - returns what will be pulled from the employee obect here
public string showName() { return name; }
public string showId() { return id; }

With that you can see that an employee has both an ID and a Name property, they are both strings and are set by calling employee(name, id).  So now we have our object class... let's use it.

We have 2 textboxes, txtName and txtId, that will hold, you guessed it, name and id. I also added RequiredFieldValidators to try and make sure we get no errors, requiring the user to enter values before they submit.


Add a submit button and double click on it in design mode, that will auto-populate a Click event in your code behind to tell your page what to do when it is clicked. here you will make an empoyee object, and then set it to a session variable - then kick it to the display page:

protected void btnSubmit_Click(object sender, EventArgs e)
{//builds new employee object
employee newEmployee = newemployee(txtName.Text, txtId.Text);  Session["employee"] = newEmployee; 

  //put it in session state memory
  Response.Redirect("DisplayData_Class.aspx");//sends you to the next page

And then we make the showEmployee() method by calling the methods we made in teh employee class we made earlier:
protected void showEmployeeInfo()
  employee passedEmployee = new employee();//makes the new object
  //copies the one you just made
  passedEmployee = (
employee)Session["employee"];//display info
  lblName.Text = passedEmployee.showName();
  lblId.Text = passedEmployee.showId();

And boom, you are all done. Now just go through and add the properties to the object you need and ways to access and set them and you will be done in no time.


Sending email programmatically with gmail :: tutorial

worry about smtp servers/settings no longer; completely portable code for sending email with gmail and

I have used a ton of different hosts, and it always seems to be a hassle to find out their information on their smtp servers... not to mention all of your programs are broken if you move them.  With .net, you don't need to use anything but gmail's own protocols in order to make fully portable code that sends emails, and it is oh-so-simple!  I use this from everything from contact pages to email notifications to myself on errors and such - hope it helps.


First thing you need to do is declare you will be using the System.Net.Mail namespace as the System.Web.Mail is deprecated as of the past year or so.


Next, you simply have to make a new MailMessage and set its properties like To, From, Body, Subject, etc.  here is an example with all static input:


MailMessage email = new MailMessage();
MailAddress maFrom = new MailAddress("");
email.From = maFrom;
email.Body = txtMessage.Text;
email.IsBodyHtml = true;//this is only if you are sending an html message
email.Subject = txtSubject.Text;


Now that the message is made, all you have to do is set your smtp credentials, and push the message out:

SmtpClient smtp = new SmtpClient("", 25);
smtp.EnableSsl = true;

smtp.Credentials = new System.Net.NetworkCredential("", "password");



That's it!  It is just that easy... 


You can get a fully working example here:


css transparency problems in IE

Imagine that, IE has formatting problems with css standards...

So... working with some transparency today, and for the life of me I couldn't figure out what was going on.  I had 2 menus, both falling under the same a:hover transparency.  Firefox: everything looks good, Opera: everything looks good, Safari: who cares, IE: transparency works in one menu, but not the other? Here is was my css 

a{text-decoration:none;color:#5C756C; }
.side_menu{float:left;display:block;width:250px;margin:0 20px -10px 0;}
.side_menu a{padding:10px; border-bottom:dotted 1px #888671; display:block; }

So the links that were inside the .side_menu class showed transparency while the ones that weren't did not?

So I started playing around with the elements one by one, and you know which one made it go non-transparent? width! If I took away the width:250px;, it was no longer transparent. So, All I had to do was add in a width:100%; to the a element and this problem was fixed. But then this leads to another problem: you don't want to necessarily have all of your links to be 100% width, so you have to make a choice: make different classes for widths, inline css, forget about transparency, forget about IE, or a million others.

Imagine if the most popular browser on the planet actually followed set standards... I may as well keep dreaming.

Sidenote: The CSS you need for transparency (non IE compliant, for IE, just add a width declaration) is simply this:

If IE would follow standards, you would not need the 'filter' property, just 'opacity'. The 80 and .8 mean 80% opaque, the higher the number, the less transparent and vise versa.

Agent XPs component is turned off as part of the security configuration for this server

If you have installed MSSQL 2005 and tried to set up a maintenance plan, this is likely the error you have encountered

Good thing is that it is extremely simple to remedy.


  1. Open Programs > Microsoft SQL Server 2005 > Configuration Tools > SQL Server Surface Area Configuration
  2. Click 'Surface Area Configuration for Services and Connections'
  3. Click 'SQL Server Agent
  4. Change 'Startup type' to Automatic
  5. Click 'Start'


And thats that... problem was is that default, your SQL Server agent is set to run manually, so you would have to start it every time.  Considering you are setting up a maintenance plan, you are going to want this to be automatic.

Adventures in Migrating from WSS 2.0 to MOSS 2007

"Your backup is from a different version of Windows Sharepoint Services and cannot be restored to a server running the current version."


That was the error I have been facing for a couple of days and it was driving me utterly crazy.

This was my situation: I was tasked with migrating the sharepoint data on an ancient server (PIII 512 RAM) running WSS 2.0 and SQL 2000 to a new server running MOSS 2007 and SQL 2005 - I have done plenty of backups and restores on SharePoint, and they are suprisingly easy.  This should be no problem...

Wrong. This turned into a classic battle of me vs. some software, and I refused to let it win! (plus, my boss would be pissed).

You can read the [Details of the battle] or just read on for the solution.


Turns out that even though WSS Backup/Restore was supposed to be compatible with SQL 2005, they didn't actually make it compatible until SP3.  So, despite not even being the same version anymore, it seemed to work just fine EVEN THOUGH THE ERROR CLEARLY STATED THAT MY VERSIONS WERE DIFFERENT!  I think they need to revise that error message before someone stabs their eyes out!

So it turns out that all you have to do is this:


  1. Update both servers to WSS 2.0 SP3
  2. Backup your initial server using stsadm
  3. Restore to your new machine using stsadm
  4. Upgrade your new system to MOSS 2007 


That's it... thats the whole answer to my week long battle with WSS.  Now I just have to upgrade to MOSS 2007.  You can get SP3 here: (6.19 mb) - hopefully this saves someone a whole bunch of hours on a ridiculous problem, though no one even uses WSS 2.0 anymore...

best javascript toggleDiv function ever

Everyone has a javascript toggleDiv function somewhere, but this is the cleanest one you will ever see

All this is is an expand and collapse of whatever you want it to expand/collapse - it is made for divisions with the 'block' declaration, but could also be used for inline elements if you simply changed it to 'inline' 

function toggleDiv(divid){
  var div = document.getElementById(divid); = == 'block' ? 'none' : 'block';}

Basically it is just a condensed if/then statement.  Keep in mind it will only work on the very first click if you already have 'display' set to 'block' or 'none' at first, otherwise it will take 2 clicks.  It is about as simple as it gets.

There is all sorts of daily bible quote sites out there, so I decided to make an atheist counterpart is just that, a site that rotates great and insightful atheist quotes daily.

There are also widgets that you can put on your social networking websites such as MySpace and Facebook to show your atheist pride!

It also has the options to submit, view all and view random quotes.

css Tooltips :: tutorial

A slick way to make rollover tooltips with nothing other than a little css and some html - also works well for image thumbnail rollovers as well

In the past, I have made tooltips with JavaScript, and that can get lengthy and messy - I prefer to use JavaScript as little as possible. So I recently figured out a way to make tooltips and picture enlarging rollovers that is very simple and uses nothing but css and html.

Ok, first thing we need to do is to understand how this is going to work: basically, you are going to embed your tooltip with an element inside your link; for this example, I chose span as it is already there and easy to work with. Then we must hide that text with display:none; in css.

Now I want the tooltip to stay close to the link that you hover over to get it (you could use this to put the link anywhere on the page as well) so I have to make the link relative, and the embedded span will be positioned absolutely, and sice it is positioned absolutely to the relatively positioned link, it will appear relative to the link (wow... that looks confusing when I put it down in text).

Now with that out of the way, we just have to add a :hover state to the class and change it's display to display:block; to make it visible. Add a little formatting and you get the following css:

   a.tooltip span{
     display: none;position:absolute;top:1em; left:1em;

     /* the line above is all that is necessary in a.tooltip span the rest is formatting - you can alter top and left */
     padding:2px; border:1px solid Black; width:100px; background-color:Gray;}

   a.tooltip:hover span{display:block;}
You will notice that there is a z-index value in there. I picked a rather large number, but that is so the tooltip will always be visible over whatever you have on the page.

The css is now out of the way, time to move on to the html. All of the hard work is done, now we simply need to make a link with an embedded span which to contain our tooltip:
<a class="tooltip" href="" >
   Roll over this
   <span>For this kickin' tooltip!</span>
And there you have it, a simple css rollover tooltip:
Roll over this For this kickin' tooltip!

*note: If you dont want the rollovers to appear clickable (usually the finger cursor) you can add cursor:default; to the a.tooltip:hover class.

Similiarly, you can do the same with images. For this example, I am using a full size imaged resized for the thumbnail, but you may want to use a separate smaller image so the preview loads faster for your user; its up to you: I changed the css class, removed the formatting and lsightly edited the positioning to get this for the css:
   a.img_tooltip span{display: none;position:absolute;top:-1em; left:5em; }

   a.img_tooltip:hover span{display:block;}
And here is the html for an image rollover:
<a class="img_tooltip" href="" >
   <img src="images/image.jpg" alt="thumbnail" style="width:100px;" />
   <span><img src="images/image.jpg" alt="full image"  /></span>
As you can see, I set width:100px; as I am using a full sized image and I wanted to shrink it. Here is your image rollover
small image full image

And there you have it, a simple way to get css rollover tooltips. They can be pretty useful when you want to stick something in your page but it may be intrusive or ugly to be there all the time.

A very simple example can be downloaded from the steal some code repository or just pick it up here: (67.91 kb)

Easily the best blogging framework out there, not to mention it's completely free

This site is suported on and I can't say enough good things about it! Off the top of my head, let me try:
  • automaticaly updating RSS feeds and sub feeds
  • auto updating sitemap
  • incredible interface
  • completely customizable
  • constantly developed and maintained
  • great community support
  • windows live writer support
Anyways, if you are looking for a blog framework, you can't go wrong with