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 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts

    <div>'s expanding to content height in FF

    Hello,

    In firefox browser I am having trouble with my <div>'s not expanding out height-wise appropriate to its content. Sometimes it does, sometimes it doesn't. All other browsers seem to work fine regarding this. I have attached 2 screenshots to help explain. Any ideas on what I need to set this <div>'s style to to accomedate this appropriatly in FF?

    Wrong: http://img46.imageshack.us/img46/226/wrong1hx.jpg

    Right: http://img46.imageshack.us/img46/2955/right6rb.jpg



    Thanks again!

    Kyle

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Images are useless in this situation. We need code or a link. I prefer the link.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    The problem is not Firefox, it's IE. IE expands divs to contain floated content. This is incorrect behavior. But, like aero said, a specific solution requires a look at your code.

  • #4
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry for that.


    Code can be view via this URL: http://www.websolvents.com/forums/

  • #5
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Here's the trick I use for keeping floats inside of DIVs:
    Code:
    #container:after { 
    	content: ""; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    }
    This assumes I alread have the #container coded in CSS, and that it is the <DIV> enclosing floated content. Since IE is not fully CSS2 compliant, it ignores the :after psuedo-element, which is fine because IE (incorrectly) encloses the floated elements anyway. Firefox, Opera, and other CSS2 compliant browsers will recognize the :after psuedo-element and expand the <DIV> to enclose the floated element.

    Credit for this solution goes to Matt Brubeck, and you can read his article in full by following this link: How to completely enclose a floated element in CSS2.

    Cheers,

    Rick
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin • Installatron • Money-Back Guarantee • 24/7 Support
    Providing "Service Above All Else" since 2005.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay make sure all of your images have widths and heights set to them. Firefox some times needs this to display the page properly. Also this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    should be this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    It may throw things off a bit in IE or might not do anything at all to IE but it may make FF better to. After all you should be coding for a good browser (FF) and tweaking for the bad one (IE). overflow:hidden; on the main container also fixes the problem sometimes.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Apr 2006
    Posts
    50
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Still doesnt seem to be working properly in FF.

    I've been editing here for hours, still cant seem to find a fix.

    Here is another link that will not expand out in Firefox:
    http://www.websolvents.com/members/

    Click around on the knowledgebase/announcement, etc. links there in the middle. Sometimes it expands out for the content, other times is doesn't and has is "hidden".

    Any more ideas?


    I really appreciate the help.

    Kyle

  • #8
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    The second page doesn't even have a doctype and both have a bazillion html and css errors. Validate and fix those first.


  •  

    Posting Permissions

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