SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    Romania
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face Weird height problems

    Hello.

    http://eutest.cpea.ro/contul_meu.php

    Please take a look at that and maybe you can find out why the white background is not rendering OK in Firefox.

    The CSS: http://eutest.cpea.ro/stiluri/layout.css

    Also, how can I make the left blue column stretch to 100% height?


    Regards.
    An error is a human mistake with honest intention.

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

    The white background looks ok in firefox - I couldn't see what you meant.

    The easiest way to get a full length column is to use a bg image repeated down the left side of the container.
    e.g.
    Code:
    #container {
      margin: 0;
      padding: 0;
      border: 0;
      border-right: 1px solid #003366;
      background-color: #fff;
      height: 100%;
      min-height:100%;/*for mozilla - ie ignores this anyway*/
      width: 90%;
      float: left;
    background-image: url(http://www.pmob.co.uk/temp/images/navbg.gif);/*this is the background colour of the left column */
     background-repeat: repeat-y;
     background-position: left top;
    }
    
    html>body #container {height:auto}/*for moz only*/
    I've just linked to an image on my server so you can see the effect.

    I notice you have used a lot of 100% heights in your elements but the above one is the only one where you have catered for mozilla.

    e.g.
    Code:
    #main {
      margin: 0;
      padding: 0;
      border: 0;
      width: 100%;
      height:100%;
      min-height:100%;/*for mozilla - ie ignores this anyway*/
    }
    You have specified a height of 100% and a min-height of 100%. Therefore mozilla will be 100% no more, no less. You need to supply a height auto to mozilla browsers as you have done in the first example above. While this may not be a problem at the moment it will be a problem if height becomes greater than 100%.

    You have probably seen it already but my 3 col demo has examples of 2 col layouts using a bg gif and without) but there are also some explantions about 100% height mixed in there as well.

    Hope that helps

    Paul


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
  •