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 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    height not working like I want...

    My page looks fine in IE, but it doesn't work in FF. (although I'm sure FF is rendering it "correctly" and it's my code that isn't standards complient and IE is just assuming what I want)

    I only noticed this once I dropped my resolution to 800x600.

    As you can see, FF only renders the main div to 100% of the height of the screen, and anything that falls below 100%, the background doesn't show.

    How can I fix this?

    Page

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    <head>
      <title>Mackie Bay Huts</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" type="text/css" href="hutsstyle.css"/>
    </head>
    
    <body>
      <div id="wrapper">
        <div id="logo">
          <img src="images/hutsLogo.jpg" alt="Mackie Bay Huts"/>
        </div>
    
        <div id="navbar">
          <a href="index.php">Home</a>
          <a href="schedule.php">Schedule</a>
          <a href="stats.php">Stats</a>
          <a href="profiles.php">Profiles</a>
          <a href="http://forums.bigtoque.com" target="new">Forums</a>
          <a href="about.php">About</a>
    
          <div id="valid">
            <p>
              <a href="http://validator.w3.org/check?uri=referer"> <img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!"/></a>
              <a href="http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"/></a>
            </p>
          </div>
        </div>
    
        <div id="main">
          <img src="images/imgTeamLogo.gif" alt="Mackie Bay Huts"/><img src="images/imgHuts.gif" alt="Mackie Bay Huts"/>
    
          <div id="news">
            <img src="images/imgNews1.gif" alt="News"/>
            <?
            PHP removed for ease of readibility
            ?>
          </div>
    
          <div id="recap">
            <img src="images/imgRecaps1.gif" alt="Recaps"/>
            <?
            PHP removed for ease of readibility
            ?>
          </div>
        </div>
      </div>
    </body>
    </html>
    CSS File

    Code:
    /*huts.bigtoque.com Stylesheet*/
    
    html, body {
      height: 100%;
    }
    
    body {
      margin: 0px;
      padding: 0px;
      background-color: #3a6ea5;
      color: #666666;
      font-family: Verdana, Helvetica, Arial, sans-serif;
      font-size: 1em;
    }
    
    #wrapper{
      background-color: #3a6ea5;
      height: 100%;
      width: 780px;
    }
    
    #logo{
    
    }
    
    #navbar {
      margin-top: -3px;
      width: 125px;
      float: left;
    }
    
    #navbar a:link, #navbar a:visited {
      display: block;
      color: #7e7e7e;
      background-color: #ffffff;
      border-bottom: 1px solid #000000;
      padding-top: 3px;
      padding-bottom: 3px;
      text-decoration: none;
      text-align: center;
      font-weight: bold;
    }
    
    #navbar a:hover {
      background-color: #dedede;
    }
    
    #valid a:link, #valid a:visited, #valid a:hover {
      display: block;
      background-color: #3a6ea5;
      border: 0px;
    }
    
    #main {
      width: 633px;
      height: 100%;    
      background-color: #ffffff;
      float: left;
      margin-top: -91px;
      border-left: 1px solid #000000;
      border-right: 1px solid #000000;
      padding: 10px;
      background: url(images/bgPage.jpg);
    }
    
    #main h1 {
      text-align: center;
    }
    
    /*#main img{
      margin-left: 25px;
    }*/
    
    #news {
      width: 292px;
      float: left;
      padding: 10px;
      padding-top: 0px;
      background-color: #dedede;
    }
    
    #news ul{
     margin: 10px;
     font-size: .9em;
    }
    
    #recap {
      width: 292px;
      float: right;
      padding: 10px;
      padding-top: 0px;
      background-color: #dedede;
    }
    
    #recap ul{
     margin: 10px;
     font-size: .9em;
    }
    
    /*
    #footer {
      background-color: #ffffff;
      clear: both;
    }
    
    #footer p {
      font-size: .6em;
      text-align: center;
    }
    
    #footer img {
      padding: 10px;
      vertical-align: middle;
    }
    */
    
    table, tr, td{
      border: 1px solid #000000;
    }
    Last edited by BigToque; 02-05-2005 at 09:01 PM.

  • #2
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could use min-height for good browsers and height for IE. (but you will still have problems in Safari)

    html, body { min-height:100%; }
    * html, * html body {height:100% /* IE ONLY */ }

    This rule will fix safari:
    html, body { display:table-cell }


    I take no responsibility for the above nonsense.


    Left Justified

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help.

    This part:

    * html, * body {height: 100%; /* IE ONLY */ }

    Helps in all the situations except one.

    When you click on this link here you can see that any time the content is less than 100% of the height of the screen, the DIV only extends to the height of the content. (this only happens in FF)


  •  

    Posting Permissions

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