Problem with shifting images when window is reduced

I m having an issue with some images and text shifting when i reduce the browser size… i have a feeling it has to do with my lack of knowledge of writing css by hand… how ever any help would be appreciated…

html:


<!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" xml:lang="en" lang="en">
<!-- .header -->
	<head>
		<title>The Owl Shop of Worcester</title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
		<link rel="stylesheet" type="text/css" media="screen" href="../css/style3.css" />
	    <link rel="stylesheet" type="text/css" media="screen" href="../css/transblock.css" />
		
	
	
	
	
	
	</head>

	<body>
	<br>
	<br>
	<br>
	<br>
	
		<div class="header">
	         <div>	
	             <h1>The Owl Shop of Worcester</h1>

				 	 
				 
				 
						
						<ul class="nav">
								
		                   <span class="class1">
									<pre><a href="index.html" title="About Us">About</a>        <a href="/html/products.html" title="Our Products">Products</a>        <a href="index.html" title="Latest News"> News</a></pre>
								
							</span>	
						</ul>	
						
					
				
		             
		     </div>
		</div>

		<h2>backdrop</h2>
		
		
		
		
		
		
		
		 <br>
    <center>                    
	<br>
	<div id="contentfield">
                     <h3>
                        <font size="6" color="#ffcc33">Owl Shop of Worcester</font>
                    <br><font size="4" color="#ffcc33">416 MAIN ST WORCESTER, MASSACHUSETTS</font>

					</h3>
                    
					<br>
                     <br>
                                      
					
					<table border="0" cellpadding="3" cellspacing="2" width=
                     "720">
                      
					  <tr align="center">
                           <td width="392" align="left" valign="top">
                              <font color="#dcdcdc">Since opening in 1946, the
                              Owl Shop of Worcester has been serving the finest
                              tobacco products the world has to offer. Towards
                              the end of World War II, George Photakis and his
                              brother-in-law Joseph St. John, decided that
                              Worcester Massachusetts, would be a great place
                              to open a store to service the desires of smokers
                              in the Northeast and beyond.</font> 
                              <div align="left">
                                 <br>

                                 <br>
                                 <table border="0" cellpadding="6" cellspacing=
                                 "2" align="RIGHT" width="255">
                                    <tr>
                                       <td>
                                          <img alt="error-file:TidyOut.log"
                                          src="../images/animatedsign2.gif"
                                          width="250" height="103"> 
										  
										  <font size="2" color="#ffcc33">
										  <br>
                                           The Owl Shop sign has been seen on
                                          Main<br>
                                           Street since 1946.</font>

                                          
                                       </td>
                                    </tr>
                                 </table>
                                 <font color="#dcdcdc">For over 60 years,
                                 George, and his staff have serviced hundreds
                                 of thousands of customers who have crossed the
                                 doorsteps of the Owl Shop and savored the
                                 flavors and aromas of fine tobacco, be it
                                 cigars, pipe tobacco, imported cigarettes, or
                                 roll your own cigarette tobacco. Custom
                                 blended pipe tobaccos such as Harkness Towers,
                                 Bay State House and WB#3 have been smoked by
                                 pipe smokers all over the world. Cigars have
                                 always been a specialty in the Owl Shop,
                                 featuring all brands such as Arturo Fuente Opus X , 
								 Davidoff from the Dominican Republic, to the ever popular Padrón 1926
								 from Nicaragua. If we are out, we
                                 will have the expertise to suggest alternative
                                 choices.</font><br>
                                 <br>
                              </div>
                              <br>
                              <br>

                              <table border="0" cellpadding="4" cellspacing="2"
                              align="LEFT" width="162">
                                 <tr>
                                    <td>
                                       <a href="/html/store2.html"><img alt=
                                       "error-file:TidyOut.log" src=
                                       "../images/photos/johnanddad.gif" width=
                                       "150" height="124" border="0"></a><br>
                                        <font size="2" color="#ffcc33">George
                                       and John Photakis</font><br>
                                        
                                       
                                    </td>
                                 </tr>
                              </table>

                              <font color="#dcdcdc">John Photakis joined the
                              family business in the late 70s, and brought with
                              him his knowledge of pipe making learned from old
                              world pipe makers from the New York City pipe
                              shops. John managed to find a small group of
                              old-timers who were reluctant to train new
                              apprentices at first, but slowly they gave him
                              the time and knowledge. After purchasing ancient
                              tools of the trade, John began making his own
                              line of custom-made pipes and sold them
                              exclusively through the store. With the knowledge
                              learned by making pipes, the process of
                              purchasing other brand name pipes became a
                              consumer's dream. In 2002 John passed on in a fatal 
							  car accident. Leaving us at the young age of 51, he 
							  will be greatly missed.
							  </font><br>
                              <br>
                              <br>
                                 <br>
                                 <table border="0" cellpadding="6" cellspacing=
                                 "2" align="RIGHT" width="200">
                                    <tr>
                                       <td>
                                          <a href="/html/zachnic.html">

										  <img alt="error-file:TidyOut.log"
                                          src="../images/photos/zachnic.jpg"
                                          width="200" height="150" border="0">
										  </a>
										  <br>
										   <font size="2" color="#ffcc33">
                                           Zack Photakis with Jorge Padrón
                                         </font>
                                          
                                       </td>
                                    </tr>
                                 </table>

								 <font color="#dcdcdc"> With John's passing, 
								 his son Zack then joined the family business
								 full time.  As the third generation of family, 
								 Zack has grown up in the store with great knowledge 
								 of the product and industry.  Traveling to foreign 
								 countries, studying the tobacco process from start 
								 to finish, Zack has established an amazing variety
								 of the best tobacco grown throughout the world. His
								 love and passion for the tobacco industry will continue
								 to make the Owl Shop stand out as one of the premier 
								 tobacconists in New England.

							  
							  
							  </font><br>
                              <p>
                                 <font color="#dcdcdc">The web site will be
                                 under construction as we go along. We would
                                 like it to be a source of information for you,
                                 the consumer.</font>
                              </p>
                              <p>
                                 <font color="#dcdcdc">We take pride in giving
                                 smokers a complete line of services and
                                 expertise and we look forward to hearing from
                                 you ...</font>
                              </p>

                            <br>
                            <br>							
                            <br>
							<center>
							 <table border="0" cellpadding="3" cellspacing="2"
                              align="center" width="200">
                                 <tr>
                                    <td>
                                       <center>
                                          <a href="/html/store.html"><img alt=
                                          "error-file:TidyOut.log" src=
                                          "../images/photos/owl_shop_ad2_thumb.jpg"
                                           border="0" width="200" height="128"></a> 
                                          
                                       </center>

                                    </td>
                                 </tr>
                              </table>
							 
							 </table>
	</div>
</center>                             
			<!-- footer --><div class="footer">
							<div>
						  <center>
					<br>

						<br>
						<br>
							<ul class="fnav">
						
						
						<font color="#dcdcdc">Our store hours are
                                 Monday - Saturday, 9 - 6 p.m. (Eastern)</font>
                             
                              <p>
                                 <font color="#ffcc33">Call us @ 800-844-7755
                                 or fax us @ 508-753-2506</font>
                              </p>
							</ul>

							</div>
							
							</div>
							 </center>
<br>
<br>		

	</body>

</html>

css:


/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h5, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight: bold }
em { font-style: italic }
.class1 A:link {text-decoration: none; color: #ffffff;}
.class1 A:visited {text-decoration: none; color: #ffffff;}
.class1 A:active {text-decoration: none; color: #ffffff;}
.class1 A:hover {text-decoration: underline; color: #ffffff;}

.class2 A:link {text-decoration: none; color: #ffcc33; font-size: 25px}
.class2 A:visited {text-decoration: none; color: #ffcc33; font-size: 25px}
.class2 A:active {text-decoration: none; color: #ffcc33; font-size: 25px}
.class2 A:hover {text-decoration: none; color: #ffcc33; font-size: 30px }

.hidden A span {
position: absolute;
left: 280px;
top: 0;
border: none;
width: 600px;
height: 310px;
visibility: hidden;
z-index: 3;
}
.hidden A:hover span {
position: absolute;
left: 280px;
top: 0;
border: none;
width: 600px;
height: 310px;
visibility: visible;
z-index: 3;
}

.hidden2 A span {
position: absolute;
left: 280px;
top: 0;
border: none;
width: 600px;
height: 310px;
visibility: hidden;
z-index: 3;
}
.hidden2 A:hover span {
position: absolute;
left: 280px;
top: 0;
border: none;
width: 600px;
height: 310px;
visibility: visible;
z-index: 3;
}

.hidden3 A span {
position: absolute;
left: 280px;
top: 0;
border: none;
width: 600px;
height: 310px;
visibility: hidden;
z-index: 3;
}
.hidden3 A:hover span {
position: absolute;
left: 280px;
top: 0;
border: none;
width: 600px;
height: 310px;
visibility: visible;
z-index: 3;
}

.hidden4 A span {
position: absolute;
left: 280px;
top: 0;
border: none;
width: 600px;
height: 310px;
visibility: hidden;
z-index: 3;
}
.hidden4 A:hover span {
position: absolute;
left: 280px;
top: 0;
border: none;
width: 600px;
height: 310px;
visibility: visible;
z-index: 3;
}

.hidden5 A span {
position: absolute;
left: 280px;
top: 0;
border: none;
width: 600px;
height: 310px;
visibility: hidden;
z-index: 3;
}
.hidden5 A:hover span {
position: absolute;
left: 280px;
top: 0;
border: none;
width: 600px;
height: 310px;
visibility: visible;
z-index: 3;
}

.hidden6 A span {
position: absolute;
left: 280px;
top: 0;
border: none;
width: 600px;
height: 310px;
visibility: hidden;
z-index: 3;
}
.hidden6 A:hover span {
position: absolute;
left: 280px;
top: 0;
border: none;
width: 600px;
height: 310px;
visibility: visible;
z-index: 3;
}

.hidden7 A span {
position: absolute;
left: 280px;
top: 0;
border: none;
width: 600px;
height: 310px;
visibility: hidden;
z-index: 3;
}
.hidden7 A:hover span {
position: absolute;
left: 280px;
top: 0;
border: none;
width: 600px;
height: 310px;
visibility: visible;
z-index: 3;
}

pre {font-family: "Times New Roman", serif; font-weight: bold; }
/* Main layout blocks */
body { background:#302718 url(../images/backround.jpg) top center no-repeat fixed }
div { position:relative }
div.header { width:100%; height:268px; background:url(../images/osbanner3.png); z-index:2 }
div.header div { margin:0 auto; width:870px }
div.wrapper { margin:-100px auto 100px auto; width:620px; height:2000px; background:url(../images/wrapper.png); z-index:1 }
div.footer { width:100%; height:101px; background:url(../images/footer.png); top:10px; z-index:2 }
div.footer div { margin:0 auto; width:620px }

/* Precise stuff */
h1 { text-indent:-9999px; background:url(../images/logotm.png); width:587px; height:425px; position:absolute; top:-80px; left:125px; z-index:3}
h2 { text-indent:-9999px; background:url(../images/backdrop.png); width:800px; height:1500px; position:relative; top:-250px; right:-300px; z-index:-1}
h6 { text-indent:-9999px; background:url(../images/text.gif); width:334px; height:86px; position:absolute; top:100px; right:50px; z-index:3}

ul.nav {  width:380px; height:30px; padding:16px 0 0 0; position:absolute; top:180px; right:250px; text-align:center; z-index:4 }
ul.nav li { font:14px/14px Georgia, 'Times New Roman', Times, serif; color:#000000; display:inline }
ul.nav li a { color:#000000; text-decoration:none }
ul.nav li a:hover { color:#000000 }

/*footer move*/
ul.fnav {  width:500px; height:30px; padding:16px 0 0 0; position:absolute; top:39px; right:75px; text-align:center; z-index:2 }
ul.fnav li { font:14px/14px Georgia, 'Times New Roman', Times, serif; color:#ffcc33; display:inline }
ul.fnav li a { color:#ffcc33; text-decoration:none }
ul.fnav li a:hover { color:#ffcc33 }



h5 { display:block; text-indent:-9999px; background:url(../images/tab.png); width:407px; height:97px; position:absolute; top:-17px; right:-180px; z-index:1}
h4 { text-indent:-9999px; background:url(../images/owlborder.png); width:400px; height:600px; position:absolute; top:325px; left:130px; z-index:2}

#contentfield {
position:absolute;
left:350px; 
top:445px; 
width:706px;
height:1;
z-index:1;
background-color:transparent;
}  
 
#specialstyle2 div {
margin: 5px;
padding: 5px;
border: 1px solid #ffcc33;
height: 800px;
width: 600px;
background: #000;
color: #ffcc33;
float: left;
clear: right;
position:absolute; 
top:0px; 
left:275px; 
z-index:2

www.owlshop.com is the site… some of the css is for another page “products” which is having the same problem but you can take a look any how… thanks for the speedy response!!

It would be far easier if you have a lin kto the site to look at? I do not understand why you have inline css + a seperate css document and so many tables…