JavaScript - Doctype Killing Js In Ie

I was roughing out a feature I want to add to my site in notepad with no doctype declared.

I got it just how I wanted, then realized it didn't work in IE. I added a doctype, it validates at xhtml strict, but it killed IE, while it started adding round corners in IE which wasn't working with no doctype...but now my JS isn't working...

So I lost functionality of the JS while adding the round corner style that wasnt working when the JS was mostly working...

FF works fine every damn way of course....

I uploaded it to http://pugetsoundtraining.com/Portfolio/spriteTest.html

Also when it was functioning, the lower set of icons background wasn't showing.

You can load that link ^^ in FF to see exactly what I'm going for....it works in ff

css:
Code:

body {
  margin: 0px;
  font-family: "Georgia", serif;
} 
/* Give headings their own font */ 
h1, h2, h3, h4 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
 
/* Main content area */ 
#content {
position:absolute;
top:70px;
left:500px;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
 
/* Header/footer boxes */ 
.wideBox {
  clear: both;
  text-align: center;
  border: 1px solid #333;
}
 
.wideBox h1 {
  font-weight: bold;
  margin: 0px;
  color: #666;
  font-size: .5em;
} 
/* Slots for final card positions */ 
#cardSlots {
  margin: 50px auto 0 auto;
  background: #ddf;
} 
/* The initial pile of unsorted cards */ 
#cardPile {
 // margin: 0 auto;
 background: #ffd;
}
 
#cardSlots, #cardPile {
  width: 250px;
  height: 120px;
  border: 3px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;   
  -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .3em rgba(0, 0, 0, .8); 
}
 
/* Individual cards and slots */ 
#cardSlots div, #cardPile div */
  float: left;
  -moz-width:35px;
  -moz-height:35px;
  width: 35px;
  height: 35px;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 5 5 5 5px;
 // background: #fff;
} 
#cardSlots div:first-child, #cardPile div:first-child {
  margin-left: 0px;
}
#cardSlots div.hovered {
  background: #aaa;
}
#cardSlots div {
  border-style: dashed;
} 
#cardPile div {
  background: #666;
  color: #fff;
  font-size: 5px;
  text-shadow: 0 0 3px #000;
}   
#cardPile div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  opacity:0.5;
  filter:alpha(opacity=50); /* For IE8 and earlier */
}
 
#card1.ui-draggable{background:url(iconSprite2.png) 0px 0px no-repeat;}
#card2.ui-draggable{background:url(iconSprite2.png) -36px 0px no-repeat; }
#card3.ui-draggable{background:url(iconSprite2.png) -73px 0px no-repeat; }
#card4.ui-draggable{background:url(iconSprite2.png) -108px 0px no-repeat; }
#card5.ui-draggable{background:url(iconSprite2.png) -143px 0px no-repeat; }
#card6.ui-draggable{background:url(iconSprite2.png) -178px 0px no-repeat; }
#card7.ui-draggable{background:url(iconSprite2.png) -213px 0px no-repeat; }
#card7.ui-draggable{background:url(iconSprite2.png) -250px 0px no-repeat; }
#card8.ui-draggable{background:url(iconSprite2.png) -285px 0px no-repeat; }
#card9.ui-draggable{background:url(iconSprite2.png) -319px 0px no-repeat; }
#card10.ui-draggable{background:url(iconSprite2.png) -353px 0px no-repeat; }
 
/* "You did it!" message */
#successMessage {
  position: absolute;
  left: 580px;
  top: 250px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #dfd;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;
}

#displayCardNum {
	height:400px;
	width:500px;
	position:absolute;
	top:80px;
	right:25px;
}
#score {
	width:200px;
	font-size:25px;
	height:50px; 
	position:absolute;
	top:300px;
	right:300px;
}
#status {
	width:300px;
	font-size:25px;
	height:50px; 
	position:absolute;
	top:150px;
	right:200px;
}

html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>XHTML 1.0 Strict validated</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="game.js"></script>
 
<script type="text/javascript"> 
</script>
</head>


<body>
<div id="content">
  <div id="cardPile"> </div>
  <div id="cardSlots"> </div>
 
  <div id="successMessage">
    <h2>You did it!</h2> 
    <button onclick="init()">Play Again</button>
  </div>

  <div id="reset">
    <h2>Reset</h2>
    <button onclick="init()">Reset?</button>
  </div>
</div>
<div id="displayCardNum">Error Msg: </div>
<div id="score">Sco  <span id="myTextToShow"></span>
 </div>
<div id="status"></div>
  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
      src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>
  
</body>
</html>

javascript:
Quote:
var correctCards = 0;
var points = 0;
$( init );

function init() {
// Hide the success message
$('#successMessage').hide();
$('#successMessage').css( {
left: '580px',
top: '250px',
width: 0,
height: 0
} );

//Card Game Below
// Reset the game
correctCards = 0;
points=0;
document.getElementById('score').innerHTML = "Sco "+ points;
var status;

$('#cardPile').html( '' );
$('#cardSlots').html( '' );

// Create the pile of shuffled cards
var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
numbers.sort( function() { return Math.random() - .5 } );

for ( var i=0; i<10; i++ ) {
$('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}

//Create sprite background offset for card slots
var pos = [ '0px 0px', '-36px 0px', '-73px 0px', '-108px 0px', '-143px 0px', '-178px 0px', '-250px 0px', '-285px 0px', '-319px 0px', '-353px 0px' ];

// Create the card slots
var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
for ( var i=1; i<=10; i++ ) {
$('<div style="background:url(iconSpriteGrey.png)' + pos[i-1] +' no-repeat;>"' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
}

//Handle the card drop
function handleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'number' );
var cardNumber = ui.draggable.data( 'number' );

// If the card was dropped to the correct slot,
// change the card colour, position it directly
// on top of the slot, and prevent it being dragged
// again

if ( slotNumber == cardNumber ) {
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
correctCards++;
win();
//alert('you just dropped ' + cardNumber + " in the correct spot, slot number: " + slotNumber);
}
else if(slotNumber != cardNumber){
updateCards();
fail();
};

function updateCards() {
document.getElementById('displayCardNum').innerHTML = "Sorry but you tried to place a<b> " + cardNumber + " </b>into a<b> " + slotNumber + "</b> socket";}

function win() {
points+=5;
status=' Win 5 points!';
showScore();
$('#status').fadeIn("slow");
$('#status').fadeOut("slow");
}

function fail() {
points-=3;
status=' lose 3 points!';
showScore();
$('#status').fadeIn("slow");
$('#status').fadeOut("slow");
}
function showScore() {

if(points < 0) {points = 0;}
document.getElementById('score').innerHTML = "Sco "+ points;
document.getElementById('status').innerHTML="Status: <b>" + status + "</b>";

}
// If all the cards have been placed correctly then display a message
// and reset the cards for another go

if ( correctCards == 10 ) {

$('#successMessage').show();
$('#successMessage').animate( {
left: '380px',
top: '200px',
width: '400px',
height: '100px',
opacity: 1
} );
}
}