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 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts

    CSS Layout Issues (IE6 & 7 Only)

    Hi guys,

    I'm currently redesigning my personal site and have been playing around with a few layouts and I've settled on the one I want to keep.

    I'll provide links at the end of the post, but it's basically a fixed width layout, horizontally centred in the browser window and vertically extends 100% with a footer stuck to the bottom of the window permanently.

    It took me ages to get this working correctly (feedback and improvements welcome while you're here) but I'm having issues with IE6 and 7. IE7 displaces the content slightly off-centre to the right, and seems to be fixed in position when you change the size of the browser.

    Same issue with IE6, however the layout is far more off-centre to the right than it is in IE7. I'll gladly use conditional comments and alternate stylesheets to fix this, I just need desperate help identifying why it's doing this though.

    As a sidenote, it's been tested in Firefox 3.0.10, Opera 9.64, Chrome 2.0.172.30, Safari (Win) 3.2.3 and IE8 in resolutions 800x600, 1024x768 and 1280x1024 (higher resolutions will come when I get home tonight) and fully validates with W3C (CSS 2.1 and XHTML Transitional 1.0).

    You can see the page in question here: http://www.urban-butterfly.co.uk/dev/layout1.html and it's corresponding CSS file here: http://www.urban-butterfly.co.uk/dev/layout1.css

    Thanks in advance, much appreciated.
    Last edited by urbanbutterfly; 06-09-2009 at 10:03 AM. Reason: Resolved

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You can see the page in question here: http://www.urban-butterfly.co.uk/dev/layout1.html
    gives "406- not acceptable" error!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Try taking:

    Code:
    margin:0 auto;
    width:696px;
    off body in your css and applying those statements to #wrapper instead. Sorry, and change #wrapper to position:relative as well.
    Last edited by SB65; 06-08-2009 at 04:21 PM.

  • #4
    New Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    gives "406- not acceptable" error!
    Hi abduraooft, that's strange, it's fine my end. I'll post the HTML and CSS for you now.

    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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>100% Height Layout With Semi Fixed Footer</title>
    <!-- CSS -->
    <link href="layout1.css" rel="stylesheet" media="screen" title="Layout 1" />
    <!--[if IE 7]><link rel="stylesheet" href="layout1_ie7.css" media="screen" /><![endif]-->
    </head>
    
    <body>
      <div id="wrapper"><!-- container for the whole page -->
        <div id="header">Header</div><!-- end of header -->
        <div id="info_panel">Info Panel</div><!-- end of info panel -->
        <div id="main"><!-- container for the column mid-section -->
          <div id="content">
            <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
            <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
            <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
          </div><!-- end sidebar -->
          <div id="navigate">Navigate</div><!-- end content -->
          <div class="clear"></div> 
        </div><!-- end main -->
        <div id="footer">Footer</div>
      </div>
      <!-- end wrapper -->
    </body>
    </html>
    And the CSS:
    Code:
    /* Layout 1  */
    
    html, body, #wrapper {
        margin:0 auto;
        padding:0;
        width:696px;
        height:100%;
        min-height:100%;
    	text-align:center;
        }
    html>body, html>body #wrapper {
        height:auto;
        }
    div#wrapper {
        position:absolute;
        background:#eee;
        }
    * html #wrapper {
    	height:100%;
        }
    #header {
        position:relative;
        z-index:500;
        width:100%;
        height:118px;
        background:#FFFFCC  no-repeat;
        }
    #info_panel {
        width:100%;
        height:40px;
        background:#FFCCCC;
        }
    #content {
        width:503px;
        float:left;
        padding:0;
        background:#aaa;
        }
    #navigate {
        margin:0;
        padding:0;
        }
    .clear {
        clear:both;
        margin:0;
        padding:0;
        }
    #footer {
        clear:both;
        bottom:0;
        left:0;
        width:100%;
        height:46px;
        background:#888;
        color:#fef9ee;
        overflow:hidden;
        }
    #main {
        margin:0;
        padding:0;
        }
    /* \*/
    * html #footer {
        position:absolute;
        }
    * html #main {
        padding-bottom:100px;
        }
    /* \*/
    head:first-child+body div#footer {
        position:absolute;
        z-index:0;
        }
    head:first-child+body div#main {
        padding-bottom:0;
        }
    @ SB65: Thanks for that tip, shall try that and post any results.

  • #5
    New Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts
    @SB56: Thanks, that seems to have done the trick nicely in IE6 and 7 in regards to the alignment issues.

    However, there's a few small problems that seems to have arisen from this.

    Firstly, in IE6 after the content ends there seems to be a large gap between that DIV and the footer (screenshot provided).



    And also, strangely enough, in all browsers now apart from IE6, now no longer "sticks" the footer at the bottom of the page when there is short content and no scrollbars (pic below)



    Any ideas guys? @abduraooft, let me know if you need updated code posting if you still can't get on the link I originally provided.

  • #6
    Regular Coder Kristofa's Avatar
    Join Date
    Jun 2009
    Location
    Leicester
    Posts
    143
    Thanks
    7
    Thanked 20 Times in 20 Posts
    I think you need to add position:absolute for the "bottom:0;" to take effect, to solve the footer problem.

    Code:
    #footer {
        clear:both;
    position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:46px;
        background:#888;
        color:#fef9ee;
        overflow:hidden;
        }

  • #7
    New Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks for the reply Kristofa, unfortunately this has no effect :-( I'm really starting to get frustrated with this now :-( can't believe I've let myself get this out of touch with it all.

  • #8
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    Try this. It's pretty much standard and will give you a sticky footer and use the faux columns method:

    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">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>100% Height Layout With Semi Fixed Footer</title>
    <!-- CSS -->
    <link href="layout1.css" rel="stylesheet" media="screen" title="Layout 1" />
    </head>
    <body>
    <div id="wrapper">
      <!-- container for the whole page -->
      <div id="header">Header</div>
      <!-- end of header -->
      <div id="info_panel">Info Panel</div>
      <!-- end of info panel -->
      <div id="main">
        <!-- container for the column mid-section -->
        <div id="content">
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
          <p>Content</p>
        </div>
        <!-- end sidebar -->
        <div id="navigate">Navigate</div>
        <!-- end content -->
      </div>
      <!-- end main -->
      <div id="push"></div>
    </div>
    <!-- end wrapper -->
    <div id="footer">Footer</div>
    </body>
    </html>
    CSS:
    Code:
    html, body {
    	height: 100%;
    	text-align:center;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #wrapper {
    	width: 696px;
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -46px;
    	background:url(whole_bg.jpg) repeat-y;
    }
    #header {
    	width:100%;
    	height:118px;
    	background:#FFFFCC;
    }
    #info_panel {
    	width:100%;
    	height:40px;
    	background:#FFCCCC;
    }
    #content {
    	width:503px;
    	float:left;
    	background:#aaa;
    }
    #footer, #push {
    	clear:both;
    	width:696px;
    	height: 46px;
    	margin: 0 auto;
    	background: #888;
    	color:#fef9ee;
    }
    #push {
    	background:none;
    }
    To use the faux columns, you'll have to make a graphic that is 696px wide and 1 pixel tall. 503px of that will be the colour of your left column, and the remainder will be the colour of your navigation column. This gets repeated within the wrapper.

  • Users who have thanked Fisher for this post:

    urbanbutterfly (06-09-2009)

  • #9
    New Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Fisher, that's perfect. I need a slight design change in lieu of having one 696px wide background image, but I can deal with that.

    Only method I've seen that works perfect in all browsers and screen resolutions, with no extra hacks needed.

    Many thanks.


  •  

    Posting Permissions

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