13 replies [Last post]
fatlip
Offline
Regular
Last seen: 11 years 20 weeks ago
Timezone: GMT-4
Joined: 2010-07-21
Posts: 11
Points: 13

I have had this recurring problem with the info on the page shifting when the browser window is reduced in size.. yet other images and menu seem to move with the browser..

The site is www.owlshop.com

for some reason it triggered your spam filter.. *sigh*
with the site you could grab the necessary files..
sorry for the inconvenience ..

Any help would be greatly appreciated.. and i apologize early for the code mess my css ties to another page as well so all the .hidden code can be disregarded.. I think.. I have been doing this by hand and have been basically learning by fire..
thanks again

fatlip

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 2 years 1 week ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

Please post your HTML and

Please post your HTML and CSS.

The problem is most likely that you have not wrapped your content in a containing Div. your header, footer and background image are centralized to the page but your content is fixed. position: absolute;

Luke.

fatlip
Offline
Regular
Last seen: 11 years 20 weeks ago
Timezone: GMT-4
Joined: 2010-07-21
Posts: 11
Points: 13

html <!DOCTYPE html PUBLIC

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>

fatlip
Offline
Regular
Last seen: 11 years 20 weeks ago
Timezone: GMT-4
Joined: 2010-07-21
Posts: 11
Points: 13

css /* Global reset */ /*

css

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: <a href="http://developer.yahoo.com/yui" rel="nofollow">http://developer.yahoo.com/yui</a> */
*, 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

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 2 years 1 week ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

Sorry

Sorry I thought I had solved it then..

It is very messy code I would recommend deleting all <br /> and <center> tags and moving these in to your CSS as styling information!..

but bare with me for now I will see if I can amend your code.

The Main problem is that you are using absolute positioning on your content div!

Luke.

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 2 years 1 week ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

Try This

Sorry for double post.

Try this.. (Make sure you make a backup of the old one!)

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>
	<center>
		<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>                  
	<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>
 
			<!-- footer --><div class="footer">
							<div>
 
					<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: <a href="http://developer.yahoo.com/yui" rel="nofollow">http://developer.yahoo.com/yui</a> */
*, 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 {
margin-top:-1430px;
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
}

fatlip
Offline
Regular
Last seen: 11 years 20 weeks ago
Timezone: GMT-4
Joined: 2010-07-21
Posts: 11
Points: 13

yeah im pretty new to hand

yeah im pretty new to hand coding css so it's pretty cannibalized.. I apologize for that.. I'm more of a visual designer.. however i've been trying to increase my knowledge of what is actually happening with in the css.. I'm getting better.. but it gets kinda crazy and confusing when coding..

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 2 years 1 week ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

I know how you feel, I have a

I know how you feel,

I have a lot to learn still, kinda just need a kick up the butt sometimes.. Forums are useful for this Smile

Did it work?

fatlip
Offline
Regular
Last seen: 11 years 20 weeks ago
Timezone: GMT-4
Joined: 2010-07-21
Posts: 11
Points: 13

still have a wierd movement of the backdrop

no .. but I think I have an issue with a conflict between my html and css.. so im rebuilding my files so their a lot cleaner and less confusing.

http://www.owlshop.com/indextestb.html

if you look you'll see how i still have an issue with the stupid backdrop not staying centered.
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/css3b.css" /></head>
 
<body>
 
	<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>
 
	<div class="backdrop">
	<!-- insert content here -->
	</div>
	<!-- footer -->
<div class="footer">
	<div>
 
		<ul class="fnav">
 
		</ul>
 
	</div>
 
</div>
 
 
</body>
 
</html>

css

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: <a href="http://developer.yahoo.com/yui" rel="nofollow">http://developer.yahoo.com/yui</a> */
*, 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 }
/* 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);top:30px; z-index:2 }
div.header div { margin:0 auto; width:870px }
div.footer { width:100%; height:101px; background:url(../images/footer.png); top:10px; z-index:2 }
div.footer div { margin:0 auto; width:620px }
div.backdrop { width:800px; height:1500px; background:url(../images/backdrop.png); top:-200px; left:300px; z-index:-1 }

fatlip
Offline
Regular
Last seen: 11 years 20 weeks ago
Timezone: GMT-4
Joined: 2010-07-21
Posts: 11
Points: 13

Findings

found the problem.. in the new div class profile the margin had to be set to auto.

div.backdrop {  margin:0 auto; width:800px; height:1500px; background:url(../images/backdrop.png); top:-200px; z-index:-1 }

I'll keep posting just in case I do do something wrong and so others can find an answer should they have a similar problem

fatlip
Offline
Regular
Last seen: 11 years 20 weeks ago
Timezone: GMT-4
Joined: 2010-07-21
Posts: 11
Points: 13

hmm.. any idea how i should

hmm.. any idea how i should incorporate a caption.. using css..

www.owlshop.com/indextestb.html

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/css3b.css" /></head>
 
<body>
 
	<div class="header">
	        <div>	
	             <div id="logo1"></div>
					<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>
 
	<div class="backdrop">
	<!-- insert content here -->
		<div class="content">
		<h1>Owl Shop of Worcester</h1>
		<h2>416 MAIN ST WORCESTER, MASSACHUSETTS</h2>
 
							<p>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.</p>
 
 
								<p><img src="../images/animatedsign2.gif" class="floatRight"> 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.
								</p>
							<p>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.</p>
							<p>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.</p>  
		</div>
	</div>
	<!-- footer -->
<div class="footer">
	<div>
 
		<ul class="fnav">
 
		</ul>
 
	</div>
 
</div>
 
 
</body>
 
</html>

css

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: <a href="http://developer.yahoo.com/yui" rel="nofollow">http://developer.yahoo.com/yui</a> */
*, 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;}
pre {font-family: "Times New Roman", serif; font-weight: bold; }
ul.nav {  width:380px; height:30px; padding:16px 0 0 0; position:absolute; top:180px; right:240px; 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 }
/* 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);top:85px; z-index:2 }
div.header div { margin:0 auto; width:870px }
div.footer { width:100%; height:101px; background:url(../images/footer.png); top:-275px; z-index:2 }
div.footer div { margin:0 auto; width:620px }
div.backdrop {  margin:0 auto; width:800px; height:1500px; background:url(../images/backdrop.png); top:-150px; z-index:-1 }
div.content { position:relative; margin:0 auto; top:445px; width:706px; height:1; z-index:1; background-color:transparent; text-align:left; }
 
/* header tags */
h1 { position:relative; font-size: 40px; color: #ffcc33; top:-150px; text-align:center;}
h2 { position:relative; font-size: 20px; color: #ffcc33; top:-150px; text-align:center;}
/* content tags */
p { margin-left:50px ;margin-top:-130px; color:#dcdcdc; top:-300; width:600px; }  
p + p { margin-top:10px; }
 
#logo1 { margin:0 auto; background:url(../images/logotm.png); width:587px; height:425px; position:relative; top:-80px;  z-index:3}
/* image tags */
img.floatLeft { float: left; margin: 0px; }
img.floatRight { float: right; margin: 0px; padding:1px 1px 4px 10px }

lukewakeford
lukewakeford's picture
Offline
Enthusiast
UK, West Sussex, Dorset
Last seen: 2 years 1 week ago
UK, West Sussex, Dorset
Joined: 2010-07-24
Posts: 71
Points: 84

What do you want the caption

What do you want the caption for? Where abouts in the site is it needed?..

You could think about using LightBox or something similar.

Luke.

fatlip
Offline
Regular
Last seen: 11 years 20 weeks ago
Timezone: GMT-4
Joined: 2010-07-21
Posts: 11
Points: 13

lightbox

well I tried light box but the links are unclickable.. I like the idea and i really want to use it.. I have even set up a test page with separate css file and js.. it works there.. I enclosed it in the same divs and it still worked so I think it's a conflict between my css files.

www.owlshop.com/indextestb.html (actual test page)
www.owlshop.com/test4.html (lightbox test page)

css

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: <a href="http://developer.yahoo.com/yui" rel="nofollow">http://developer.yahoo.com/yui</a> */
*, 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;}
pre {font-family: "Times New Roman", serif; font-weight: bold; }
ul.nav {  width:380px; height:30px; padding:16px 0 0 0; position:absolute; top:180px; right:240px; 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 }
/* 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);top:85px; z-index:2 }
div.header div { margin:0 auto; width:870px }
div.footer { width:100%; height:101px; background:url(../images/footer.png); top:-275px; z-index:2 }
div.footer div { margin:0 auto; width:620px }
div.backdrop {  margin:0 auto; width:800px; height:1500px; background:url(../images/backdrop.png); top:-150px; z-index:-1 }
div.content { position:relative; margin:0px 0px 0px 55px; top:350px; width:706px; height:1; z-index:1; background-color:transparent; text-align:left; }
div.floatRight {float: right; width:260px; clear:right; color:#ffcc33; padding:1px 1px 1px 10px;}
div.floatLeft  {  float: left;  color:#ffcc33; padding:1px 15px 1px 1px; }
/* header tags */
h1 { position:relative; font-size: 50px; color: #ffcc33; top:-20px; text-align:center;}
h2 { position:relative; font-size: 30px; color: #ffcc33; top:-20px; text-align:center;}
/* content tags */
p {margin-top:0; color:#dcdcdc; }
 
 
#logo1 { margin:0 auto; background:url(../images/logotm.png); width:587px; height:425px; position:relative; top:-80px;  z-index:3}
/* image tags */

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">
		<script src="/js/prototype.js" type="text/javascript"></script>
		<script src="/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
		<script src="/js/lightbox.js" type="text/javascript"></script>
		<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
		<link rel="stylesheet" type="text/css" media="screen" href="/css/css3b.css" />
		</head>
 
<body>
 
	<div class="header">
	        <div>	
	             <div id="logo1"></div>
					<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>
 
	<div class="backdrop">
	<!-- insert content here -->
		<div class="content">
		<h1>Owl Shop of Worcester</h1>
		<h2>416 MAIN ST WORCESTER, MASSACHUSETTS</h2>
 
							<div class="floatRight">
								<img src="../images/animatedsign2.gif" width="250" height="103" alt="Owlshop"></img>
								<br><font size=2>The Owl Shop sign has been seen on</font>
								<br><font size=2>Main Street since 1946.</font>
							</div>	
 
 
 
 
							<p>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.</p>
 
							<br>
								<div class="floatLeft">
							<img src="../images/photos/johnanddad.gif" width="150" height="124" alt="john"></img>
							<br><font size=2>George and John Photakis</font>
							</div>
								<p>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.
								</p>
							<br>
							<p>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.</p>
							<br>
							<div class="floatRight">
							<img src="../images/photos/zachnic.jpg" width="200" height="150" alt="zach nic"></img>
							<br><font size=2> Zack Photakis with Jorge Padrón</font>
							</div>
							<p>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.</p>  
 
				<a href="../images/photos/zachnic800.jpg" rel="lightbox"><img src="../images/photos/zachnic.jpg" /></a>
 
 
		</div>
 
	</div>
 
	<!-- footer -->
<div class="footer">
	<div>
 
		<ul class="fnav">
 
		</ul>
 
	</div>
 
</div>
 
 
</body>
 
</html>

fatlip
Offline
Regular
Last seen: 11 years 20 weeks ago
Timezone: GMT-4
Joined: 2010-07-21
Posts: 11
Points: 13

problem found

okay after much trial and error I found the problem in the css line

div { position:relative }

deleted line and tried to fix what was now broken in the code

div.backdrop {  margin:0 auto; width:800px; height:1500px; background:url(../images/backdrop.png); top:-150px; z-index:-1 }

by making it "position: relative;" but that just made it unclickable again.. My guess is because this contains what will be added by the lightbox js script, that it is cascading down to the new divs that are written. Im not sure how to stop this from happening.. I do want it to be contained with in this div but I fear without some way to clear previous css I'm screwed.