Cross platform css positioned page problems 1

[aaronjonmartin]

Hi,

Im trying to get my site to look the same in mozilla/firefox as it does in IE however the bottom section of the page (where the content is) looks a bit messed up in firefox. Could you take a look at my code to see what i can do about it?

http://www.graftersonsite.com/xplatform

"It's so much easier to suggest solutions when you don't know too much about the problem."
Malcolm Forbes (1919 - 1990)

 

[kenrbnsn]

Try putting a clearing DIV before your Footer.

In your CSS:

.clearer {
    clear: both;
    line-height: 0.01em;
}

In your source:

<div class=clearer>&nbsp;</div>

Ken

 

[Vragabond]

I have tried to get your page to appear the same in Opera, Mozilla and IE and I got to this point:

http://www.mollieandandraz.com/random/grafters.html

It shows the same in all three browsers and it is mostly what you were looking for. I have cheated with the black vertical solid line between the two floated columns. I don't think you can achieve two floated columns of the same length with the current css except if you are using a fixed height. But, since height property is incorrectly interpreted by IE (it regards height as min-height), it is not a good practice to use it. Basically, when using height, Mozilla and Opera will not expand the container if the text is longer than the container while IE will.

That is why my right column doesn't extend all the way to the bottom. Anyway, hope it helps you.

 

[aaronjonmartin]

Wow thankyou Vragabond, that is very helpful of you i really appreciate it. I will have a look at your code now and see what you have done.

"It's so much easier to suggest solutions when you don't know too much about the problem."
Malcolm Forbes (1919 - 1990)