Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Internet Explorer Right-hand column is shifted down in IE, doesn't display alongside left-hand column.

    Hi All.

    There is some strange behaviour here where in Internet Explorer 7, the content of the right-hand column does not appear alongside the left hand column.

    This only renders in this way in IE, and is fine in Firefox.

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

    If anyone could shed any light on this, it would be greatly appreciated, cheers!


    jon

    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" 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="style/my_layout.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 7]>
    <link href="style/patch_my_layout.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
    <div id="wrapper"><img src="images/homepage/tj_head_left.gif" /><img src="images/homepage/tj_head_phr_h.jpg" /><img src="images/homepage/tj_head_right.gif" />
      <div id="page_margins">
        <div id="nav">
          
            <!-- main navigation: #nav_main -->
            <ul>
              <li id="current"><a href="#">Home</a>
              </li><img src="images/homepage/tj_nav_divider.gif" class="pipe" align="absmiddle" />
              <li><a href="#">Menu Item</a></li> <img src="images/homepage/tj_nav_divider.gif" class="pipe"  align="absmiddle"/>
              <li><a href="#">Menu Item</a></li><img src="images/homepage/tj_nav_divider.gif" class="pipe"  align="absmiddle"/>
              <li><a href="#">Menu Item</a></li><img src="images/homepage/tj_nav_divider.gif" class="pipe"  align="absmiddle"/>
              <li><a href="#">Menu Item</a></li><img src="images/homepage/tj_nav_divider.gif" class="pipe"  align="absmiddle"/>
              <li><a href="#">Menu Item</a></li>
            </ul>
    
        </div>
        <div id="main">
          <div id="col1">
            <div id="col1_content" class="clearfix">
              left col
            </div>
          </div>
          <div id="col3">
            <div id="col3_content" class="clearfix">
              <img src="images/homepage/tj_main_phr_h.jpg" />
            </div>
            <!-- IE Column Clearing -->
            <div id="ie_clearing"> &#160; </div>
          </div>
        </div>
        <div id="footer">Layout based on <a href="http://www.yaml.de/">YAML</a>
        </div>
      </div>
    </div>
    </body>
    </html>


    CSS code


    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: #f04aab url("../images/homepage/tj_bg_slice.jpg") repeat-x ; margin:0px  }
      ul {margin:0px; padding:0px}
    	#wrapper {margin:0 auto; width:1026px; background:url("../images/homepage/tj_bg_splat.jpg") repeat-x 0 175px;}
      /* Layout Alignment | Layout-Ausrichtung */
      #page_margins { margin: 0 auto; }
    
      /* Layout Properties | Layout-Eigenschaften */
      #page_margins { width: auto;  min-width: 941px; max-width: 941px; background: #fff; }
      #nav { overflow:hidden; height:31px; border-left:1px solid #FFF; border-right:1px solid #FFF}
      #nav_main {  }
      #main {  background: #663799 url(../images/homepage/tj_main_slice.jpg) repeat-x; min-height: 637px;border-left:1px solid #FFF; border-right:1px solid #FFF }
      #footer { padding: 10px 20px; color:#666; background: #f9f9f9; border-top: 5px #efefef solid; }
    
      /* (en) navigation: horizontal adjustment | (de) horizontale Ausrichtung  */
      #nav ul { margin-left: 20px; }
    
      /*-------------------------------------------------------------------------*/
    
      /**
       * (en) Formatting content container
       * (de) Formatierung der Inhalts-Container
       *
       */
    
      #col1 { float: left; width: 203px}
      #col2 { display:none}
      #col3 { width: auto; margin: 0 0 0 203px}
      #col1_content { margin:12px 0px 0px 12px;  background:#6e3fa1 url(../images/homepage/tj_slice_left.jpg) repeat-x;min-height:625px}
      #col3_content { padding: 0 20px 0 10px }
    	
      /*-------------------------------------------------------------------------*/
      
      /* nav */
      #nav {background: #663799 url(../images/homepage/tj_nav_slice.gif) repeat-x; text-align:center; }
      #nav li {display:inline}
      #nav ul {padding:4px 0px 0px;margin-left:-5px}
      #nav .pipe {padding:0px 28px 0px 30px}
      #nav ul a {color:#FFF; text-decoration:none;font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:smaller}
      #nav ul a:hover {text-decoration:none; text-decoration:underline}
     
     
     
      
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try adding display:inline; to your floated left column (to get rid of IE's 3px bug). BTW, there are some markup errors in your page. Fix them first.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by abduraooft View Post
    Try adding display:inline; to your floated left column (to get rid of IE's 3px bug). BTW, there are some markup errors in your page. Fix them first.
    The display:inline can fix the double margin bug, not the 3px jog. Both of the bugs are only in IE6-, not in IE7 in standards mode where the problem occures

    It seams more to be a width problem. We have a 941 width container. Inside #main with 2px as border. Then #col3 with 203px left margin and finally #col3_content with 30px padding:

    941-2-203-30=706px left for the content.

    tj_main_phr_h.jpg is 707px width, 1px too width. IE7 decides there is no room for it and put it down.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Candygirl, thanks for the correcting me.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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