IE6 height issue: element aligns to the bottom of the container

**jwhittlestone** · 06-18-2008 09:46 AM

Hi All,

With http://www.barbaryonline.com/jw/mirror_rss/help.php

A strange phenomenon seems to be occuring in IE6 only (renders fine in FF2 and IE7) in that the turquoise box "sidebar" seems to be shifting down between the #main and #footer.

The css validates correctly.

Does anyone know why this is happening? It's really baffling me!

I include the html and css below.

Thanks in advance

jon

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" xml:lang="en" lang="en">
<head>
<title>Your Page Title</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<!-- add your meta tags here -->

<link href="css/my_layout.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="css/patches/patch_my_layout.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="header"><div id="header_content"><img src="images/tb2_logo_h.gif" alt=""/><img src="images/tb2_tv_h.gif" alt="As seen on TV" style="margin-left:316px"/><img src="images/tb2_phr_login_h.jpg" style="margin:0 0 30px 30px" /></div></div>
  <div id="page_margins">
  
    <!-- start: skip link navigation -->
    <a class="skip" title="skip link" href="#navigation">Skip to the navigation</a>
    <a class="skip" title="skip link" href="#content">Skip to the content</a>
    <!-- end: skip link navigation -->
    
    <div id="main">
      <div id="col1">
        <div id="col1_content" class="clearfix">
          <div id="topnav">
          	<div style="float: right;">
            	<img align="absmiddle" src="images/tb2_topnav_right.gif" />
            </div>
            <div style="float: left;">
            	<img align="absmiddle" src="images/tb2_topnav_left.gif" />
            </div>
            <ul class="mainmenu">
            	<li><a href="">nav item</a></li>
                <li><a href="">nav item</a></li>
                <li><a href="">nav item</a></li>
                <li><a href="">nav item</a></li>
                <li><a href="">nav item</a></li>  
            </ul>
          </div>
          <img src="images/tb2_main_h.jpg" />
          
          <div id="content_tabs">
          	<div id="cloud_titlehead">
            	ul of titles go here
            </div>
          </div>
        </div>
      </div>
      <div id="col3">
        <div id="col3_content" class="clearfix">
       <img src="images/tb2_phr_bigwinners_h.jpg" />
        </div>
        <!-- IE Column Clearing -->
        <div id="ie_clearing">   </div>
      </div>
    </div>
    <div id="footer">Layout based on <a href="http://www.yaml.de/">YAML</a>
    </div>
  </div>
</body>
</html>

Relevant CSS

Code:

@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) stylesheet for screen layout
 * (de) Stylesheet für das Bildschirm-Layout
 *
 * @creator     YAML Builder V1.0.1 (http://builder.yaml.de)
 * @file        basemod.css
 */

@media screen, projection
{
  /*-------------------------------------------------------------------------*/

  /* (en) Marginal areas & page background */
  /* (de) Randbereiche & Seitenhintergrund */
  body { background: #ffefcc url("../images/tb2_bg.jpg") repeat-x top left fixed; margin:0px }

  /* Layout Alignment | Layout-Ausrichtung */
  #page_margins { margin: 0 auto; }

  /* Layout Properties | Layout-Eigenschaften */
  #page_margins { width: 930px;  min-width: inherit; max-width: none;  }
  #header { background: #ffefcc url("../images/tb2_head_bg.jpg") repeat-x;  height:170px; margin:0 auto; }
  #header_content {width:930px; margin: 0 auto;}
  #main {  }
  #footer { padding: 10px 20px; color:#666; background: #f9f9f9; border-top: 5px #efefef solid; }
  /*-------------------------------------------------------------------------*/

  /**
   * (en) Formatting content container
   * (de) Formatierung der Inhalts-Container
   *
   */

  #col1 { float: left; width: 750px}
  #col2 { display:none}
  #col3 { width: auto; margin: 0 0 0 750px}
  #col1_content {  }
  #col3_content {  }
	
  /*-------------------------------------------------------------------------*/
  
  /* main navs */
  #topnav {background:url(../images/tb2_topnav_slice.gif) repeat-x; height:31px; width:735px}
  ul.mainmenu {margin:0px}
  ul.mainmenu li {display:inline}
  
  /* content tabs under main homepage graphic */
  #content_tabs {width:735px}
  #cloud_titlehead {height:71px;background:url(../images/tb2_contenttab_top.gif) no-repeat;}
  
}
@media screen
{
.skip {display:none}
}

**Centauri** · 06-18-2008 10:50 AM

This is due to IE6's 3px jog bug between floated and non-floated elements and their content. Add :

Code:

* html #col1 {margin-right: -3px;}
* html #col3 {margin-left: 747px;}

**jwhittlestone** · 06-19-2008 03:21 AM

oh brilliant, thanks a lot centauri. And thanks for letting me know what the bug is, always helpful so i can learn for the future

cheers!
j

Thread: IE6 height issue: element aligns to the bottom of the container

Thread Tools

Display

IE6 height issue: element aligns to the bottom of the container

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions