Question : Help with JQuery Photo Gallery

I've created a website at http://d92712.webspot50.sdwebspot.com/photos.html
If you visit the website in FireFox, the jQuery looks right.  you can click on the number and the images change.  In Internet Explorer 8, if you click on a number, the image changes, but it doesn't go far enough.  The last image is also left off.

I've looked through the code, but can't figure out what's going on.  Any ideas?

I've attached the entire CSS sheet, as well as the main html code spots.  (I suppose you could also view the source on the page... but it's here.)

Thank you for your help!
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:
279:
280:
281:
282:
283:
284:
285:
286:
287:
@charset "utf-8";
/* CSS Document */

	html, body {
		font-size:100%;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		color:#000000;
	}

	p {
		font-size:12px;
	}
	#topTextArea{
		width:270px;
	}

	#topImageArea{

		width:270px;
	}
	
	.centerPhoto{
		border:3px;
		border-color:#FFFFFF;
		border-style:solid;
	}
	

	.imgCaption {
		margin-top:0px;
	}
	.footer_td{
		font-size:12px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
		color:#E0DDCC;
		padding-top:4px;

	}
	.footer_td a:link{
		text-decoration:none;
		color:#E0DDCC;
	}
	.footer_td a:visited{
		text-decoration:none;
		color:#E0DDCC;
	}
	.footer_td a:hover{
		text-decoration:underline;
		color:#E0DDCC;
	}
	
	.copyright {
		margin-top:4px;
		font-size:10px;
		color:#FFFFFF;
		font-family:Verdana, Arial, Helvetica, sans-serif;	
	}
	.copyright a:link{
		color:#FFFFFF;
		
	}
	.copyright a:visited{
		color:#FFFFFF;
		
	}
	.copyright a:hover{
		color:#FF3300;
		
	}
	
	ul{
		font:Verdana, Arial, Helvetica, sans-serif;
		list-style-type:circle;
		color:#000000;
		font-size:12px;
	}
	
.folio_block {
	width: 683px;
	height:370px;
}
.main_view {
	width: 683px;
	height: 370px;
	float: left;
	position: relative;
}
.window {
	height:370px;
	width: 683px;
	overflow: hidden;
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel a {
	position: relative;
	float: left;
	cursor: pointer;
}
.image_reel img {float: left;}
.image_reel a span {
	height: 370px;
	width:683px;
	float: left;
	background: #111 url(icon_view.gif) no-repeat center;
	position: absolute;
	z-index: 10;
	top: 0; left: 0;
}
.paging {
	position: absolute;
	bottom: 20px; right: -3px;
	width: 258px; height:27px;
	z-index: 100;
	text-align: center;
	line-height: 40px;
    display: none;
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	font-weight: bold; 
	background: #E0DDCC; 
	border: 1px solid #ffffff;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.paging a:hover {text-decoration:underline;}

a.imageLink:link{
	color:#47392C;
	text-decoration:none;
	font-size:12px;
}
a.imageLink:visited{
	color:#47392C;
	text-decoration:none;
	font-size:12px;
}
a.imageLink:hover{
	color:#000000;
	text-decoration:underline;
	font-size:12px;
}
.imageLink_sel{
	color:#47392C;
	font-weight:bold;
	font-size:12px;
}
<!--------------- End CSS -----------------!>

<!--------------- Main HTML Table ------------>
<table id="Table_07" width="983" height="370" border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td width="683px">
                    <div class="folio_block">
                    <div class="main_view">
                        <div class="window">	
                            <div class="image_reel">
                                <a href="#" target="_blank"><img src="images/inside1/01.jpg" alt="Visions" width="683" height="370" border="0"/></a>
                      			<a href="#" target="_blank"><img src="images/inside1/02.jpg" alt="Visions" width="683" height="370" border="0"/></a>
                                <a href="#" target="_blank"><img src="images/inside1/03.jpg" alt="Visions" width="683" height="370" border="0"/></a>
                                <a href="#" target="_blank"><img src="images/inside1/04.jpg" alt="Visions" width="683" height="370" border="0"/></a>
                                <a href="#" target="_blank"><img src="images/inside1/05.jpg" alt="Visions" width="683" height="370" border="0"/></a>
                                <a href="#" target="_blank"><img src="images/inside1/06.jpg" alt="Visions" width="683" height="370" border="0"/></a>
                                <a href="#" target="_blank"><img src="images/inside1/07.jpg" alt="Visions" width="683" height="370" border="0"/></a>
                                <a href="#" target="_blank"><img src="images/inside1/08.jpg" alt="Visions" width="683" height="370" border="0"/></a>
                                <a href="#" target="_blank"><img src="images/inside1/09.jpg" alt="Visions" width="683" height="370" border="0"/></a>
                          </div>
                        <div class="paging">
                            <a href="#" rel="1">1</a>
                            <a href="#" rel="2">2</a>
                            <a href="#" rel="3">3</a> 
                            <a href="#" rel="4">4</a>
                            <a href="#" rel="5">5</a>
                            <a href="#" rel="6">6</a> 
                            <a href="#" rel="7">7</a>
                            <a href="#" rel="8">8</a>
                            <a href="#" rel="9">9</a>                        
                         </div>
        			</div>
                    </div>
                    </td>
  	  <td background="images/visions_08.jpg" width="300" height="370" valign="top">
                   	  	<!-- Main Image Table -->
                        <table border="0" cellpadding="0" cellspacing="0">
                        	<tr >
                            	<td height="20px"></td>
                            </tr>
                            <tr>
                            	<td width="8px"></td>
                            	<td> 
                                  <img src="images/imageTitle.jpg" width="273" height="76">                                </td>
                          </tr>
                        </table>
                        <!-- End Main Image Table -->
                       	<table>
                        	<tr>
                            	<td height="10px"></td>
                            </tr>
                        	<tr>
                            	<td width="5px"></td>
                            	<td>
                                <p align="center">View a collection of images from Visions! We are adding images every day, so please check back soon!</p>
                              <p align="center">
                              	<span class="imageLink_sel">Inside Images 1</span><BR/>
                                <BR/>
                              	<a class="imageLink" href="photos1.html" >Inside Images 2</a><BR/>
                                <BR/>
                                <a href="photos2.html" class="imageLink">Outside Images 1</a><BR/>
                                <BR/>
                                <a href="photos3.html" class="imageLink">Outside Images 2</a><BR/>
                              </p>
                              
                              </td>
                           	  <td width="14px"></td>
                             </tr>
                      </table>				  </td>
				</tr>
			</table>
<!----------  jQuery --------------------->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {


	$(".folio_block").each(function() {
	
		//Set Default State of each portfolio piece
		$(this).find(".paging").show();
		$(this).find(".paging a:first").addClass("active");
		
		//Inject <span> for Tool tip
		$(this).find(".image_reel a").append("<span></span>");
		$(this).find(".image_reel span").css({"opacity" : "0"});
													
		//Get size of images, how many there are, then determin the size of the image reel.
		var windowWidth = $(this).find(".image_reel span").width();
		var imageSum = $(this).find(".image_reel img").size();
		var imageReelWidth = windowWidth * imageSum;
		
		//Adjust the image reel to its new size
		$(this).find(".image_reel").css({'width' : imageReelWidth});
		
	});	

	//Hover Effect for Tooltip
	$(".image_reel a").hover(function() {
		$(this).find("span").stop().animate({ opacity: 0}, 200 ).show();
	}, function() {
		$(this).find("span").stop().animate({ opacity: 0}, 200 );
	});

	//Pagin events
	$(".paging a").click(function() {
	
		var triggerID = $(this).attr("rel") - 1;
		var imgWidth = $(this).parent().parent().find("img").width();
		var image_reelPosition = triggerID * imgWidth;
		
		//Ignore if Active
		if ( $(this).hasClass("active")) { 
			//Do Nothing
		}
		else {
			//Set active paging
			$(this).parent().parent().find(".paging a").removeClass("active");
			$(this).addClass("active");

			//image_reel Image
			$(this).parent().parent().find(".image_reel").animate({ 
				left: -image_reelPosition
			}, 300 );
		}
		return false;
	});

});
</script>

Answer : Help with JQuery Photo Gallery

Nevermind, I figured it out.  I left off the stupid doc type.
<!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">

Thanks anyways...
Random Solutions  
 
programming4us programming4us