dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: Problem with <div> height in Mozilla

Hybrid View

  1. #1
    Join Date
    May 2005
    Posts
    47

    Problem with <div> height in Mozilla

    I'm building a page with everything contained inside one <div> tag called container as follows:

    <div id="container">
    ...
    </div>

    #container {
    width:770px;
    background-color:#61B2E1;
    background:url(../img/bgGrad.jpg) #61B2E1 repeat-x;
    padding:20px 0 0 0;
    }

    I'm using this so that I can tile a background over the whole page.

    This works fine in IE, but in Firefox the height of the container box doesn't seem to extend to incorporate the content, so I'm only getting about 20px of the background at the top of the page.

    I've tried adding height:100% and min-height:100% tags to the container but this doesn't seem to help.

    If I make the container a fixed height, this works, but I need it to scale depending on the content.

    Please can someone advise how I can get the container box to expand in Firefox - I'm tearing my hair out and have a deadline rapidly approaching!

    Thanks in advance,
    IK

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    A link would be helpful. If any of the content is position:absolute, that could be a problem.

  3. #3
    Join Date
    May 2005
    Posts
    47
    OK mate, I've hosted it here:

    http://www.artofdistraction.co.uk/test/index.html


    Here's the code:

    <body>
    <div id="container">
    <div id="leftNavHeight">
    <div id="leftNav">
    <div id="ologo"><!-- --></div>
    <div id="navItems">
    <ol>
    <li>List item</li>
    </ol>
    </div><!-- #navItems ends -->
    <div id="logout">Log out</div>
    <div id="statusArea">
    <h2>Your status</h2>
    <div id="statusPoints">Points so far: 50</div>
    <div id="statusRating">Your rating: ****</div>
    </div><!-- #statusArea ends -->
    </div><!-- #leftNav ends -->
    </div><!-- #leftNavHeight ends -->
    <div id="header">
    <div id="welcomeArea">
    <div id="welcomeHl">Welcome</div>
    <div id="regMark">&reg;</div>
    </div>
    <div id="imLogo"><!-- --></div>
    <div class="clearBoth"><!-- --></div>
    <div id="scrollArea">......Here's what's happening</div>
    <div id="homeBody" style="padding:0 10px; margin:0;">
    <h1>Hello John Sample</h1>
    <p>Lorem ipsum.</p>
    </div><!-- #homeBody ends -->
    </div><!-- #header ends -->
    <div class="clearBoth"><!-- --></div>
    </div><!-- #container ends -->
    <object type="application/x-shockwave-flash" data="flash/flashFooter.swf" width="770" height="170">
    <param name="movie" value="flash/flashFooter.swf" />
    <img src="XXX.jpg" alt="xx" width="770" height="xx" />
    </object>
    </body>



    Styles are as follows:


    /* HTML --------------------------------------------------*/

    body {
    background:#dadada;
    font-family:verdana, arial, helvetica, sans-serif;
    margin:0;
    padding:0;
    font-size:small;
    voice-family:"\"}\"";
    voice-family:inherit;
    font-size:medium;
    }

    h1 {
    color:#FFFFFF;
    font-family:verdana, arial, helvetica, sans-serif;
    font-size:100%;
    margin:1em 0;
    }

    h2 {
    color:#9EA4A6;
    font-family:verdana, arial, helvetica, sans-serif;
    font-size:100%;
    margin:15px 0 5px 15px;
    }

    p, li, dt, dd, legend {
    color:#FFFFFF;
    font-family:verdana, arial, helvetica, sans-serif;
    font-size:75%;
    }

    p {
    margin:0;
    padding-bottom:12px;
    font-size:60%;
    }

    a {
    color:#63686A;
    font-weight:bold;
    }

    a img {
    border:0;
    }

    abbr, acronym {
    border-bottom:1px dotted #888;
    cursor:help;
    }

    ul {
    margin-top:0px;
    }


    /* LAYOUT ------------------------------------------------*/

    .clearBoth {
    clear:both;
    float:none;
    height:0;
    }

    #container {
    width:770px;
    background-color:#61B2E1;
    background:url(../img/bgGrad.jpg) #61B2E1 repeat-x;
    padding:20px 0 0 0;
    }

    #leftNav {
    float:left;
    width:128px;
    }

    /* for Mozilla/Safari/Opera */
    *>#leftNavHeight {
    padding-top:405px;
    min-height:1px;
    float:left;
    }

    *>#leftNavHeight #leftNav {
    margin-top:-405px;
    }

    /* for IE, with IE5/Mac backslash filter \*/
    * html #leftNavHeight {
    height:405px;
    float:left;
    }
    /* end filter */

    #oLogo {
    background:url(../img/o2Logo.gif) no-repeat;
    width:70px;
    height:63px;
    margin:0 0 40px 30px;
    }

    #navItems {
    margin:0 0 55px 10px;
    }

    #navItems ol {
    list-style:none;
    margin:0;
    padding:0;
    }

    #navItems li {
    margin:0;
    padding:0;
    line-height:2em;
    }

    #navItems a {
    color:#FFFFFF;
    text-decoration:none;
    }

    #logout {
    background-color:#519AC1;
    font-size:70%;
    color:#FFFFFF;
    padding:5px 5px 5px 10px;
    margin-bottom:20px;
    }

    #statusArea {
    margin-left:10px;
    line-height:2em;
    color:#FFFFFF;
    text-decoration:none;
    font-size:55%;
    }

    #statusArea h2 {
    color:#FFFFFF;
    margin:0;
    }

    #header {
    float:left;
    padding-right:20px;
    }

    #welcome {
    float:left;
    background:url(../img/welcome.jpg) no-repeat;
    width:574px;
    height:26px;
    text-indent: -100em;
    overflow: hidden;
    margin-top:10px;
    }

    #welcomeHl {
    float:left;
    font-size:170%;
    font-weight:normal;
    font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF;
    }

    #welcomeArea {
    width:574px;
    float:left;
    }

    #regMark {
    font-size:60%;
    float:left;
    color:#FFFFFF;
    }

    #imLogo {
    background:url(../img/imlogo.gif) no-repeat;
    width:48px;
    height:57px;
    float:left;
    margin:0 0 10px 0;
    }

    #scrollArea {
    font-family:verdana, arial, helvetica, sans-serif;
    font-size:70%;
    background-color:#41628D;
    color:#FFFFFF;
    padding:4px;
    margin-bottom:15px;
    }


    /* HOME PAGE ---------------------------------------------*/

    #homeBody {
    width:602px;
    }
    Last edited by invisible kid; 09-22-2005 at 11:02 AM.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Add overflow: hidden; to #container

  5. #5
    Join Date
    May 2005
    Posts
    47
    Quote Originally Posted by Fang
    Add overflow: hidden; to #container
    Fang, thanks VERY much! That works a treat!

    Can you explain why it works?

    Also, maybe you can help me with another seemingly inexplicable problem I'm having with the same code.

    Whenever I change the name of the #header id to anything except #header, the code now longer displays properly in IE 5 for Mac! All I'm changing is the name, not the style itself.

    I'm changing the name of the #header id in both the html and the stylesheet, and I can't find any other references to it that I'm not accounting for.

    I'm puzzled!

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    It works by clearing the previous float(s).
    If the id is changed in the html and css then it should work. Make sure it's not used else where or the (camel)case is not different. Also force a page update, Ctrl+F5

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles