...
PDA

Alignment of main container shifting

Pendora
04-01-2011, 09:04 PM
I'm in the process of creating a website with a main header and container on every page. The main page looks like this:

Main Page (http://img717.imageshack.us/f/screenshot20110401at255.png)

And I follow that general layout throughout the site.

However, I've noticed that on any secondary page in which the height of the main container is taller than the container of the main page, the entire page shifts to the left a few noticeable pixels.

Secondary Page (http://img28.imageshack.us/f/screenshot20110401at300.png)

I don't know how easy it is to see from these screenshots, but there you go. I have noticed that as long as the content of the page stays around 600 pixels or less, it's fine. But as soon as it gets to, say, a height of 700 pixels, the container shifts.

I'm including the code for the main (correctly centered) page as well as the secondary (jumped to the left) page.

Main Page:

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="graphic design, graphic designer, graphics, graphics design, commercial artist, commercial art, advertising, advertising design, creative design, creativity, commercial arts, commercial artist, marketing, promotion, promotional materials, freelance, freelancer, freelance artist, advertisements, advertising agency, brochure, brochure design, freelance designer, independent designer, graphic design studio, art studio, creative studio, contract artist, design studio, catalog, catalog design, logo, corporate identity, corporate logo design, logotype, fonts, artist, artwork, poster, postcard, email campaign, e-blast, web design, web graphics, animated graphics, flash animation, ad banner, branding, product development, package design, packaging, hobby, toy, toys, radio control, r/c, remote control" />
<title>TABB DESIGN Advertising Art &amp; Graphics 847-683-2994</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
.sidebar1 {
background-color: #FFF;
height: 530px;
width: 700px;
padding: 10px;
float: left;
margin-top: 15px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;
}
.footer {
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
padding-left: 35px;
}
a:link {
text-decoration: none;
color: silver;
}
a:visited {
text-decoration: none;
color: silver;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
color: silver;
}
.footer div a {
font-size: 10px;
}
</style>
</head>

<body bgcolor="#cdcece" onload="MM_preloadImages('file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsDesignWorkCurrent.png','file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsServicesCurrent.png','file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsProjectQuoteCurrent.png','TDPhoneGlassButtondHOVERTWO.png','PhoneButtonHover1.png','EmailButto nHover1.png','Contact Buttons/PhoneButtonHover3.gif','Contact Buttons/EmailButtonHover3.gif')">
<div align="center">
<table width="739" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000">
<tr>
<td height="160" bgcolor="black"><table width="734" border="0" cellpadding="8">
<tr>
<td width="198" height="158"><a href="indexKayTee.html"><img src="TD2010MonoLogo.png" border="0" width="183" height="158" /></a></td>
<td width="401">&nbsp;</td>
<td width="79">&nbsp;</td>
</tr>
</table>
<a href="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/recentwork.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Recent Work','','file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsDesignWorkCurrent.png',1)"><img src="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsDesignWork.png" alt="Recent Work" name="Recent Work" width="175" height="40" border="0" id="Recent Work" /></a><a href="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Services','','file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsServicesCurrent.png',1)"><img src="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsServices.png" alt="Services" name="Services" width="175" height="40" border="0" id="Services" /></a><a href="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/projectquote.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Project Quote','','file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsProjectQuoteCurrent.png',1)"><img src="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsProjectQuote.png" alt="Project Quote" name="Project Quote" width="175" height="40" border="0" id="Project Quote" /></a><img src="Contact Buttons/BlankButtonStandard3.gif" width="43" height="58" border="0" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Phone2','','Contact Buttons/PhoneButtonHover3.gif',1)"><img src="Contact Buttons/PhoneButtonStandard3.gif" alt="Phone2" name="Phone2" width="70" height="58" border="0" id="Phone2" /></a><a href="mailto:tabbdesign@foxvalley.net" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Email2','','Contact Buttons/EmailButtonHover3.gif',1)"><img src="Contact Buttons/EmailButtonStandard3.gif" alt="Email" name="Email2" width="70" height="58" border="0" id="Email2" /></a></td>
<tr>
<td width="739" height="500" bgcolor="#ffffff"><img src="TDHomePageLayoutC.png" width="740" height="600" /></td>
</tr>
<tr><td class="footer" height="20px" width="739" bgcolor="#000000"><div> <a href="indexKayTee.html"> Home</a> | <a href="recentwork.html">Recent Work</a> | <a href="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/services.html">Services</a> | <a href="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/projectquote.html">Project Quote</a> | <a href="mailto:tabbdesign@foxvalley.net">Email Tabb Design</a><img src="FooterDivider.png" width="125" height="8" alt="footer divider" /> Member of the <a href="http://www.freelancedesigners.com/" target="_new">Freelance Designers Directory</a></div></td>
</tr>
</table>
<h4>&nbsp;</h4>
</tr>

</table>
</div>

<map name="Map" id="Map">
<area shape="poly" coords="128,245" href="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/recentwork.html" target="_top" alt="recent work" />
<area shape="poly" coords="21,213" href="#" />
</map>
</body>
</html>

Secondary Page:

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="graphic design, graphic designer, graphics, graphics design, commercial artist, commercial art, advertising, advertising design, creative design, creativity, commercial arts, commercial artist, marketing, promotion, promotional materials, freelance, freelancer, freelance artist, advertisements, advertising agency, brochure, brochure design, freelance designer, independent designer, graphic design studio, art studio, creative studio, contract artist, design studio, catalog, catalog design, logo, corporate identity, corporate logo design, logotype, fonts, artist, artwork, poster, postcard, email campaign, e-blast, web design, web graphics, animated graphics, flash animation, ad banner, branding, product development, package design, packaging, hobby, toy, toys, radio control, r/c, remote control" />
<title>TABB DESIGN Advertising Art &amp; Graphics 847-683-2994</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script type="text/javascript" src="csspopup.js"></script>
<style type="text/css">
.sidebar1 {
background-color: #FFF;
height: 530px;
width: 700px;
padding: 10px;
float: left;
margin-top: 15px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;
}
.footer {
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
padding-left: 35px;
}
a:link {
text-decoration: none;
color: silver;
}
a:visited {
text-decoration: none;
color: silver;
}
a:hover {
text-decoration: none;
color: white;
}
a:active {
text-decoration: none;
color: silver;
}
body,td,th {}
<!--
#blanket {
background-color:#111;
opacity: 0.65;
position:absolute;
z-index: 9001; /*ooveeerrrr nine thoussaaaannnd*/
top:0px;
left:0px;
width:100%;
}
#popUpDivPkg {
position:absolute;
background-color:#eeeeee;
width:650px;
height:96px;
z-index: 9002; /*ooveeerrrr nine thoussaaaannnd*/
}
#popUpDivPkg2 {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002; /*ooveeerrrr nine thoussaaaannnd*/
}
#popUpDivPkg3 {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002; /*ooveeerrrr nine thoussaaaannnd*/
}
#popUpDivPkg4 {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002; /*ooveeerrrr nine thoussaaaannnd*/
}
#popUpDivPkg5 {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002; /*ooveeerrrr nine thoussaaaannnd*/
}
#popUpDivPkg6 {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002; /*ooveeerrrr nine thoussaaaannnd*/
}
font-family: Arial, Helvetica, sans-serif;

-->
</style>
</head>

<body bgcolor="#cdcece" onload="MM_preloadImages('file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsDesignWorkCurrent.png','file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsServicesCurrent.png','file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsProjectQuoteCurrent.png','TDPhoneGlassButtondHOVERTWO.png','PhoneButtonHover1.png','EmailButto nHover1.png','Contact Buttons/PhoneButtonHover3.gif','Contact Buttons/EmailButtonHover3.gif','Print/WebTitle100%.jpg','Print/PrintTitle100%.jpg','Package/PackagePlaneHover.jpg')">
<div align="center">
<table width="739" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000">
<tr>
<td height="160" bgcolor="black"><table width="740" border="0" cellpadding="8">
<tr>
<td width="194" height="158"><a href="indexKayTee.html"><img src="TD2010MonoLogo.png" border="0" width="183" height="158" /></a></td>
</tr>
</table> <a href="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/recentwork.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Recent Work','','file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsDesignWorkCurrent.png',1)"><img src="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsDesignWork.png" alt="Recent Work" name="Recent Work" width="175" height="40" border="0" id="Recent Work" /></a><a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('services','','TDTabsServicesCurrent.png',1)"><img src="TDTabsServices.png" alt="services" name="services" width="175" height="40" border="0" id="services" /></a><a href="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/projectquote.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Project Quote','','file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsProjectQuoteCurrent.png',1)"><img src="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsProjectQuote.png" alt="Project Quote" name="Project Quote" width="175" height="40" border="0" id="Project Quote" /></a><img src="Contact Buttons/BlankButtonStandard3.gif" width="43" height="58" alt="blank" /><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Phone2','','Contact Buttons/PhoneButtonHover3.gif',1)"><img src="Contact Buttons/PhoneButtonStandard3.gif" alt="Phone" name="Phone2" width="70" height="58" border="0" id="Phone2" /></a><a href="mailto:tabbdesign@foxvalley.net" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Email2','','Contact Buttons/EmailButtonHover3.gif',1)"><img src="Contact Buttons/EmailButtonStandard3.gif" alt="Email" name="Email2" width="70" height="58" border="0" id="Email2" /></a></td>
<tr>
<td width="720" height="200" bgcolor="#ffffff"><table width="699" border="0">
<tr>
<td width="276"><p><img src="Print/PackageTitle100%.jpg" width="220" height="45" alt="package" /></p></td>
<td width="206"><a href="web.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Web','','Print/WebTitle100%.jpg',1)"><img src="Print/WebTitle16%.jpg" alt="Web" name="Web" width="145" height="45" border="0" id="Web" /></a></td>
<td width="203"><a href="print.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Print','','Print/PrintTitle100%.jpg',1)"><img src="Print/PrintTitle16%.jpg" alt="Print" name="Print" width="151" height="45" border="0" id="Print" /></a></td>
</tr>
</table>
<table width="703" height="700" border="0" cellpadding="5" cellspacing="5">
<tr>
<td width="316"><div id="blanket" style="display:none;"></div>
<div id="popUpDivPkg" style="display:none;">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Flight','','Package/PackageFlightHover.jpg',1)" onclick="popup('popUpDivPkg')"><img src="Package/FlightFullSize.jpg" width="650" height="96" alt="Flight Fullsize" /></a>
</div>
<a href="#" onclick="popup('popUpDivPkg')" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Flight','','Package/PackageFlightHover.jpg',1)"><img src="Package/PackageFlight.jpg" alt="Flight" name="Flight" width="300" height="190" border="0" id="Flight" /></a></td>
<td width="352"><p>Insert Informational Text Here. Everything you need to know about this product can be found here.</p></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><p>&nbsp;</p></td>
</tr>
<tr>
<td height="278">&nbsp;</td>
<td><p>&nbsp;</p></td>
</tr>
</table></td>
</tr>
<tr><td class="footer" height="20px" width="739" bgcolor="#000000"><div> <a href="indexKayTee.html"> Home</a> | <a href="recentwork.html">Recent Work</a> | <a href="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/services.html">Services</a> | <a href="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/projectquote.html">Project Quote</a> | <a href="mailto:tabbdesign@foxvalley.net">Email Tabb Design</a><img src="images/FooterDivider.jpg" width="125" height="8" alt="footer divider" /> Member of the <a href="http://www.freelancedesigners.com/" target="_new">Freelance Designers Directory</a></div></td>
</tr>

</table>
</div>

<map name="Map" id="Map">
<area shape="poly" coords="128,245" href="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/recentwork.html" target="_top" alt="recent work" />
<area shape="poly" coords="21,213" href="#" />
</map>
</body>
</html>

Any insight you can offer would be greatly appreciated :) Thanks!
teedoff
04-01-2011, 09:15 PM
It's probably because of the additional pixels the scroll bar takes up when the page is long enough to need.

You can add a scroll bar to everypage even when its not needed. That way users wont notice any "shift" at all.

Add this to your stylesheet:

html {
overflow: scroll;
}
Pendora
04-01-2011, 10:19 PM
It's probably because of the additional pixels the scroll bar takes up when the page is long enough to need.

You can add a scroll bar to everypage even when its not needed. That way users wont notice any "shift" at all.

Add this to your stylesheet:

html {
overflow: scroll;
}

That worked beautifully! Thanks so much! :)
Pendora
04-19-2011, 11:03 PM
That was working, but somewhere in the last few weeks, the home page is shifting to the left again. Here's two pages to compare:

Home Page (http://www.tabbdesign.com)

Secondary Page (http://www.tabbdesign.com/services.html)

Here's the code for both pages:

Home Page:

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="graphic design, graphic designer, graphics, graphics design, commercial artist, commercial art, advertising, advertising design, creative design, creativity, commercial arts, commercial artist, marketing, promotion, promotional materials, freelance, freelancer, freelance artist, advertisements, advertising agency, brochure, brochure design, freelance designer, independent designer, graphic design studio, art studio, creative studio, contract artist, design studio, catalog, catalog design, logo, corporate identity, corporate logo design, logotype, fonts, artist, artwork, poster, postcard, email campaign, e-blast, web design, web graphics, animated graphics, flash animation, ad banner, branding, product development, package design, packaging, hobby, toy, toys, radio control, r/c, remote control" />
<title>TABB DESIGN Advertising Art &amp; Graphics 847-683-2994</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
.sidebar1 {
background-color: #FFF;
height: 530px;
width: 700px;
padding: 10px;
float: left;
margin-top: 15px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;
}
.footer {
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
padding-left: 35px;
}
a:link {
text-decoration: none;
color: silver;
}
a:visited {
text-decoration: none;
color: silver;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
color: silver;
}
.footer div a {
font-size: 10px;
}
html {
overflow: scroll;
}
</style>
<script type="text/javascript" language="JavaScript">
<!-- Copyright 2002 Bontrager Connection, LLC
//
// Type the number of images you are rotating.

NumberOfImagesToRotate = 4;

// Specify the first and last part of the image tag.

FirstPart = '<img src="FrontShowcase/images/FrontImage';
LastPart = '.jpg" height="600" width="740">';

function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//-->
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [480, 145], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://tabbdesign.com/TDReview1.jpg"],
["http://tabbdesign.com/TDReview2.jpg"],
["http://tabbdesign.com/TDReview3.jpg"],
["http://tabbdesign.com/TDReview4.jpg"],
["http://tabbdesign.com/TDReview5.jpg"],
["http://tabbdesign.com/TDReview6.jpg"],
["http://tabbdesign.com/TDReview7.jpg"],
["http://tabbdesign.com/TDReview8.jpg"],
["http://tabbdesign.com/TDReview9.jpg"],
["http://tabbdesign.com/TDReview10.jpg"],
["http://tabbdesign.com/TDReview11.jpg"],
["http://tabbdesign.com/TDReview13.jpg"],
["http://tabbdesign.com/TDReview14.jpg"],
["http://tabbdesign.com/TDReview15.jpg"],
["http://tabbdesign.com/TDReview16.jpg"],
["http://tabbdesign.com/TDReview17.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:7000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>
</head>

<body bgcolor="#cdcece" onload="MM_preloadImages('file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsDesignWorkCurrent.png','file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsServicesCurrent.png','file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/TDTabsProjectQuoteCurrent.png','TDPhoneGlassButtondHOVERTWO.png','PhoneButtonHover1.png','EmailButto nHover1.png','Contact Buttons/PhoneButtonHover3.gif','Contact Buttons/EmailButtonHover3.gif')">
<div align="center">
<table width="734" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000">
<tr>
<td bgcolor="black"><table width="734" border="0" cellpadding="8">
<tr>
<td width="198" height="158"><a href="index.html"><img src="TD2010MonoLogo.png" border="0" width="183" height="158" /></a></td>
<td width="490"><div id="fadeshow1"></div>
</td></tr>
</table>
<a href="creativeprocess.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Recent Work','','TDTabsDesignWorkCurrent.png',1)"><img src="TDTabsDesignWork.png" alt="Recent Work" name="Recent Work" width="175" height="40" border="0" id="Recent Work" /></a><a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Services','','TDTabsServicesCurrent.png',1)"><img src="TDTabsServices.png" alt="Services" name="Services" width="175" height="40" border="0" id="Services" /></a><a href="projectquote.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Project Quote','','TDTabsProjectQuoteCurrent.png',1)"><img src="TDTabsProjectQuote.png" alt="Project Quote" name="Project Quote" width="175" height="40" border="0" id="Project Quote" /></a><a href="http://284078.spreadshirt.com/" target="_new" onmouseover="MM_swapImage('Tee','','Contact Buttons/TeeButtonHover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Contact Buttons/TeeButtonStandard.gif" alt="Tee" name="Tee" width="63" height="52" border="0" id="Tee" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Phone2','','Contact Buttons/PhoneButtonHover3.gif',1)"><img src="Contact Buttons/PhoneButtonStandard3.gif" alt="Phone" name="Phone2" width="63" height="52" border="0" id="Phone2" /></a><a href="mailto:tabbdesign@foxvalley.net" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Email2','','Contact Buttons/EmailButtonHover3.gif',1)"><img src="Contact Buttons/EmailButtonStandard3.gif" alt="Email" name="Email2" width="63" height="52" border="0" id="Email2" /></a></td>
<tr>
<td width="739" height="500" bgcolor="#ffffff"><script language="JavaScript">
// Advanced Random Images Start
// Copyright 2001-2002 All rights reserved, by Paul Davis - www.kaosweaver.com
var j,d="",l="",m="",p="",q="",z="",KW_ARI= new Array()
KW_ARI[KW_ARI.length]='/FrontShowcase/images/FrontImageA.jpg?&width=740&height=600';
KW_ARI[KW_ARI.length]='/FrontShowcase/images/FrontImageB.jpg?&width=740&height=600';
KW_ARI[KW_ARI.length]='/FrontShowcase/images/FrontImageC.jpg?&width=740&height=600';
KW_ARI[KW_ARI.length]='/FrontShowcase/images/FrontImageD.jpg?&width=740&height=600';
j=parseInt(Math.random()*KW_ARI.length);
j=(isNaN(j))?0:j;
if (KW_ARI[j].indexOf('?')==-1) {
document.write("<img src='"+KW_ARI[j]+"'>");
}
else {
nvp=KW_ARI[j].substring(KW_ARI[j].indexOf('?')+2).split('&');
for(var i=0;i<nvp.length;i++) {
sub=nvp[i].split('=');
switch(sub[0]) {
case 'link':
l="<a href='"+unescape(sub[1])+"'>";
p="</a>";
break;
case 'target':
q=" target='"+unescape(sub[1])+"'";
break;
default:
m+=" "+sub[0]+"='"+unescape(sub[1])+"'";
break;
}
}
z=(l!="")?((q!="")?l.substring(0,l.length-1)+q+">":l):"";
z+="<img src='"+KW_ARI[j].substring(0,KW_ARI[j].indexOf('?'))+"'"+m+">"+p;
document.write(z);
}

// Advanced Random Images End
</script>
<!-- KW ARI Image --></td>
</tr>
<tr><td class="footer" height="20px" width="739" bgcolor="#000000"><div> <a href="index.html"> Home</a> | <a href="creativeprocess.html">The Creative Process </a> | <a href="services.html">Services</a> | <a href="projectquote.html">Project Quote</a> | <a href="contact.html">Contact Tabb Design</a><img src="FooterDivider.png" width="88" height="10" alt="footer divider" /> Member of the <a href="http://www.freelancedesigners.com/" target="_new">Freelance Designers Directory</a></div></td>
</tr>

</table>
</div>

<map name="Map" id="Map">
<area shape="poly" coords="128,245" href="file:///iMac27/Users/edwardtabb/Desktop/Tabb Design Kay Tee/creativeprocess.html" target="_top" alt="recent work" />
<area shape="poly" coords="21,213" href="#" />
</map>
</body>
</html>

Secondary Page:

<!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">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="graphic design, graphic designer, graphics, graphics design, commercial artist, commercial art, advertising, advertising design, creative design, creativity, commercial arts, commercial artist, marketing, promotion, promotional materials, freelance, freelancer, freelance artist, advertisements, advertising agency, brochure, brochure design, freelance designer, independent designer, graphic design studio, art studio, creative studio, contract artist, design studio, catalog, catalog design, logo, corporate identity, corporate logo design, logotype, fonts, artist, artwork, poster, postcard, email campaign, e-blast, web design, web graphics, animated graphics, flash animation, ad banner, branding, product development, package design, packaging, hobby, toy, toys, radio control, r/c, remote control" />
<title>TABB DESIGN Advertising Art &amp; Graphics 847-683-2994</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
.sidebar1 {
background-color: #FFF;
height: 530px;
width: 700px;
padding: 10px;
float: left;
margin-top: 15px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;
}
.footer {
color: #FFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
padding-left: 35px;
}
a:link {
text-decoration: none;
color: silver;
}
a:visited {
text-decoration: none;
color: silver;
}
a:hover {
text-decoration: none;
color: white;
}
a:active {
text-decoration: none;
color: silver;
}
html {
overflow: scroll;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [480, 145], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://tabbdesign.com/TDReview1.jpg"],
["http://tabbdesign.com/TDReview2.jpg"],
["http://tabbdesign.com/TDReview3.jpg"],
["http://tabbdesign.com/TDReview4.jpg"],
["http://tabbdesign.com/TDReview5.jpg"],
["http://tabbdesign.com/TDReview6.jpg"],
["http://tabbdesign.com/TDReview7.jpg"],
["http://tabbdesign.com/TDReview8.jpg"],
["http://tabbdesign.com/TDReview9.jpg"],
["http://tabbdesign.com/TDReview10.jpg"],
["http://tabbdesign.com/TDReview11.jpg"],
["http://tabbdesign.com/TDReview13.jpg"],
["http://tabbdesign.com/TDReview14.jpg"],
["http://tabbdesign.com/TDReview15.jpg"],
["http://tabbdesign.com/TDReview16.jpg"],
["http://tabbdesign.com/TDReview17.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:7000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script></head>

<body bgcolor="#cdcece" onload="MM_preloadImages('TDTabsDesignWorkCurrent.png','TDTabsServicesCurrent.png','TDTabsProjectQuoteCurren t.png','TDPhoneGlassButtondHOVERTWO.png','PhoneButtonHover1.png','EmailButtonHover1.png','Services/WebHover.jpg','Services/PrintHover.jpg','Services/PackageHover.jpg','Contact Buttons/PhoneButtonHover3.gif','Contact Buttons/EmailButtonHover3.gif')">
<div align="center">
<table width="734" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000">
<tr>
<td bgcolor="black"><table width="734" border="0" cellpadding="8">
<tr>
<td width="198" height="158"><a href="index.html"><img src="TD2010MonoLogo.png" border="0" width="183" height="158" /></a></td>
<td width="490"><div id="fadeshow1"></div>
</td></tr>
</table> <a href="creativeprocess.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Recent Work','','TDTabsDesignWorkCurrent.png',1)"><img src="TDTabsDesignWork.png" alt="Recent Work" name="Recent Work" width="175" height="40" border="0" id="Recent Work" /></a><img src="TDTabsServicesCurrent.png" width="175" height="40" alt="Services" /><a href="projectquote.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Project Quote','','TDTabsProjectQuoteCurrent.png',1)"><img src="TDTabsProjectQuote.png" alt="Project Quote" name="Project Quote" width="175" height="40" border="0" id="Project Quote" /></a><a href="http://284078.spreadshirt.com/" target="_new" onmouseover="MM_swapImage('Tee','','Contact Buttons/TeeButtonHover.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Contact Buttons/TeeButtonStandard.gif" alt="Tee" name="Tee" width="63" height="52" border="0" id="Tee" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Phone2','','Contact Buttons/PhoneButtonHover3.gif',1)"><img src="Contact Buttons/PhoneButtonStandard3.gif" alt="Phone" name="Phone2" width="63" height="52" border="0" id="Phone2" /></a><a href="mailto:tabbdesign@foxvalley.net" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Email2','','Contact Buttons/EmailButtonHover3.gif',1)"><img src="Contact Buttons/EmailButtonStandard3.gif" alt="Email" name="Email2" width="63" height="52" border="0" id="Email2" /></a></td>
<tr>
<td height="500" bgcolor="#ffffff"><center><table width="734" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="19">&nbsp;</td>
<td width="16">&nbsp;</td>
<td width="229"><a href="web.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Web','','Services/WebHover.jpg',1)"><img src="Services/WebNoSelect.jpg" alt="Web" name="Web" width="210" height="400" border="0" id="Web" /></a></td>
<td width="227"><a href="print.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Print','','Services/PrintHover.jpg',1)"><img src="Services/PrintNoSelect.jpg" alt="Print" name="Print" width="210" height="400" border="0" id="Print" /></a></td>
<td width="243"><a href="package.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Package','','Services/PackageHover.jpg',1)"><img src="Services/PackageNoSelect.jpg" alt="Package" name="Package" width="210" height="400" border="0" id="Package" /></a></td>

</tr>
</table></center></td>
</tr>
<tr><td class="footer" height="20px" width="739" bgcolor="#000000"><div> <a href="index.html"> Home</a> | <a href="creativeprocess.html">The Creative Process </a> | <a href="services.html">Services</a> | <a href="projectquote.html">Project Quote</a> | <a href="contact.html">Contact Tabb Design</a><img src="FooterDivider.png" width="88" height="10" alt="footer divider" /> Member of the <a href="http://www.freelancedesigners.com/" target="_new">Freelance Designers Directory</a></div></td>
</tr>

</table>
</div>

<map name="Map" id="Map">
<area shape="poly" coords="128,245" href="creativeprocess.html" target="_top" alt="recent work" />
<area shape="poly" coords="21,213" href="#" />
</map>
</body>
</html>

Any further help would be appreciated :) Thanks!

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum