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

Discussion in 'HTML' started by Mike Barnard, Mar 4, 2007.

  1. Mike Barnard

    Mike Barnard Guest

    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.
    Mike Barnard, Mar 4, 2007
    #1
    1. Advertising

  2. Re: Firefox and IE7 - different displays of course. Explainplease?

    Mike Barnard wrote:

    > 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:

    </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!
    Toby A Inkster, Mar 4, 2007
    #2
    1. Advertising

  3. Mike Barnard

    Mike Barnard Guest

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

    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:


    > </style>


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

    <time passes...>

    >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. :)
    Mike Barnard, Mar 4, 2007
    #3
  4. Re: Firefox and IE7 - different displays of course. Explainplease?

    Mike Barnard wrote:

    > 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!
    Toby A Inkster, Mar 5, 2007
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Chumley Walrus
    Replies:
    1
    Views:
    12,160
    =?Utf-8?B?QnJpYW4gQnJvd24=?=
    Dec 16, 2004
  2. Jeff Louella

    IE7 on XP vs IE7 on Vista

    Jeff Louella, Mar 1, 2007, in forum: HTML
    Replies:
    9
    Views:
    499
    Adrienne Boswell
    Mar 2, 2007
  3. John
    Replies:
    6
    Views:
    310
    Blinky the Shark
    Sep 27, 2007
  4. BillE
    Replies:
    4
    Views:
    558
    Christiano
    Jul 3, 2008
  5. eagle

    Grids and displays on different monitors

    eagle, Aug 2, 2005, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    113
    eagle
    Aug 9, 2005
Loading...

Share This Page