SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Another IE6 issue

    I found a 3 column layout which is content first and i wanted to make it centered with a fixed width. That wasn't the problem but what happens is the position of the footer.

    The footer in FF and IE7 is not at the bottom of the screen underneath the left and right column and in IE6 is near the top.

    I added min-height: 100% and height: auto to the wrapper and it seemed to work for FF and IE7 but not IE6.

    Also the 2 columns don't have full color in them in IE6.

    Is there a way of fixing these issues? http://www.jackgodfrey.org.uk/adam/jack/links.php

    Here is the layout.css
    Code CSS:
    * {margin:0; padding:0;}
     
    html, body {
    	margin: 0; 
    	padding: 0;
    	height: 100%;
    	font-family: helvetica, verdana, arial, sans-serif;
    	font-size: 100%;
    	text-align: center;
    }
     
    #wrapper {
    	position: relative;
    	width: 990px;
    	min-width: 600px; /* to allow room for images and long words */
    	margin: 0 auto;
    	border: 1px solid black;
    	background: #fff; /* light grey */
    	min-height: 80%;
    	text-align: left;
    }
     
    #header, #footer {
    	position: relative;
    	width: 990px;
    	min-width: 600px; /* to match wrapper div */
    	margin: 0 auto;
    	border: 1px solid #000;
    }
     
    #footer {
    	height: 50px;
    	background: #ffc url(../images/layout/footerbar.gif) repeat-x; /* pale yellow */
    }
     
    #header {
    	height:30px;
    	background: #ffc url(../images/layout/bar.gif) repeat-x; /* pale yellow */
    }
     
    #left, #right {
    	position: absolute;
    	top: 0;
    	bottom: 0; /* Opera needs this! Moz would automatically assume this as default*/
    	border-width: 0px; /* widths below */
    	border-style: solid;
    	border-color: #777;
    	padding: 5px;
    }
     
    #left {
    	left: 0; 
    	width: 200px; 
    	background: #3379d9; 
    	border-right-width: 2px;
    }
     
    #right {
    	right: 0; 
    	width: 200px; 
    	background: #3379d9; 
    	border-left-width: 2px;
    }
     
    /* bringing the center content into position (clear the sides)
       using a wrapper div to avoid possible IE Box Model issues
    	 would also allow for extra background styling if required
    */
     
    #contentwrap {
    	position: relative; 
    	padding: 0 210px 0 210px;
    }
     
    #content {
    	position: relative;  /* to enable further positioned divs inside content area */
    	z-index: 100; /* to make sure if long words overflow they show above the right column */ 
    	border-left: 1px solid #000;
    	border-right: 1px solid #000;
    	background: #fff;
    	padding: 0px 0 19px 0;
    	margin: 0;
    }
     
    /***** General formatting ****/
     /* tanfa logo/link */
    #pagetop {
    	margin:0 auto;
    	width: 990px;
    	height: 200px;
    	border: 1px solid #000;
    }
     
    #logos {
       width: 200px;
       position: absolute;
       top: 10px;
       left: 0;
    }
     
    #logos img {
       border: none;
       padding-right: 5px;
    }
     
     
    #copy {
       width: 585px;
       position: absolute;
       top: 10px;
       left: 200px;
    }
     
    #inner {
        padding: 10px;
    }

    and a fix that came with the original page
    Code CSS:
        <!--[if IE]>
         <style type="text/css" media="screen">
    	/* IE Workaround for peekaboo bug */
    	#content {height: 1%;} 
    	/* use expression to get the height from the contentwrap div */
    	#apbg1, #apbg2 {height:expression(contentwrap.offsetHeight + "px");}
        </style>
         <![endif]-->

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as I know, there isn't really a way of getting the footer to clear the main content columns using absolute positioning (unless you're prepared to use javascript) - you have to use floated positioining.

    This site is a good example of how to do it: http://www.yaml.de/en/documentation/...optimized.html

    One thing the article doesn't really cover is that in ie6 you need to give the columns half the left and right margin due to a bug.

    To do this you would need to use an ie6 filter e.g

    #left {float:left; width:200px; margin-right:20px;}
    * html #left {margin-right:10px;}


Bookmarks

Posting Permissions

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