I used this tutorial, http://www.filamentgroup.com/lab/buttonElement/

It works great in Firefox, but not in IE7 (not sure about 6).

See attached. The IE is the one that shows the buttons overlayed the right (sky blue colored) column, where in firefox it is aligned properly to the left.

In the link it says this

"CSS for IE 6 and 7 (conditionalize as needed):"

I have no idea what that means as I'm learning CSS now.

Please help.

The code used inside <td> is this

<button value="submit" class="submitBtn"><span>Order</span></button>

CSS code used...

Code:
/* ------------------------- */
/*     hover buttons       */
/* ------------------------- */

button { 
  border:0; 
  cursor:pointer; 
  font-weight:bold; 
  padding:0 20px 0 0; 
  text-align:center; 
}
button span { 
  position:relative; 
  display:block; 
  white-space:nowrap; 
  padding:0 0 0 20px; 
}

/*blue buttons*/
button.submitBtn { 
  background:url(../images/btn_blue_right.gif) right no-repeat; 
  font-size:1.3em; 
}
button.submitBtn span { 
  height:50px; 
  line-height:50px;
  background:url(../images/btn_blue_left.gif) left no-repeat;
  color:#fff; 
}
button.submitBtn:hover {
	background:url(../images/btn_blue_right_hover.gif) right no-repeat; 
}
button.submitBtn:hover span {
	background:url(../images/btn_blue_left_hover.gif) left no-repeat; 
}