Weird: Content Shifts Down Sometimes [Archive] - Web Design & Web Development Forum: HTML, CSS, JavaScript, PHP

bonmot

24 Aug 2010, 06:39 PM

Hi, I've just found this forum and really hoping someone can explain this odd situation.

The site is http://thomasblack.com/index.html

The left content (Vertical color bar, menu, logo, footer) shifts down under the following situations:
1) Only some of the pages (Home, Links, Inquiries and Contact Us) alway load correctly. All the others load incorrectly.
2) Only in IE8. FF, Safari and IE7 always work fine.
3) Only on initial load. Refresh or navigate back and they all load correctly.
4)Only on the Network Solutions server its on now. On my local machine and on my IX WebHosting server they always load correctly.

It's this last point that seems really odd.

The html code below is for the "Products" page (Loads wrong) and there's also the CSS.

Many thanks for looking at this. Any suggestions whatever greatly appreciated!

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Products</title>

<link rel="stylesheet" href="style.css" type="text/css" />

<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>

</head>

<body class="body">

<div class="envelope">

<div class="leftContent">
<div class="leftStrip">
</div>

<div class="menuBox">
<a href="index.html" class="menuText" target="_self">HOME</a>
<br />
<a href="who-History.html" class="menuText" target="_self">WHO WE ARE</a>
<br />
<a href="products.html" class="deadLink" target="_self">PRODUCTS</a>
<br />
<a href="services.html" class="menuText" target="_self">SERVICES</a>
<br />
<a href="carriers.html" class="menuText" target="_self">CARRIERS</a>
<br />
<a href="links.html" class="menuText" target="_self">LINKS</a>
<br />
<a href="requests.html" class="menuText" target="_self">INQUIRIES</a>
<br />
<a href="contact.html" class="menuText" target="_self">CONTACT US</a>
<br />
</div>

<div class="pagesLogo">
</div>

<div class="footerBox">
<span class="footerText">
Thomas Black Auto
<br />
Insurance Agency
</span>
<br />

<div class="copyrightBox">
<span class="copyrightText">Copyright 2010<br />
All Rights Reserved by<br />
Thomas Black Auto Insurance Agency.<br /> </span>
<br />
<a href="http://greatisland.com/" class="footerLink" target="_blank">Site Design by Great Island Design</a>
</div>

</div>
</div>
<div class="flashBox">



<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0',
'width', '600',
'height', '600',
'src', 'products',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'products',
'bgcolor', '#ffffff',
'name', 'products',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'products',
'salign', ''
); //end AC code
}
</script>
<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="600" height="600" id="products" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="products.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /> <embed src="products.swf" quality="high" bgcolor="#ffffff" width="600" height="600" name="products" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>

</div>

</div>

</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

.body {
margin:0 auto;
background-color:#5a7e92;
}

.envelope {
width:800px;
height:1000px;
background-color:#FFFFFF;
background-repeat:no-repeat;
margin:0 auto;
}

.leftContent {
width:155px;
float:left;
}

.leftStrip {
width:25px;
height:600px;
background-color:#8ca3af;
margin-left:-25px;
margin-top:0px;
float:left;
}

.menuBox {
width:115px;
height:250px;
margin-left:50px;
margin-top:67px;
padding-left:10px;
border-left:solid thin #5a7e92;
float:left;
}

.pagesLogo {
width:155px;
height:152px;
background-image:url(images/pages_Logo.gif);
background-repeat:no-repeat;
margin-left:-201px;
margin-top:372px;
float:left;
}

.pagesLogoPlaceholder {
width:155px;
height:152px;
margin-left:-201px;
margin-top:372px;
float:left;
}

.footerBox {
width:140px;
height:80px;
margin-left:-115px;
margin-top:530px;
float:left;
}

.copyrightBox {
width:600px;
margin-left:0px;
margin-top:40px;
float:left;
}

.copyrightBoxHome {
width:600px;
margin-left:0px;
margin-top:108px;
float:left;
}

.flashBoxHome {
margin-left:200px;
margin-top:-610px;
float:left;
}

.flashBox {
margin-left:200px;
margin-top:-1134px;
float:left;
}

.formBox {
width:600px;
height:600px;
margin-left:200px;
margin-top:-610px;
float:left;
border-left:solid thin #000000;
}

.BTNsubmit {
margin-left:13px;
margin-top:0px;
}

.requestsImageBox {
margin-left:599px;
margin-top:0px;
}

.formFieldsBox {
margin-left110px;
margin-top:-10px;
width:403px;
height:280px;
}

.formTextTop {
margin-left:11px;
margin-top:68px;
}

.formTextBottom {
margin-left:211px;
margin-top:-108px;
float:left;
}

/* TEXT STYLES */

.Text {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
letter-spacing:.2em;
line-height:25px;
}

.red {
color:#c10a0a;
}

a.textLink {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#1325eb;
text-decoration:none;
letter-spacing:.2em;
line-height:25px;
}
a.textLink:visited {
}
a.textLink:hover {
color:#5a7e92;
}

.deadLink {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#5a7e92;
text-decoration:none;
letter-spacing:.1em;
line-height:25px;
}

a.menuText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-decoration:none;
letter-spacing:.1em;
line-height:25px;
}
a.menuText:visited {
}
a.menuText:hover {
color:#5a7e92;
}

.formTextLabels {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
letter-spacing:.1em;
line-height:25px;
}

.formTextInput {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#5a7e92;
letter-spacing:.1em;
line-height:25px;
}

.footerText {
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:#000000;
text-decoration:none;
letter-spacing:.2em;
line-height:18px;
}

.copyrightText {
font-family:"Times New Roman", Times, serif;
font-size:9px;
color:#000000;
text-decoration:none;
letter-spacing:0em;
line-height:18px;
}

a.footerLink {
font-family:"Times New Roman", Times, serif;
font-size:10px;
color:#5a7e92;
text-decoration:none;
letter-spacing:0em;
}
a.footerLink:visited {
}
a.footerLink:hover {
color:#999999;
}