Hello. I have couple pages where the content does not load up in IE7. If the browser window is re-sized or some other action is triggered, then then content shows up. Can someone help…thank you.
Here is the HTML Code:
<!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>:: Technical Services Department ::</title>
<link href="../css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div id="rightCol2">
<div id="rightColBox">
<div id="rightColTop"><a href="../default.asp" class="white">Home</a> > <a href="default.asp" class="white">Organization</a> > <a href="pe.asp" class="white">Plant Engineering (PE)</a> > <a href="tpo.asp" class="white">Branch Office (TPO)</a> > Project Management Office (PMO)</div>
<div id="rightColBtm">
<h3>Project Management Office (PMO, TPO-1)</h3>
<h4>ABOUT US</h4>
<div style="width:200px; background-color:#FFF; float:right; margin:0 0 10px 10px; padding:3px; border:1px solid #999;"><img src="images/pmo01.jpg" alt="" width="200" height="388" /></div>
<div style="width:430px;">
<p>The Plant Engineering Project Management Office (PMO) plans, schedules, monitors, measures and actively manages significant construction and renewal projects. Significant projects are defined to be those with a large dollar value, high complexity factor and/or high visibility.<br />
<br />
Scalable management processes are used so that the wide range of small to very large projects are appropriately managed.<br />
<br />
See the PMO's <a href="test.asp" target="_blank">current list of projects and contacts</a>.<br />
<br />
The PMO is implemented as the TPO-1 Section.<br />
<br />
See our organization in the <a href="test.asp">Staff Directory</a>.</p>
<br />
<h5>SUPERVISOR</h5>
<p>Please provide your comments and suggestions to the Project Management Office (PMO) TPO-1 Section Supervisor, <a href="mailto:test">John Doe</a>, on ext. xxxx. </p>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
Here is the CSS Code:
@charset "UTF-8";
/* CSS Document */
body {
margin:0;
padding:0;
background-color:#232C4C;
}
.container {
background-color:#FFF;
width:960px;
margin:0;
padding:0;
}
.container #maincontent{
margin-left:.5em;
margin-right:.5em;
}
.container #maincontent p, table, ul, ol{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.container #maincontent h1{
padding:0;
margin:10px 3px;
color: #1842B0;
font-size:22px;
font-family: Arial, Helvetica, sans-serif;
}
.container #maincontent h2{
padding:0;
margin:10px 3px;
color: #1842B0;
font-size:20px;
font-family: Arial, Helvetica, sans-serif;
}
.container #maincontent h3, h4{
padding:0;
margin:10px 3px;
color: #1842B0;
font-size:18px;
font-family: Arial, Helvetica, sans-serif;
}
.redstar {
color: #FF0000;
}
.forminput {
display: none;
background-color: #ffffff;
border: thin none #003399;
padding: 5px 10px 5px 5px;
}
.forminput1 {
display: block;
background-color: #ffffff;
border: thin none #003399;
padding: 5px 10px 5px 5px;
}
.container #header {
width:960px;
height:100px;
margin:0;
padding:0;
background:#374F79 url(../images/header_img.jpg) no-repeat;
}
.container #header p {
float:right;
color:#C1E2FF;
padding:0;
margin:4px 8px;
}
.container #header p a:link, .container #header p a:visited {
color:#C1E2FF;
font: normal 11px Arial, Helvetica, sans-serif;
text-decoration:none;
}
.container #header form {
float:right;
width:234px;
color:#FFF;
font: normal 11px Arial, Helvetica, sans-serif;
padding:0;
margin:34px 4px 0 0;
display:inline-block;
padding-right:0;
}
.container #header a:link, .container #header a:visited {
color:#B0B0B0;
font: bold 11px Arial, Helvetica, sans-serif;
text-decoration:none;
}
.container #header a:hover, .container #header p a:hover {
color:#FFF;
}
.container #topNav {
background:#21324C url(../images/main_nav_bg.jpg) repeat-x;
height:30px;
z-index:9999;
}
.container #leftCol {
float:left;
width:271px;
margin:7px;
}
.container #leftNav {
float:left;
width:251px;
margin:7px;
}
.container #leftColBox, .container #leftNavBox {
border:1px solid #3D6098;
background-color:#FBF1E5;
}
.container #leftColTop {
background:#38465C url(../images/main_title_bg.jpg) top left no-repeat;
height: 18px;
padding:4px 13px;
color:#FFCC89;
font: normal 13px Arial, Helvetica, sans-serif;
}
.container #leftColTop2 {
background:#38465C url(../images/main_title_bg3.jpg) top left no-repeat;
height: 18px;
padding:4px 13px;
color:#FFCC89;
font: normal 13px Arial, Helvetica, sans-serif;
}
.container #leftCol p {
padding:1em;
margin:0;
overflow:auto;
height:320px;
font: normal 12px Arial, Helvetica, sans-serif;
}
.container #leftColTitle {
width:225px;
background-color:#AEC4F5;
margin:0 0 8px 0;
padding:0 12px;
font: bold 12px Arial, Helvetica, sans-serif;
border-bottom:2px solid #FBF1E5;
}
.container #leftColTitle p {
margin:0;
padding:4px 0;
}
.container #leftColTitle a {
color:#333;
text-decoration:none;
}
.container #leftColTitle a:hover {
color:#688BB1;
text-decoration:none;
}
.container #leftCol a {
color:#374F79;
}
.container #leftCol a:hover {
text-decoration:none;
}
.container #spectrum
{
float:left;
display: block;
width: 271px;
height: 38px;
background: url("../images/spectrum_btn.jpg") no-repeat 0 0;
}
.container #services
{
float:left;
display: block;
width: 271px;
height: 38px;
background: url("../images/services_btn.jpg") no-repeat 0 0;
}
.container #staff
{
float:left;
display: block;
width: 271px;
height: 38px;
background: url("../images/staff_btn.jpg") no-repeat 0 0;
}
.container #strategic
{
float:left;
display: block;
width: 271px;
height: 38px;
background: url("../images/strategic_btn.jpg") no-repeat 0 0;
}
.container #spectrum:hover, .container #services:hover, .container #staff:hover, .container #strategic:hover
{
background-position: 0 -38px;
}
.container #spectrum span, .container #services span, .container #staff span, .container #strategic span
{
display: none;
}
.container #rightCol {
float:right;
margin:5px 9px 10px 0;
width: 660px;
z-index:1;
padding: 0;
}
.container #rightCol h4 {
margin:0.5em 1em;
font-size:15px;
color:#333;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.container #rightCol p {
line-height: 1.3em;
margin:0 0.75em;
}
.container #rightCol2 {
float:right;
margin:5px 9px 10px 0;
width: 680px;
z-index:1;
padding: 0;
}
.container #rightCol2 ul {
line-height: 1.4em;
}
.container #rightColBox, .container #rightColBox2 {
border:1px solid #3D6098;
background-color:#FBF1E5;
}
.container #rightColTop, .container #rightColTop2 {
background:#38465C url(../images/main_title_bg2.jpg) top left no-repeat;
height: 18px;
padding:4px 13px;
color:#FFF;
font: normal 11px Arial, Helvetica, sans-serif;
}
.container #rightColTop a.white, .container #rightColTop2 a.white {
color:#FFF;
}
.container #rightColTop a.white:hover, .container #rightColTop2 a.white:hover {
text-decoration:none;
}
.container #rightColBtm, .container #rightColBtm2 {
padding:1em;
margin:0;
font: normal 13px Arial, Helvetica, sans-serif;
}
.container #rightColBtm p {
margin:0.5em 1.25em;
line-height:1.4em;
}
.container #rightColBtm h4 {
margin:1em 1em;
font-size:16px;
color:#333;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.container #rightColBtm h5 {
margin:0.5em 1.5em;
font-size:14px;
color:#1842B0;
font-family:Arial, Helvetica, sans-serif;
}
.container #rightColBtm blockquote {
line-height: 1.5em;
margin:10px 40px;
}
.container #rightColBtm ul, .container #rightColBtm ol {
line-height: 1.3em;
margin:0 1em 1em 0;
padding-left:3em;
}
.container #rightColBtm ul li, .container #rightColBtm ol li {
margin-top:5px;
}
.container #rightColBtm ol li ol {
line-height: 1.4em;
margin:0 1em 1em 0.5em;
list-style: lower-alpha;
}
.container #rightColBtm ol li ol li ol {
line-height: 1.4em;
margin:0 1em 1em 0.5em;
list-style:lower-roman;
}
.container #rightColBtm img.border {
padding:3px;
border:1px solid #aaa;
}
.container #rightCol a, .container #rightCol2 a {
color:#374F79;
}
.container #rightCol a:hover, .container #rightCol2 a:hover {
text-decoration:none;
}
.container #rightCol h3, .container #rightCol2 h3 {
padding:0;
margin:10px 3px;
color: #1842B0;
font-size:20px;
font-family: Arial, Helvetica, sans-serif;
}
.container #rightCol p, .container #rightCol2 p {
padding: 0 0.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
.container #rightCol blockquote {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height:20px;
margin:0;
padding:6px 0 13px 26px;
}
.container #rightCol a, .container #rightCol2 a {
color:#374F79;
}
.container #footer {
width:960px;
height:30px;
background:#374F79;
}
.container #footer p {
color:#FFF;
margin:9px 12px;
font: normal 11px Arial, Helvetica, sans-serif;
}
.container #footer a {
color:#FFF;
font-weight:bold;
}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 660px;
z-index:0;
}
ul.tabs li {
float: left;
font:bold 13px Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #efefef;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
display: block;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #FBF1E5;
border-bottom: 1px solid #FBF1E5;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background-color:#FBF1E5;
}
.tab_content {
padding: 20px;
}
.tab_content ul {
font-weight: normal;
font-size: 13px;
font-family:Arial, Helvetica, sans-serif;
margin-top:0;
padding-bottom:12px;
padding-top:0;
line-height:1.5em;
}
.tab_content ul a, .tab_content a {
font-weight: bold;
color: #254588;
}
.tab_content ul a:hover, .tab_content a:hover {
font-weight: bold;
text-decoration:none;
}
h2.trigger {
padding: 5px 0 0 25px;
margin: 0;
background:#FBF1E5 url(../images/h2_trigger_a.gif) no-repeat;
height: 18px;
line-height: 23px;
width: 224px;
font:bold 12px Arial, Helvetica, sans-serif;
float: left;
}
h2.trigger a {
color: #333;
text-decoration: none;
display: block;
}
h2.trigger a:hover {
color: #688BB1;
}
h2.trigger2 {
background-color:#FBF1E5;
padding: 5px 4px 0 25px;
margin: 0;
width: 220px;
font:bold 12px Arial, Helvetica, sans-serif;
float: left;
}
h2.trigger2 a {
color: #333;
text-decoration: none;
display: block;
}
h2.trigger2 a:hover {
color: #688BB1;
}
h2.active {background-position: left bottom;}
.toggle_container {
margin: 0 0 5px;
padding: 0;
overflow: hidden;
font-size: 13px;
width: 240px;
clear: both;
}
.toggle_container .block {
padding:0 30px;
}
.toggle_container .block ul {
padding: 5px 0;
margin: 5px 0;
list-style:none;
}
.toggle_container .block ul li {
font:bold 12px/15px Arial, Helvetica, sans-serif;
padding:2px;
}
.toggle_container .block ul li a {
color: #333;
text-decoration: none;
}
.toggle_container .block ul li a:hover {
color:#688BB1;
text-decoration: none;
}
/* Top nav */
#nav {
margin:0;
padding:0;
list-style:none;
font:bold 12px Arial, Helvetica, sans-serif
}
/* make the LI display inline */
/* it's position relative so that position absolute */
/* can be used in submenu */
#nav li {
float:left;
display:block;
background:#ccc;
position:relative;
z-index:500;
margin:0 1px;
}
/* this is the parent menu */
#nav li a {
display:block;
padding:8px 13px 0 13px;
font-weight:700;
height:23px;
text-decoration:none;
color:#fff;
text-align:center;
color:#333;
}
#nav li a:hover {
color:#fff;
}
/* you can make a different style for default selected value */
#nav a.selected {
color:#f00;
}
/* submenu, it's hidden by default */
#nav ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
#nav ul li {
float:left;
width:200px;
border-top:1px solid #fff;
}
/* display block will make the link fill the whole area of LI */
#nav ul a {
display:block;
height:15px;
padding: 8px 5px;
color:#666;
}
#nav ul a:hover {
text-decoration:none;
background-color:#F00;
}
/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
margin:0 0 0 -2px;
}
#navigation, #navigation2, #navigation3 {
margin:10px;
padding:0;
text-indent:0px;
font:bold 12px Arial, Helvetica, sans-serif;
}
#navigation a.head, #navigation2 a.head, #navigation3 a.head {
cursor:pointer;
background:url(../images/collapsed.gif) no-repeat scroll 1px 4px;
color:#333;
display:block;
font-weight:bold;
margin:0px;
padding:3px 0 3px 14px;
text-decoration: none;
}
#navigation a.nohead, #navigation2 a.nohead, #navigation3 a.nohead {
cursor:pointer;
color:#333;
display:block;
font-weight:bold;
margin:0px;
padding:3px 0 3px 14px;
text-decoration: none;
}
#navigation a.head:hover, #navigation2 a.head:hover, #navigation3 a.head:hover, #navigation a.nohead:hover, #navigation2 a.nohead:hover, #navigation3 a.nohead:hover {
color: #688BB1;
}
#navigation a.selected, #navigation2 a.selected, #navigation3 a.selected {
background-image: url(../images/expanded.gif);
}
/*#navigation a.current, #navigation2 a.current, #navigation3 a.current {
background-color:#FFFF99;
}*/
#navigation ul, #navigation2 ul, #navigation3 ul {
border-width:0px;
margin:10px 25px;
padding:0px;
text-indent:0px;
}
#navigation li, #navigation2 li, #navigation3 li {
list-style:none outside none; display:inline;
line-height:1.2em;
padding-top: 10px;
}
#navigation li li a, #navigation2 li li a, #navigation3 li li a {
color:#374F79;
display:block;
text-indent:0;
text-decoration: none;
padding:2px 0;
}
#navigation li li a:hover, #navigation2 li li a:hover, #navigation3 li li a:hover {
color: #688BB1;
}
/*Staff Tools
------------------------------------*/
.st_heading {
font-size: 24px;
font-weight: bold;
color: #1842AE;
/*color: #5672C5;*/
padding: 0px;
margin-right: .1em;
margin-left: .1em;
margin-bottom: .1em;
margin-top: .5em;
}
.st_headingold {
font-size: 16px;
font-weight: bold;
font-style: italic;
color: #1842AE;
padding: 0px;
margin-right: 1em;
margin-left: .5em;
margin-bottom: 0;
margin-top: 0;
}
.st_nav {
font-size: 10px;
color: #1842AE;
padding: 0px;
margin-bottom: 0;
margin-top: 0;
}
.st_signin {
font-size: 12px;
color: #000000;
padding: 0px;
margin-bottom: 0;
margin-top: 0;
margin-left: 0;
}
p.st_head {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
padding: 0px;
margin-right: 0.1em;
margin-left: .1 em;
margin-bottom: 0.1em;
margin-top: 0;
font-weight: bold;
}
p.st_row {
padding: 0px;
margin-right: 0;
margin-left: .5em;
margin-bottom: .2em;
margin-top: 0;
}
a.st_noline , a:visited.st_noline, a:hover.st_noline {
text-decoration: none;
border-bottom: none;
}
p.st_basic_noline {
padding: 0px;
margin-right: .5em;
margin-left: 1.5em;
margin-bottom: .5em;
margin-top: 0;
text-decoration: none;
border-bottom: none;
}
p.st_error {
padding: 0px;
color: #FF0000;
margin-right: .5em;
margin-left: 1.5em;
margin-bottom: .5em;
margin-top: 0;
text-decoration: none;
border-bottom: none;
}
.centercontent {
padding: 0px;
margin-right: .5em;
margin-left: 1.5em;
margin-bottom: .5em;
margin-top: .6em;
}
Attached are images that show the header missing when the page is loaded in IE 7 and the second image when some action is triggered or when the window is re-sized to display the header.
Thank you.
