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

almostlucid

11-07-2006, 09:43 PM

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.

VIPStephan

11-07-2006, 11:38 PM

html, body {min-height: 100%;}

almostlucid

11-08-2006, 07:35 PM

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?
.

VIPStephan

11-08-2006, 08:25 PM

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:

Fix your code and make it valid (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ftest.rhombusdesign.com%2F)
Read about floats (http://css.maxdesign.com.au/floatutorial/) and the correct usage thereof
Read about basic two comlumn layouts (http://bonrouge.com/2c-hf-fixed.php)

Good luck.

almostlucid

11-08-2006, 10:26 PM

1. This page validates. http://test.rhombusdesign.com/?p=911 (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ftest.rhombusdesign.com%2F?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?

:confused: