SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 content missing on div

    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:
    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> &gt; <a href="default.asp" class="white">Organization</a> &gt; <a href="pe.asp" class="white">Plant Engineering (PE)</a> &gt; <a href="tpo.asp" class="white">Branch Office (TPO)</a> &gt; 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:
    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.
    Attached Images Attached Images

  2. #2
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This page had other header, footer, and navigation items. I have removed them for this sample. The CSS is long and includes code for the entire website.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Looks like classic "haslayout" behaviour (see css faq). First thing to try is to place haslayout on the main container.

    e.g.
    Code:
    #maincontent{zoom:1.0}
    If that doesn't solve the problem then post back and I'll take a proper look

  4. #4
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I added "zoom:1.0;" to both the "maincontent" and the "rightColBtm" divs and this has fixed the problem.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •