Firefox and IE7 - different displays of course. Explain please?

M

Mike Barnard

Hi all, again.

http://www.thunderin.co.uk/shaun/index.html

This is just a basic template for a simple two column layout. The
colours are for making the areas obvious! My design ideas aren't THAT
bad, I hope! :)

In Firefox the footer is flush to the bottom of the longest column,
but in IE7 there is a gap. I know it will be one of the regulars and
a well known kludge (I like that word!) to you, but not to me.

Can anyone point me to a link please? AND, what would you do
differently, if anything? I haven't tried running it through a
verifyer yet, btw. I will.

Again, thanks.
 
T

Toby A Inkster

Mike said:

Firstly, please remove this from them top of your CSS file:

<style type="text/css">

and this from the end:

</style>

They should not be there. It is not an HTML file so should not contain
HTML.

Try removing the margins on your paragraphs:

P { margin: 0; }

Does that fix things?

If it does, then your problem seems to be an IE bug to do with incorrectly
collapsing margins. It can be fixed by setting a 1px top border on your
footer and/or a 1px bottom border on your main content column. Of course,
the borders can be the same colour as the background colour, so your
visitors don't have to see them!

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!
 
M

Mike Barnard

On Sun, 4 Mar 2007 17:15:52 +0000, Toby A Inkster

http://www.thunderin.co.uk/shaun/index.html
Firstly, please remove this from them top of your CSS file:
<style type="text/css">
and this from the end:

They should not be there. It is not an HTML file so should not contain
HTML.

Doh, left from a cut'n paste from another file of mine. Double Doh...

Try removing the margins on your paragraphs:

P { margin: 0; }

Does that fix things?

Aha, you mean add that to the source, don't ya.

If it does,

Hey, it does. With this in the code (it's not been put in the
published version btw) the footer sits snugly in both browsers.
then your problem seems to be an IE bug to do with incorrectly
collapsing margins.

Now, I *have* read about this one, if it's the one. From memory, in
IE if two blocks have margins that touch each other then the smallest
margin will be removed leaving only the biggest. i.e. block 1 has a
margin of 30px all round and block 2 below it has a margin of 20 px.
The expectation would normally be two pieces of content seperated by
50px of margin, but IE removes the 20px and leaves a 30px margin only.

I think.

How would that cause my problem? In my code in IE the gap is BIGGER
than expected. If a margin had collapsed there would be a smaller
gap, no? Is there another IE margin bug of have I misunderstood it?
It looks as if IE has forced one of the elements to have a margin I
haven't declared until it's explicitly removed.

I'll google later and experiment, but thanks for the tip.
It can be fixed by setting a 1px top border on your
footer and/or a 1px bottom border on your main content column.

I see; this seperates the two margins so the above doesn't happen.
Of course,
the borders can be the same colour as the background colour, so your
visitors don't have to see them!

Thanks. Help is apprecieated, especially on a sunday. My Mrs is fed
up with me being up here not downstairs. :)
 
T

Toby A Inkster

Mike said:
The expectation would normally be two pieces of content seperated by
50px of margin, but IE removes the 20px and leaves a 30px margin only.

It's more a case of this:

<div style="border:1px solid red">
<div style="margin: 30px">
<p style="margin: 20px">Blah</p>
</div>
</div>

How far should "Blah" be inset from the red border? 50px? No, only 30. The
margins collapse into each other. This is the proper behaviour and is
specified in the CSS 2 Recommendation, but sometimes browsers screw it up
a bit -- MSIE in particular.

However, when borders are added, then things change slightly. I think
adding a 1px border to the inner DIV in the above example, should
uncollapse the margins.

It's all fairly complicated, so I'm not surprised that browsers get it
wrong occasionally. Luckily, most of the time, you don't even need to think
about these things; they just work.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top