Results 1 to 3 of 3

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

  1. #1
    Join Date
    Apr 2006

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

    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



    <!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">
    <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" />
    <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 style="float: left;">
                	<img align="absmiddle" src="images/tb2_topnav_left.gif" />
                <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>  
              <img src="images/tb2_main_h.jpg" />
              <div id="content_tabs">
              	<div id="cloud_titlehead">
                	ul of titles go here
          <div id="col3">
            <div id="col3_content" class="clearfix">
           <img src="images/tb2_phr_bigwinners_h.jpg" />
            <!-- IE Column Clearing -->
            <div id="ie_clearing">   </div>
        <div id="footer">Layout based on <a href="http://www.yaml.de/">YAML</a>
    Relevant CSS

    @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}

  2. #2
    Join Date
    Mar 2006
    Newcastle NSW Australia
    This is due to IE6's 3px jog bug between floated and non-floated elements and their content. Add :
    * html #col1 {margin-right: -3px;}
    * html #col3 {margin-left: 747px;}

  3. #3
    Join Date
    Apr 2006
    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


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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