Forum Moderators: not2easy
The top of the left navigation ("sidebar1") is supposed to align with the red section head, "EXECUTIVE FUNCTIONS." In IE7, it doesn't; it's too low. However, in Firefox 2, this alignment is fine ... but now the header elements are all scrunched together, as is the red section head and the headline, "Flexibility."
Any thoughts much appreciated.
<!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>Untitled Document</title>
<style type="text/css">
body {font: 100% Verdana, Arial, Helvetica, sans-serif; background: #666666; margin: 0; padding: 0; text-align: center; color: #000000;}
.thrColFixHdr #container {width: 930px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left;}
.thrColFixHdr #top_nav {background: #fff; margin: 0; padding: 0 10px 0 20px;}
.thrColFixHdr #header {background: #fff; padding: 0 10px 0 20px;}
.thrColFixHdr #top_divider {background: #6699FF; margin: 0; padding: 0 10px 0 20px;}
.thrColFixHdr #header h1 {margin: 0; padding: 10px 0;}
.thrColFixHdr #sidebar1 {float: left; width: 150px; background: #fff; padding: 15px 10px 15px 20px;}
.thrColFixHdr #sidebar2 {float: right; width: 160px; background: #EBEBEB; padding: 15px 10px 15px 20px;}
.thrColFixHdr #mainContent {margin: 0 200px; padding: 0 0 0 10px;}
.thrColFixHdr #footer {padding: 0 10px 0 20px;background:#DDDDDD;}
.thrColFixHdr #footer p {margin: 0; padding: 10px 0;}
.fltrt {float: right;margin-left: 8px}
.fltlft { float: left; margin-right: 8px;}
.clearfloat {clear:both; height:0; font-size: 1px; line-height: 0px;}
#nav {width: 160px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12.5px; font-weight: bold;}
#nav ul {margin: 0; padding: 0; list-style: none;}
#nav a {display: block; padding: 3px; width: 160px; background: #036; border-bottom: 1px solid #eee; text-decoration: none;}
#nav #active a {background: #036; color: #fff;}
#nav a:link, #nav a:visited {color: #eee;}
#nav a:hover {background: #369; color: #fff;}
p,li,internal_link {font-size: 12px;}
h5.head_nav {font-weight: lighter; margin:auto;}
h5.foot_nav {font-size: 10px; font-weight:normal; margin: 0; padding: 0;}
h5.right_nav_head {font-size: 10px;}
h5.right_nav_list {font-size: 10px; font-weight:normal;}
h5.sect_head {color: #c8225c; font-weight:bold; font-variant:small-caps; margin:auto;}
h3.headline {font-size: 18px; color: #1a0f82; font-weight: bold; margin:auto;}
internal_link a:link {color: #000000; text-decoration: underline; background: none;}
internal_link a:visited {color: #000000; text-decoration: none; background: none;}
internal_link a:hover {color: #000000; text-decoration: none; background: #6699ff;}
internal_link a:active {color: #000000; text-decoration: none; background: none;}
head_nav a:link {color: #000000; text-decoration: none; background: none;}
head_nav a:visited {color: #000000; text-decoration: none; background: none;}
head_nav a:hover {color: #000000; text-decoration: underline; background: none;}
head_nav a:active {color: #000000; text-decoration: none; background: none;}
foot_nav a:link {color: #000000; text-decoration: none; background: none;}
foot_nav a:visited {color: #000000; text-decoration: none; background: none;}
foot_nav a:hover {color: #000000; text-decoration: underline; background: none;}
foot_nav a:active {color: #000000; text-decoration: none; background: none;}
a:link {color: #000000; text-decoration: underline; background: none;}
a:visited {color: #000000; text-decoration: underline; background: none;}
a:hover {color: #000000; text-decoration: none; background: none;}
a:active {color: #000000; text-decoration: none; background: none;}
-->
</style><!--[if IE 5]>
<style type="text/css">
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
</style>
<![endif]-->
</head>
<body class="thrColFixHdr">
<div id="container">
<div id="top_nav">
<!-- end #top_nav -->
<h5 class="head_nav">
bookmark page ¦ email page ¦ print page ¦ <a href="../rss.html">rss</a> ¦ <a href="../site_map.html">site map</a> ¦ <a href="../mobile.html">mobile</a> ¦ <a href="../forum.html">forum</a> ¦ <a href="../blog.html">blog</a> </h5>
</div>
<div id="header">
<img src="../media/graphics/lwfk_logotype_3.png" alt="" width="286" height="80" />
<!-- end #header --></div>
<div id="top_divider">
<!-- end #top_divider --></div>
<div id="sidebar1">
<div id="nav">
<ul>
<li><a href="../executive.html">Executive Functions</a></li>
<li><a href="../digital.html">Digital Technologies & Learning</a></li>
<li><a href="../engamement.html">Engamement</a></li>
<li><a href="../alternative.html">Alternative Learners</a></li>
<li><a href="../resources.html">Resources</a></li>
<li><a href="../research.html">Research</a></li>
<li><a href="#"> </a></li>
<li><a href="../parents.html">Parents</a></li>
<li><a href="../teachers.html">Teachers</a></li>
<li><a href="../kids.html">Kids</a></li>
<li><a href="#"> </a></li>
<li><a href="#">Home</a></li>
<li><a href="../blog.html">Blog</a></li>
<li><a href="../forum.html">Forum</a></li>
<li><a href="../newsletter.html">Newsletter</a></li>
<li><a href="../about.html">About</a></li>
<li><a href="../contact.html">Contact</a></li>
<li><a href="#"> </a></li>
</ul>
</div>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h5 class="sect_head">EXECUTIVE FUNCTIONS RESOURCES</h5>
<h5 class="right_nav_head">EXECUTIVE FUNCTIONS</h5>
<h5 class="right_nav_list">Task Initiation <br />
Sustained Attention <br />
Planning <br />
Working Memory <br />
Organization <br />
Flexibility<br />
Response Inhibition <br />
Regulation of Affect <br />
Time Management<br />
Metacognition <br />
Social Awareness</h5>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id="mainContent"><br />
<h5 class="sect_head">EXECUTIVE FUNCTIONS</h5>
<h3 class="headline">Flexibility</h3>
<p>Flexibility involves the capacity to improvise, shift approaches, and be adaptable to the demands of a situation. Developing novel strategies and shifting attention from one task to another is often necessary. Recognition of the need to utilize different problem-solving strategies, including reflective, careful approaches or a trial-and-error/random approach is seen in flexibility.</p>
<p>Flexibility is often utilized in social situations and in dealing with peers. It is an important part of a child's ability to transition between activities. It helps individuals to deal with disappointments and shifting expectations. It helps children deal with unexpected events and changes in routines.</p>
<p><strong>Skillful </strong>application of flexibility is seen in children who:</p>
<ul type="disc">
<li>Are able to think on their feet and adapt readily to new situations.</li>
<li>Do well with transitions such as leaving game play to sit down at dinnertime.</li>
<li>Are able to wait their turn so a younger child can have a first opportunity to do something.</li>
<li>Recognize that they may need to practice something rather than be able to learn it after the first attempt.</li>
<li>Are able to deal with disappointment when losing a game or when expectations change suddenly.</li>
<li>Are able to view situations from another’s perspective.</li>
</ul>
<p><strong>Unskilled </strong>use of flexibility is seen in children who:</p>
<ul type="disc">
<li>Experience significant problems with changes, transitions, and new situations.</li>
<li>Get stuck by utilizing the same ineffective strategies of problem solving that did not work for them in the past.</li>
<li>Become insistent and indignant in situations inappropriately.</li>
<li>Become angry when given feedback that they are wrong.</li>
<li>Have difficulty in understanding the differing expectations of parents and teachers.</li>
<li>Continue to be "stuck" or think about something that was said to them in the past.</li>
<li>Cannot change plans readily.</li>
</ul>
<p>
<!-- end #mainContent -->
</p>
</div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer"><br />
<h5 class="foot_nav"><a href="../executive.html">Executive Functions</a> ¦ <a href="../digital.html">Digital Technologies & Learning</a> ¦ <a href="../engamement.html">Engamement</a> ¦ <a href="../alternative.html">Alternative Learners</a> ¦ <a href="../resources.html">Resources</a> ¦ <a href="../research.html">Research</a> ¦ <a href="../parents.html">Parents</a> ¦ <a href="../teachers.html">Teachers</a> ¦ <a href="../kids.html">Kids</a> <br />
Home ¦ <a href="../blog.html">Blog</a> ¦ <a href="../forum.html">Forum</a> ¦ <a href="../newsletter.html">Newsletter</a> ¦ <a href="../about.html">About</a> ¦ <a href="../contact.html">Contact</a> ¦ Bookmark Page ¦ Email Page ¦ Print Page ¦ <a href="../rss.html">RSS</a> ¦ <a href="../site_map.html">Site Map</a> ¦ <a href="../mobile.html">Mobile</a> <br />
<br />
(c) 2007 LearningWorks for Kids. All rights reserved worldwide.<br />
<br />
<br />
<!-- end #footer -->
</h5>
</div>
<!-- end #container --></div>
</body>
</html>
I had a quick look and my initial impression is that the problem is likely to be due to the padding or margins of #sidebar1, #nav, h5.sect_head or #main_content
However, that's a lot of code you posted! It might be worth simplifying the HTML/CSS to as little code as possible while still showing the issue. That makes it easier to identify what's going wrong, and you're likely to get some more definite replies more quickly :)
