0 Replies Latest reply on Feb 19, 2010 4:12 PM by dridgway

    Newbie CSS Help (IE-related position problem)

    dridgway

      I've spent a good amount of time scouring the web for an answer that I can apply but haven't had any luck. Essentially, the problem is that the left column (sidebar1) doesn't 'top-align' with the 'maincontent'. The link to the test site is: http://dougridgway.com/temp_adobe/ — the CSS is below.

       

      The site looks good in Safari:

       

      Thanks in advance for any feedback/help!

       

       

      @charset "UTF-8";

      body  {

      font: 100% Verdana, Arial, Helvetica, sans-serif;

      background: #666666;

      margin: 0 0 0 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */

      padding: 0;

      text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

      color: #000000;

      }

      .twoColFixLtHdr #container {

      width: 965px; /* this overrides the text-align: center on the body element. */

      vertical-align: top;

      margin: 0 0 0 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */

      background: transparent;

      height: auto;

      margin: auto;

      }

      .twoColFixLtHdr #header {

      background: transparent;

      padding: 0 0 0 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */

      height: 85px;

      }

      .twoColFixLtHdr #header h1 {

      margin: 0 0 0 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */

      height: 110px;

      background: transparent;

      background-color: transparent;

      }

      .twoColFixLtHdr #sidebar1 {

      background: transparent;

      height: 800px;

      font-family: Georgia, "Times New Roman", Times, serif;

      float: left;

      width: 169px;

      position: static;

      margin: 0 0 0 0;

      }

      .twoColFixLtHdr #mainContent {

      float: left;

      height: 800px;

      width: 796px;

      background-color: #fff;

      text-align: left;

      position: static;

      margin: 0 0 0 0;

      }

      .twoColFixLtHdr #footer {

      background:transparent;

      width: 965px;

      text-align: center;

      }

      .twoColFixLtHdr #footer p {

      margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */

      padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */

      }

      .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

      float: right;

      margin-left: 8px;

      }

      .fltlft { /* this class can be used to float an element left in your page */

      float: left;

      margin-right: 8px;

      }

      .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */

      clear:both;

      height:0;

      font-size: 1px;

      line-height: 0px;

      width: 965px;

      }