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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts

    DIV fixed to it's minimum height in Firefox

    Hi guys,

    I'm testing a website that I'm currently buildind and when I load it in Firefox, I'm getting two display problems:
    1. My main content DIV is fixed to it's minimum height and not expanding to fit the content.
    2. The second DIV containing the travel planner is not floating to the right, unless I add clear:both property which will break the main layout.


    I just can't seem to find the bug and I've already spent a great time on it.
    You can view my source codes for details.

    http://pjx.itconsmedia.com/eacottawa/directions.html

    The site is published on my testing domain, so the Google map will not display, please don't mind it.

    Thanks for any help

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello treigh,
    Happy New Year!

    Adding overflow: auto; to #content clears the floats but adds scrollbars because your box model is off somewhere. Need to adjust your widths to fix that.

    overflow:auto; method of clearing floats

    If you run it through the validator (see links below) it finds your using several id's more than once.

    Try these changes to your CSS:
    Code:
    #sub {
    	position : relative;
    	width : 734px;
    	min-height : 355px;
    	display: block;
    }
    #sub .top {position : relative; width : 734px; height : 50px; background : url(../images/bg/bg-subheading.png) no-repeat; text-indent : 15px;}
    #sub .top .title {color : #f1f1f1; font-family : Arial, Helvetica, sans-serif; font-size : 18px; padding-top : 15px;}
    #sub .body {
    position : relative; 
    width : 734px; 
    min-height : 355px; 
    height : auto; overflow: auto;
    margin : 0 auto; 
    background : url(../images/bg/bg-subbody.png) repeat-y; display : block;
    }
    #sub .body .profilebox {position : relative; width : 190px; height : 252px; float : right; margin-right : 10px; margin-top : 20px;}
    #sub .body .content {position : relative; width : 500px; display : block; margin-left : 15px; margin-top : 20px; float : left; line-height : 20px; color : #5a5a5a;}
    #sub .body .content .p {border-left : 1px solid #cccccc; margin-bottom : 10px; padding-left : 10px;}
    #sub .body .map {
    position : relative; 
    width : 400px; 
    height: 100%; 
    display : block; 
    padding: 2px; 
    border: 1px dashed #dfdfdf; 
    margin-left : 15px; 
    margin-top : 20px; 
    /*float: left;   - remove*/
     line-height : 20px; color : #5a5a5a;
    }
    #sub .body .directions {
    width : 295px; 
    float : right; 
    clear: right;
    margin-right : 10px; 
    margin-top : 20px; 
    border: 1px dashed #dfdfdf;
    }
    #sub .btm {position : relative; width : 734px; height : 48px; background : url(../images/bg/bg-subfooter.png) no-repeat;}
    
    #content {
    	padding : 0 0 18px 0;
    	position : relative;
    	margin : 0 auto;
    overflow: auto;
    	color : #333;
    	display : block;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    treigh (01-01-2008)

  • #3
    New Coder
    Join Date
    Jan 2008
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts

    DIV fixed to it's minimum height in Firefox

    Happy new year Excavator and thank you so much for the tips.

    I fixed most of the problems, as I noticed that a parent DIV should only have 1 element floating to the right and use it as a container for all other divs that I would want in the same section.

    I just need your help with attaching my body div and the top div. There's an empty space between them and I'm still trying to figure it out. I know I will find it, but if you get it faster It will help me spee this thing up.

    http://pjx.itconsmedia.com/eacottawa/directions.html

    Thanks again!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    It's looking better!
    Maybe this will get you started on the #sub .top and .body?


    Code:
    #sub {
    	width : 734px;
    	display: block;
    }
    #sub .top {
    width : 734px; 
    height : 50px; 
    background : url(http://pjx.itconsmedia.com/eacottawa/includes/themes/main/images/bg/bg-subheading.png) no-repeat; 
    text-indent : 15px;
    }
    #sub .top .title {
    color : #f1f1f1; 
    font-family : Arial, Helvetica, sans-serif; 
    font-size : 18px; 
    padding-top : 15px;
    }
    #sub .body { 
    width : 734px; margin: -25px 0 0 0;
    background : url(http://pjx.itconsmedia.com/eacottawa/includes/themes/main/images/bg/bg-subbody.png) repeat-y; 
    
    }
    #sub drops in IE7 so I'm sure it drops in IE6 as well. You may have to sacrifice some widths in #sub to get it to work... or widen #pagewrapper? Maybe float:left; would fix it?

    Pretty complicated website and I'm limited to what I can do with the WebDevelopersToolbar in FF, unless I download the site and work on it locally...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jan 2008
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanx again,

    I wasn't even paying attention to IE since I was so focused on Firefox. I reduced the size of my #sub DIV and removed the auto scroller so IE is displaying properly. You can check it out to see how much you helped me. So now I can focus on the core of the job

    I appreciate your help and when the site is finally up, I'll update the post so you can check it if you want.

    Cheers,
    Treigh
    Last edited by treigh; 01-02-2008 at 01:08 AM.


  •  

    Posting Permissions

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