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 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post

    column layout problem in IE6 only

    This works in firefox, safari, opera, IE7, etc. but i can't figure out why it is so screwed up in IE 6.

    Between the header and footer which seem okay, in the middle of the page I have
    Code:
    <div id="page">
       <div id="content">
       posts go here
       </div>
       <div id="sidebar">
       all my menus
       </div>
    </div>
    this is the style sheet info for those divs:

    Code:
    #page {
    	margin: 0px auto;
    	width: 720px;
    	background: url(images/bg.gif);
    }
    #content {
    	margin:0px;
    	overflow: hidden;	
    	padding-right:30px;
    	padding-top:20px;
    	height:auto;
    }
    #sidebar {
    	float: right;
    	width: 180px;
    	padding-left:15px;
    	padding-right:15px;
    	padding-top:10px;
    	height:auto;
    }
    I have tried setting a fixed width for #content that is smaller, but it seems to make no difference, and just makes it look less good in the other browsers.

    Page is currently here: http://queirdo.com with full code.
    Screenshot of the problem in ie6 here: http://queirdo.com/ie6.png

    If anyone can help or even point me in the right direction, I would greatly appreciate it!

  • #2
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Could be wrong, but it looks like it might be the ie6 float bug. Try adding the highlighted to your css:

    Code:
    #sidebar {
            display:inline;
    	float: right;
    	width: 180px;
    	padding-left:15px;
    	padding-right:15px;
    	padding-top:10px;
    	height:auto;
    }
    Let us know if that helps,

    Drew

    Edit-Welcome to the forum by the way
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Code:
    .post {
    	/*clear:both;*/
    	padding-top: 10px;
    	padding-bottom:0px;
    	margin-bottom:30px;
    	margin-left:15px;
    	margin-right:3px;
    }
    .post-title {
    	/*float: left;
    	width: 504px;*/
    }
    
    .entry {
    	/*clear: both;*/
    	margin-bottom:0px;
    	text-align:justify;
    }
    should work!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Nov 2008
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    Thanks for the suggestions... some success...

    Adding display:inline didn't do anything.

    Making the changes abduraooft suggested brought the post part of the page up to the top, but the sidebar menu is still shifted left instead of aligning to the right.

    Here's a screenshot now:

    http://queirdo.com/ie6-2.png

    Any ideas?

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    That's due to the left/right paddings/margins applied to the sidebar or it's inner elements.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Nov 2008
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post

    fixed problem

    To fix this, I changed width and padding values for everything inside that sidebar div, as well as the div itself, until it worked for IE6 (which apparently renders width and padding totally differently than other browsers just to make life more fun). This made other browsers look terrible of course, but then I used the html>body selector trick to send the right values to other browsers, correcting the width. IE 6 doesn't understand this, but IE 7 and all the other reasonable browsers do.

    Thanks for pointing me in the right direction.


  •  

    Tags for this Thread

    Posting Permissions

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