SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Apr 2002
    Posts
    395
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 6 layout problems

    This is my 1st layout in CSS, after a long history with tables. I am beginning to get a hang of it, just a few problems.

    The layout is supposed to be centered. The "right-slide" box is supposed to have a height of 100% so it would reach the bottom of the page. It works in Firefox, but in IE 6 the page is aligned to the left and the "right-slide" is not 100%.

    HTML Code:
    <html>
    <head>
    <title>Good Stuff</title>
    <style type="text/css" media="screen">
    
    body {
            background:#666666;    
            color: #FFFFCC;    
            font-family: palatino linotype;
            height: 100%;
            }
    
    
    #outer{
        min-height: 100%;
        width:980px;
        margin-left:auto;
        margin-right:auto;
        text-align:left;
        position:relative
    }
    
    
    
    #leftcontent, #right-slide, #centercontent {
        float:left;
        width:200px;
    }
    
            
        #leftcontent {
            border:0px solid #000;
            width:200px;
            height:500px;
            }
            
        #right-slide {
            z-index: 0;
            width:160px;
            height: 100%;
            background:#cccccc;
            }
            
    
    
        #centercontent {
             width:610px;
            background:#666666;
               border:0px solid #000;
    
            }
    
        #top-intro {
            margin-left: 200px;
            width:700px;
            background:#666666;
            border:2px solid #000;
            }
            
    </style>
    
    </head>
    
    <body>
    
    <div id="outer">
    
    <div id="leftcontent">
    left content
    <br>
    </div>
    
    <div id="top-intro">
    header content
    </div>
    
    <p>
    
    <div id="centercontent">
    center content
    </div>
    
    <div id="right-slide">
    rightcontent
    </div>
    
    </div>
    
    
    </body>
    
    </html>

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed- try using all percentage widths and heights. At least that is what I did and here is my code below.
    HTML Code:
    <html>
    <head>
    <title>Good Stuff</title>
    <style type="text/css" media="screen">
    
    body {
            background:#666666;    
            color: #FFFFCC;    
            font-family: palatino linotype;
            height: 100&#37;;
    	overflow: auto;
            }
    
    
    #outer{
        width:980px;
        margin: auto;
        text-align:left;
        position:relative;
        border: 1px solid red;
        height: 100%;
    }
    
    
    
    #leftcontent, #right-slide, #centercontent {
        float:left;
        position: relative;
    }
    
            
        #leftcontent {
            border:1px solid green;
            width:20%;
            height:100%;
            }
            
        #right-slide {
            width:19%;
            height: 100%;
            background:#cccccc;
            }
            
    
    
        #centercontent {
             width:60%;
            background:#666666;
               border:1px solid blue;
    
            }
    
        #top-intro {
            margin-left: 20%;
            width:70%;
            background:#666666;
            border:2px solid #000;
            }
            
    </style>
    
    </head>
    
    <body>
    
    <div id="outer">
    <div id="top-intro">
    header content
    </div>
    <div id="leftcontent">
    left content
    <br>
    </div>
    <div id="centercontent">
    center content
    </div>
    <div id="right-slide">
    rightcontent
    </div>
    
    </div>
    
    
    </body>
    
    </html>
    This should display relatively the same in IE and FF. The main difference is how IE and FF display the 100% since you have it inside a wrapper. FF the right-slide and leftcontent boxes go all the way to the bottom of the screen, and in IE they stop inside of your wrapper.
    Last edited by funktifyknow; Sep 7, 2007 at 07:45. Reason: clarification

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it doesn't centre in IE6 - do you have a valid and full doctype at the start of the html ?

  4. #4
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gee.. i would recomend as a start to add doctype:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    And it will center the site
    Now about the 100% thing:
    1. you have to add
    Code:
    html{height: 100%;}
    2. Then to the #outer :
    Code:
        min-height: 100%;
        height: 100%;
        width:980px;
        margin-left:auto;
        margin-right:auto;
        text-align:left;
        position:relative
    3. And Then finaly to the #right-slide :
    Code:
        #right-slide {
            width:160px;
            min-height: 100%;        
            _height: 100%;
            background:#cccccc;
            }

  5. #5
    SitePoint Addict
    Join Date
    Apr 2002
    Posts
    395
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, I got the page centered. I am still having problems with making the right column be 100&#37;. I cannot seem to pin-point the problem. Here's my code:

    HTML Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Good Stuff</title>
    <style type="text/css" media="screen">
    
        body {
            background:#666666;    
            color: #FFFFCC;    
            font-family: palatino linotype;
            height: 100%;
            overflow: auto;
            margin-bottom: 0;
            }
    
        html{height: 100%;}
    
        #outer{
               min-height: 100%;
                height: 100%;
            width:980px;
            margin-left:auto;
            margin-right:auto;
            text-align:left;
            position:relative
            }
    
        #leftcontent, #right-slide, #centercontent {
            float:left;
            position: relative;
            }
    
            
        #leftcontent {
            border:0px solid #000;
            width:200px;
            }
            
        #right-slide {
            z-index: 0;
            width:160px;
                min-height: 100%;        
                _height: 100%;
                text-align:center;
            background:#333333;
            border-left:2px solid #ccc;
            border-right:2px solid #ccc;
            }
            
    
        #top-intro {
            margin-left: 210px;
            width:760px;
            background:#333333;
            font-size: 14px;
            border:2px solid #ccc;
            }
        
        #centercontent {
            height: 100px;
             width:610px;
            background:#666666;
               border:0px solid #000;
            }
    </style>
    </head>
    
    
    <body>
    <div id="outer">
    
    <div id="leftcontent">
    LEFT
    </div>
    
    <div id="top-intro">
    INTRO
    </div>
    
    <div id="centercontent">
    CENTER
    </div>
    
    
    <div id="right-slide">
    RIGHT
    </div>
    
    </div>
    </body>
    
    </html>

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Quote Originally Posted by funktifyknow
    Fixed- try using all percentage widths and heights
    Unfortunately it's not fixed it's quite badly broken

    I'm afraid that you are using methods that just won't work. You cannot use 100&#37; heights in that way. If you specify 100% height for the element then that's all you will get (assuming the browser has something to base 100% on anyway). If the content surpasses the 100% height it will be ignored.

    The only way to specify a height that will allow a column to grow greater than the height is to use min-height. Of course IE6 doesn't understand min-height so you need to supply ie6 with a hack that supplies it with height instead as ie6 and under treat height as a minimum anyway.

    Unfortunately using min-height means that children will have nothing to base their height on and the height collapses to auto. This effectively means that you only get one shot at using 100% height and that is usually used for the main wrapper. You can't nest any more elements and make then stretch to this parents height (unless you are using absolute positioning but this doesn't work in IE either).

    You can't also specify 100% height for an element that starts some way down the page because it will the extend 100% down from its position thus forcing a vertical scrollbar as in your example.

    Please read the faq on 100% height as this is explained in detail.

    In reality you can't specify columns in css that keep track with each other and you have to resort to other methods to achieve this. The 3 col sticky thread shows a number of methods to achieve this but is a complicated subject.

    Perhaps the easiest way to provide full length columns is to use a background image on the main 100% wrapper (min-height:100%) to provide the illusion of full length columns as in this example shown below.

    http://www.pmob.co.uk/temp/3col-centred-template7.htm

    If you add content to any of the columns then all columns will appear to grow in unison because the background is revealed on each through the image on the main wrapper.

    You must use a valid doctype or IE6 will be in quirks mode and all bets are off because it will use the broken box model among other unwanted legacy behavior.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by IamAdam
    Thank you, I got the page centered. I am still having problems with making the right column be 100&#37;
    As I said above you are using the wrong method. You should change your html to something similar to this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Good Stuff</title>
    <style type="text/css" media="screen">
    html,body{
        height:100%;
        margin:0;
        padding:0
    }
    p{margin:0 0 1em 0}
    body {
        background:#666;    
        color: #FFFFCC;    
        font-family: palatino linotype;
        text-align:center;
    }
    #outer{
        min-height: 100%;
         width:980px;
         margin:0 auto;
      text-align:left;
         position:relative;
      background:red;
    }
    * html #outer{height:100%;}
    #leftcontent, #right-slide, #centercontent {
      float:left;
      position: relative;
    }       
    #leftcontent {
        width:200px;
        background:#999;
      border-left:2px solid #ccc;
      border-right:2px solid #ccc;
        min-height:40px;/* stop centre float from moving left if no content is present in left column*/
    }
    * html #leftcontent {height:40px}
    #right-slide {
        z-index: 0;
         width:160px;
        text-align:center;
        background:#333;
      border-left:2px solid #ccc;
      border-right:2px solid #ccc;
    }       
    #top-intro {
      width:772px;
      background:#333;
      font-size: 14px;
      border:2px solid #ccc;
        display:inline;/* ie double margin bug*/
        float:left;
    }
    #centercontent {
      width:612px;
      background:#666;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="leftcontent">
            <p>Left content goes here: Left content goes here: Left content goes here: Left content goes here: Left content goes here: Left content goes here: Left content goes here: Left content goes here: </p>
        </div>
        <div id="top-intro">
            <h1>Heading</h1>
        </div>
        <div id="centercontent">
            <p>Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : Centre content goes here : </p>
        </div>
        <div id="right-slide">
            <p>Right conntent goes here : Right conntent goes here : Right conntent goes here : Right conntent goes here : Right conntent goes here : </p>
        </div>
    </div>
    </body>
    </html>

    And then simply make an image that vcan be repeated on the main outer to produce the illusion of columns.

    This was the image I use in my example above:

    http://www.pmob.co.uk/temp/images/3-...-blueshade.gif

    Make a similar image that fits your layout.

    When you have that image in place you won't of course need the borders and background colours on the existing elements as they will all be taken care of by that one image.

    This is the easiest way to do what you want. There are methods to do it without images but they are very complicated.

    Hope it helps anyway

  8. #8
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well don't I feel like a donkey now. No not really. I will give that article a read. BTW I really enjoy your blog. It has helped me out a couple difficult spots.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Well don't I feel like a donkey now
    Don't worry about it - at least you tried which is the main thing


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
  •