halpinj said:I tried the changes you suggested but the layer or the background is still
moving. If you go to the following link you can see what it is doing:
http://www.olympdirect.com/Classic Kent Plain White.htm
Here is the latest code with the changes you suggested:
<html>
<head>
<style="text/css">
<!--
body: { text-align:center; } /* darn that IE5! */
#wrapper { text-align:left; width:775px; margin:0 auto;
position:relative; }
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Classic Kent Plain White</title>
<meta name="keywords" content="shirts, business shirts, non-irion,
non-iron
shirts, Olymp, Luxor, Olym Luxor">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1.00)">
<script language="JavaScript">
<!--
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs=new Image;
d.FP_imgs.src=a; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2;
n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) {
doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById)
el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return
el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes;
if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return
el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return
el; } }
return null;
}
// -->
</script>
</head>
<body onload="FP_preloadImgs(/*url*/'buttonF.jpg', /*url*/'button1B2.jpg',
/*url*/'button1B3.jpg', /*url*/'button1B5.jpg', /*url*/'button1B6.jpg',
/*url*/'button1B8.jpg', /*url*/'button1B9.jpg', /*url*/'button148.jpg',
/*url*/'button149.jpg')">
<div style="position: absolute; width: 100px; height: 23px; z-index: 3;
left: 438px; top: 497px" id="layer4">
<p align="center"><b><font face="Arial"
color="#C0C0C0">OPTIONS</font></b></div>
<!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=581822;
var sc_partition=4;
var sc_security="9161df5e";
var sc_invisible=1;
</script>
<script type="text/javascript" language="javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript><a
href="http://www.statcounter.com/" target="_blank"><img
src="http://c5.statcounter.com/counter.php?sc_project=581822&java=0&security=9161df5e&invisible=1"
alt="free website hit counter" border="0"></a> </noscript>
<!-- End of StatCounter Code -->
<div align="center" style="background-repeat: no-repeat;
background-position: center 25px">
<table border="0" cellpadding="0" cellspacing="0" width="775"
height="566">
<!-- MSTableType="layout" -->
<tr>
<td valign="top" colspan="17" align="center">
<!-- MSCellType="ContentHead" -->
<p align="center">
<map name="FPMap4">
<area href="index.htm" shape="rect" coords="0, 0, 243, 24">
<area href="index.htm" shape="rect" coords="276, 6, 320, 24">
<area href="collar%20selection.htm" shape="rect" coords="324, 7, 362, 22">
<area href="v%20l%20Sizes_1.htm" shape="rect" coords="372, 6, 454, 21">
<area href="Laundering_1x.htm" shape="rect" coords="467, 5, 523, 23">
<area href="guarantee.htm" shape="rect" coords="534, 7, 590, 25">
<area
href="http://www.ekmpowershop.com/ekmps/shops/olymp/index.asp?function=CART"
shape="rect" coords="597, 8, 660, 24">
<area
href="http://www.ekmpowershop.com/ekmps/shops/olymp/index.asp?function=CHECKOUT"
shape="rect" coords="663, 9, 720, 24">
</map>
<img border="0" src="header%20v2.gif" width="762" height="27"
usemap="#FPMap4"></td>
<td></td>
<td height="28"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td height="1"></td>
</tr>
<tr>
<td valign="top" rowspan="5" colspan="6">
<!-- MSCellType="NavBody" -->
<table cellpadding="0" cellspacing="0" border="0" width="100%"
height="100%">
<!-- MSCellFormattingTableID="1" -->
<tr>
<td valign="top" width="100%" height="100%">
<!-- MSCellFormattingType="content" -->
<img border="0" src="kent-White-v2.jpg" width="355" height="436"></td>
</tr>
</table>
</td>
<td></td>
<td> </td>
<td></td>
<td></td>
<td colspan="8" valign="middle">
<!-- MSCellType="NavBody" -->
<p align="center">
<img border="0" src="Classic%20Collar%20Plain%20White.gif" width="290"
height="11"></td>
<td height="40"></td>
</tr>
<tr>
<td></td>
<td> </td>
<td valign="top" rowspan="5" align="center">
<!-- MSCellType="NavBody" -->
<table cellpadding="0" cellspacing="0" border="0" width="100%"
height="100%">
<!-- MSCellFormattingTableID="3" -->
<tr>
<td bgcolor="#C0C0C0" width="2">
<img alt="" width="2" height="1" src="images/MsSpacer.gif"></td>
<td valign="top" align="center" height="100%" width="100%">
<!-- MSCellFormattingType="content" -->
<p align="center" style="margin-top: 25px"> </td>
</tr>
</table>
</td>
<td valign="top" colspan="7">
<!-- MSCellType="NavBody" -->
<p style="margin-bottom: -10px; margin-left:10px; margin-right:10px;
margin-top:15px">
<font face="Arial">Crisp Plain White, that stays white. This will always
be
amongst our top three best sellers.</font></p>
<p style="margin-bottom: -8px; margin-left:10px; margin-right:10px">
<font face="Arial">Classic Kent Collar - a traditional business
look.</font></p>
<p style="margin-bottom: -8px; margin-left:10px; margin-right:10px"><font
face="Arial">Single Cuff - to
button <i>or</i> take cuff links.</font></p>
<p style="margin-bottom: -8px; margin-left:10px; margin-right:10px"><font
face="Arial">Single Breast
Pocket.</font></td>
<td></td>
<td></td>
<td height="150"></td>
</tr>
<tr>
<td></td>
<td> </td>
<td></td>
<td valign="top" colspan="8">
<p align="center" style="margin-top: 0px; margin-bottom:10px">
<font face="Arial" size="4">Select your collar size</font></p>
<p align="center" style="margin-top: -10px">
<font face="Arial" size="2" color="#808080">If you normally wear size
15</font><font color="#808080"><span style="font-size: 10.0pt;
font-family:
Arial">½</span></font><font face="Arial" size="2" color="#808080">", we
</font></p>
<p align="center" style="margin-top: -20px; margin-bottom: -10px">
<font face="Arial" size="2" color="#808080">recommend that you purchase a
size 40cm</font></td>
<td height="59"></td>
</tr>
<tr>
<td></td>
<td> </td>
<td valign="top" colspan="2">
<!-- MSCellType="NavBody" -->
<p align="center" style="margin-top: 5px">
<img border="0" src="Regular%20Sleeve%20Single%20Cuff.gif" width="106"
height="66"></td>
<td valign="top" align="left" colspan="3">
<!-- MSCellType="NavBody" -->
<FORM NAME="product"
ACTION="http://www.ekmpowershop.com/ekmps/shops/olymp/index.asp?function=CART&mode=ADD&productid=50"
METHOD=POST>
<TABLE BORDER=0 width="167" >
<TR>
<TD WIDTH=22>
</TD>
<TD>
<INPUT TYPE="hidden" NAME="optiontype_1" VALUE="DROPDOWN">
<SELECT NAME="options_1" MAXLENGTH=5>
<OPTION VALUE="23">38cm (15")</OPTION>
<OPTION VALUE="24">39cm (15 1/4")</OPTION>
<OPTION VALUE="25">40cm (15 3/4")</OPTION>
<OPTION VALUE="26">41cm (16")</OPTION>
<OPTION VALUE="27">42cm (16 1/2")</OPTION>
<OPTION VALUE="28">43cm (17")</OPTION>
<OPTION VALUE="29">44cm (17 1/2")</OPTION>
<OPTION VALUE="30">45cm (17 3/4")</OPTION>
<OPTION VALUE="31">46cm (18")</OPTION>
<OPTION VALUE="32">47cm (18 1/2")</OPTION>
<OPTION VALUE="33">48cm (19")</OPTION>
</SELECT>
<font size="1" face="Arial">REGULAR SLEEVES </font></TD>
</TR>
</TABLE>
<INPUT TYPE=HIDDEN NAME="numberofoptions" VALUE="1">
<p align="center">
<INPUT TYPE="Submit" VALUE="Add to Cart">
</p>
</FORM>
<td></td>
<td valign="top" colspan="4" height="106">
<!-- MSCellType="NavBody" -->
<table cellpadding="0" cellspacing="0" border="0" width="100%"
height="100%">
<!-- MSCellFormattingTableID="4" -->
<tr>
<td height="100%" width="100%">
<!-- MSCellFormattingType="content" -->
<table border="0" width="100%" height="100%" cellpadding="5"
cellspacing="0">
<tr>
<td width="100%" height="100%" valign="top">
<p align="center">
<img border="0" src="£39.95%20Banner%20v2.gif" width="75"
height="58"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td> </td>
<td height="81"></td>
<td valign="top" colspan="9" rowspan="3">
<!-- MSCellType="NavBody" -->
<div style="position: absolute; width: 348px; height: 12px; z-index: 2;
left: 102px; top: 487px; border-bottom-style: solid; border-bottom-width:
1px; padding-bottom: 1px" id="layer2">
</div>
<p align="center" style="margin-top: 0px; margin-bottom: 0px">
<map name="FPMap2">
<area href="guarantee.htm" shape="rect" coords="7, 6, 214, 92">
</map>
<img border="0" src="Guarantee%20V2.gif" width="215" height="93"
usemap="#FPMap2"></td>
</tr>
<tr>
<td></td>
<td valign="top" colspan="4" rowspan="2">
<!-- MSCellType="NavBody" -->
<table cellpadding="0" cellspacing="0" border="0" width="100%"
height="100%">
<!-- MSCellFormattingTableID="2" -->
<tr>
<td valign="top" width="100%" height="100%">
<!-- MSCellFormattingType="content" -->
<p style="margin-right: 0px; margin-bottom:0" align="left">
<font color="#CCCCCC">
<img border="0" src="Plain%20White.gif" width="343"
height="12"></font></td>
</tr>
</table>
</td>
<td></td>
<td></td>
<td></td>
<td height="14"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td height="13"></td>
</tr>
<tr>
<td valign="middle" colspan="3">
<!-- MSCellType="NavBody" -->
<img border="0" src="BACK%20BUTTON.gif" width="100" height="20"
onClick="history.go(-1)"></td>
<td valign="middle">
<!-- MSCellType="NavBody" -->
<a href="Classic%20Kent%20Plain%20White%20HALF%20SLEEVE.htm">
<img border="0" id="img1" src="button1B4.jpg" height="20" width="100"
alt=" Half Sleeve"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button1B2.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button1B4.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button1B3.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button1B2.jpg')"
fp-style="fp-btn: Jewel 4; fp-font: Arial; fp-font-size: 8;
fp-justify-horiz:
0" fp-title=" Half Sleeve"></a></td>
<td valign="middle" colspan="3">
<!-- MSCellType="NavBody" -->
<a href="Classic%20Kent%20Plain%20White%20SHORTER%20SLEEVE.htm">
<img border="0" id="img2" src="button1B7.jpg" height="20" width="100"
alt=" Shorter Sleeve"
onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button1B5.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button1B7.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button1B6.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button1B5.jpg')"
fp-style="fp-btn: Jewel 1; fp-font: Arial; fp-font-size: 8;
fp-justify-horiz:
0" fp-title=" Shorter Sleeve"></a></td>
<td valign="middle" colspan="5">
<!-- MSCellType="NavBody" -->
<a href="Classic%20Kent%20Plain%20White%20LONGER%20SLEEVE.htm">
<img border="0" id="img3" src="button1B10.jpg" height="20" width="100"
alt=" Longer Sleeve"
onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button1B8.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button1B10.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button1B9.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button1B8.jpg')"
fp-style="fp-btn: Jewel 2; fp-font: Arial; fp-font-size: 8;
fp-justify-horiz:
0" fp-title=" Longer Sleeve"></a></td>
<td valign="middle">
<!-- MSCellType="NavBody" -->
<a href="Classic%20Kent%20Plain%20White%20DOUBLE%20CUFF.htm">
<img border="0" id="img4" src="button153.jpg" height="20" width="100"
alt=" Double Cuff"
onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button148.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'button153.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button149.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button148.jpg')"
fp-style="fp-btn: Jewel 5; fp-font: Arial; fp-font-size: 8;
fp-justify-horiz:
0" fp-title=" Double Cuff"></a></td>
<td valign="middle" colspan="6" height="35">
<!-- MSCellType="NavBody" -->
<img border="0" src="BUTTON%20FILLER%20Single%20Cuff.gif" width="101"
height="20"></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="15" valign="bottom">
<!-- MSCellType="ContentFoot" -->
<p align="center" style="margin-top: 3px">
<map name="FPMap5">
<area href="Payment.htm" shape="rect" coords="263, 18, 312, 32">
<area href="about_1.htm" shape="rect" coords="319, 20, 355, 32">
<area href="Terms%20&%20Conditions_1.htm" shape="rect" coords="363, 19,
457,
32">
</map>
<img border="0" src="footer%20v2.gif" width="724" height="33"
usemap="#FPMap5"></td>
<td></td>
<td height="37"></td>
</tr>
<tr>
<td width="1"></td>
<td width="1"></td>
<td width="98"></td>
<td width="135"></td>
<td width="128"></td>
<td width="1"></td>
<td width="6"></td>
<td width="14"></td>
<td width="6"></td>
<td width="2"></td>
<td width="109"></td>
<td width="4"></td>
<td width="135"></td>
<td width="29"></td>
<td width="3"></td>
<td width="100"></td>
<td width="1"></td>
<td width="1"></td>
<td height="2" width="1"></td>
</tr>
</table>
</div>
<div style="position: absolute; width: 348px; height: 12px; z-index: 2;
left: 527px; top: 487px; border-bottom-style: solid; border-bottom-width:
1px; padding-bottom: 1px" id="layer3">
</div>
</div><!-- /wrapper -->
</body>
</html>
Murray said:Yes - see this -
<div style="position: absolute; width: 100px; height: 23px; z-index: 3;
left: 438px; top: 497px" id="layer4">
POSITION:Absolute means what it says. It's like super glue, cementing
that
div and its contents exactly 438px from the left margin of its parent
(positioned) element, in this case, the <body> tag.
But then along comes this -
<div align="center" style="background-repeat: no-repeat;
background-position: center 25px">
<table border="0" cellpadding="0" cellspacing="0" width="775"
height="566">
(I'm not exactly sure why you are doing it that way)
which causes that table to center align on the page, and causes you to
think
that the layer is moving.
One solution would be to do the following -
Add this to the head of the page -
<style="text/css">
<!--
body: { text-align:center; } /* darn that IE5! */
#wrapper { text-align:left; width:775px; margin:0 auto;
position:relative; }
-->
</style>
And change this -
<div style="position: absolute; width: 100px; height: 23px; z-index: 3;
to this -
<div id="wrapper">
<div style="position: absolute; width: 100px; height: 23px; z-index: 3;
and this -
</body>
to this -
</div><!-- /wrapper -->
</body>
And see what happens. The entire page has now been wrapped in a
centering
div, and it's one that will be used for positioning all the 'layers'
rather
than the body tag. You may need to reposition your layers a bit, but
there
you go....
Want to reply to this thread or ask your own question?
You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.