Hello I was wondering if someone could tell me where I'm going wrong in this. I'm trying to get fluid scrollable content to align over an image that I have as a table background. I can get it to align in 1280x1024 but anything else and the text doesn't align. here's the code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- html {text-align:center;} body { font: 12px Verdana, Arial, Helvetica, sans-serif; background-color: #1D0707; margin: 0; padding: 0; text-align: center; color: #000000; } a:link {text-decoration:none; color: #804040} a:visited {text-decoration:none; color: #616161} a:hover {text-decoration:underline; color: #800000} a:active {text-decoration:underline; font-weight:bold; color: #0000FF} .oneColFixCtrHdr #container { width: 1024px; text-align: center; margin-top: 0px; background-image:url(images/BackgroundTile.jpg); margin-right: auto; margin-bottom: 0; margin-left: auto; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: inset; border-right-style: outset; border-bottom-style: outset; border-left-style: inset; border-top-color: #dddddd; border-right-color: #dddddd; border-bottom-color: #dddddd; border-left-color: #dddddd; } .oneColFixCtrHdr #header { height: 156px; padding: 0; } .oneColFixCtrHdr #header h1 { margin: 0; padding: 10px 0; } .oneColFixCtrHdr #mainContent { padding: 0 20px; } .oneColFixCtrHdr #footer { background-image:url(images/BottomBar.gif); height: 114px; padding: 0 10px; } .oneColFixCtrHdr #footer p { margin: 0; padding: 10px 0; font-size:8px; color:#FFFFFF; } #apDiv1 { margin:0 auto; text-align:left; position:absolute; left:126px; top:143px; width:1006px; height:32px; background-image: url(images/MenuBar.gif); right: auto; } #apDiv2 { margin:0 auto; text-align:left; position: relative; left:auto; top:auto; width:1024px; height:156px; background-image: url(images/Header3.gif); bottom: auto; } .oneColFixCtrHdr #container #mainContent table { overflow: scroll; } .oneColFixCtrHdr #mainContent { } #apDiv3 { position:absolute; left:350px; top:389px; max-width:600px; max-height:300px; z-index:3; overflow: auto; } --> </style> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body class="oneColFixCtrHdr" onload="MM_preloadImages('images/HomeOff.gif','images/PhilosophyOn.gif','images/HierarchyOn.gif','images/FAQon.gif','images/ConductOn.gif','images/ContactOn.gif')"> <div id="apDiv3"> <p align="left">Content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content    content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content.</p> <p align="left"> Content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content    content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content  content.</p> <p align="left" > </p> </div> <div id="container" align="center"> <div id="header" align="center"> <div align="center" class="oneColFixCtrHdr" id="apDiv1"> <table width="100%" border="0" align="center"> <tr align="center" valign="middle"> <td height="27" valign="middle"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/HomeOn.gif',1)"><img src="images/HomeOff.gif" name="Home" width="43" height="25" border="0" id="Home" /></a></td> <td height="27" valign="middle"> </td> <td height="27" valign="middle"><a href="philosophy.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Philosophy','','images/PhilosophyOn.gif',1)"><img src="images/PhilosophyOff.gif" name="Philosophy" width="81" height="25" border="0" id="Philosophy" /></a></td> <td height="27" valign="middle"> </td> <td height="27" valign="middle"><a href="hierarchy.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Hierarchy','','images/HierarchyOn.gif',1)"><img src="images/HierarchyOff.gif" name="Hierarchy" width="78" height="25" border="0" id="Hierarchy" /></a></td> <td height="27" valign="middle"> </td> <td height="27" valign="middle"><a href="faq.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FAQ','','images/FAQon.gif',1)"><img src="images/FAQoff.gif" name="FAQ" width="35" height="25" border="0" id="FAQ" /></a></td> <td height="27" valign="middle"> </td> <td height="27" valign="middle"><a href="http://wearelegend.net/forum/index.php" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Forums','','images/ForumsOn.gif',1)"><img src="images/ForumsOff.gif" name="Forums" width="57" height="26" border="0" id="Forums" /></a></td> <td height="27" valign="middle"> </td> <td height="27" valign="middle"><a href="conduct.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Conduct','','images/ConductOn.gif',1)"><img src="images/ConductOff.gif" name="Conduct" width="67" height="25" border="0" id="Conduct" /></a></td> <td height="27" valign="middle"> </td> <td height="27" valign="middle"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/ContactOn.gif',1)"><img src="images/ContactOff.gif" name="Contact" width="66" height="25" border="0" id="Contact" /></a></td> </tr> </table> </div> <div id="apDiv2" align="center"></div> <!-- end #header --></div> <div id="mainContent"> <h1><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"><img src="images/spacer.gif" width="1" height="75" /></div></td> </tr> </table> </h1> <table width="750" height="440" border="0" align="center" cellspacing="60" background="images/HomeParchment.gif"> <tr align="right" class="oneColFixCtrHdr"> <td class="oneColFixCtrHdr"><h1> </h1> <p> </p> </td> </tr> </table> <h1> </h1> <!-- end #mainContent --></div> <div id="footer"> <p><img src="images/FooterSpacer.gif" width="1" height="99" />© Java Junkie 2007</p> <!-- end #footer --></div> <!-- end #container --></div> </body> </html> Any help anyone could give me would be monumentally appreciated.
The problem is that you're not actually aligning anything. You're only fixing it to a certain position based on your resolution which just so happens to looked in the proper position. Without the images though I can't really give you the exact pixels to use in order to get it perfectly positioned, however I can give you the code that will give you an idea of how to fix the problem. In your CSS, find #apDiv1 and replace it with this: #apDiv1 { [B]margin-top:143px;[/B] width:1006px; height:32px; background-image: url(images/MenuBar.gif); } Code (markup): Notice that I removed a lot of the old code that was there before, most of it is now useless, but the important one was position:absolute. This means that it wont use a defined position, but rather use a position based on the where the code is located, and to position it i used the margin-top to push it down.
hrm ok this moved #apdiv2 below #apdiv1 and possibly changed the z index (#apdiv2 needs to be a higher priority.) I'm sure fixing that is a matter of a line or two of code I have and don't need or abscent code that I need but for some reason I'm just not getting it right :/