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 to the CF scene
    Join Date
    Nov 2006
    Location
    Kansas City
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Site renders fine in IE, not in Firefox - body tag squashes page

    I have created a two-column layout using css, but am having issues rendering properly in Firefox. Everything looks and works as it should in IE.

    I've put a dashed border around the body and a dotted border around the "page" id, which is the main container for the two columns. In Firefox you can see that the dashed border is in the middle of the page. I think this is the issue but don't know how to fix it.

    You can view this at http://test.rhombusdesign.com. I'm testing out ideas there. If you view it in IE, you'll see how I want it to be. I'm attaching (almostlucid.zip) the index.php template, style.css, and a brad.html which is the page you would use if you wanted to work on the style.css and see the result on your machine.

    Thanks for your help guys. I'm tired of dreaming about css every night. My main site is at http://almostlucid.com.
    Attached Files Attached Files

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Code:
    html, body {min-height: 100%;}

  • #3
    New to the CF scene
    Join Date
    Nov 2006
    Location
    Kansas City
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    sorry, that didn't fix it

    I'm sorry, but that didn't fix things. It seems to be getting closer though, using a variation of what you suggested. Now, it seems to stretch down a ways and then stop. Odd thing is, it doesn't matter what type of page it is. If you click around on archive links, the white goes down to the same distance regardless of the amount of content.

    You can see the html and body sections outlined in dashed borders here.
    http://test.rhombusdesign.com

    Any other ideas?
    .
    Attached Files Attached Files
    Last edited by almostlucid; 11-08-2006 at 08:11 PM.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    After searching a while I found that it's a float issue. For example you didn't clear the float for the footer that it stays at the bottom. But your code is too messy for a quick fix... You have some really weird characters in your source code that even my Dreamwaver can't interpret.

    So here's your personal three step plan:
    1. Fix your code and make it valid
    2. Read about floats and the correct usage thereof
    3. Read about basic two comlumn layouts


    Good luck.

  • #5
    New to the CF scene
    Join Date
    Nov 2006
    Location
    Kansas City
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    still looking for help

    1. This page validates. http://test.rhombusdesign.com/?p=911 There are some characters in old posts that I need to convert, but they aren't part of my css problem.
    2. Thanks. Clearing the float fixed my footer problem.
    3. This link is good, but more basic than my layout and not applicable.

    I've made some progress since first posting this. The <body> is fully extended, the footer is in the right place, and everything still renders fine in IE. Now, as you can see here, it's the <div id="page"> section that is all scrunched up and won't extend the full length. It's the last step, I just can't find the answer.

    Any ideas anyone?

    Attached Files Attached Files
    Last edited by almostlucid; 11-09-2006 at 02:35 PM. Reason: progress


  •  

    Posting Permissions

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