IE7 vs FF

Discussion in 'HTML' started by KiwiBrian, Oct 30, 2007.

  1. KiwiBrian

    KiwiBrian Guest

    Could anyone look at the following page:-

    http://homepages.ihug.co.nz/~briantoz/kiwitest/kiwi.html

    And explain why:-
    (1) FF 2.0.0.8 has the expected 30 px padding within the outer wrapper
    (10 px of wrapper padding plus 20 px of box margin) but the inner boxes are
    left-aligned rather than being centered.
    (2) IE6 and IE7 has the expected 30 pix of top padding within the outer
    wrapper, but only 20 px of bottom padding.

    Many thanks for any comments.
    KiwiBrian, Oct 30, 2007
    #1
    1. Advertising

  2. KiwiBrian wrote:
    > Could anyone look at the following page:-
    >
    > http://homepages.ihug.co.nz/~briantoz/kiwitest/kiwi.html
    >
    > And explain why:-
    > (1) FF 2.0.0.8 has the expected 30 px padding within the outer wrapper
    > (10 px of wrapper padding plus 20 px of box margin) but the inner boxes are
    > left-aligned rather than being centered.


    Firefox requires that the left and right margins be able to adjust
    themselves--that is, auto. You told it to use 20px.

    > (2) IE6 and IE7 has the expected 30 pix of top padding within the outer
    > wrapper, but only 20 px of bottom padding.
    >
    > Many thanks for any comments.
    >
    >
    Harlan Messinger, Oct 30, 2007
    #2
    1. Advertising

  3. KiwiBrian

    KiwiBrian Guest

    "Harlan Messinger" <> wrote in message
    news:...
    > KiwiBrian wrote:
    >> Could anyone look at the following page:-
    >>
    >> http://homepages.ihug.co.nz/~briantoz/kiwitest/kiwi.html
    >>
    >> And explain why:-
    >> (1) FF 2.0.0.8 has the expected 30 px padding within the outer wrapper
    >> (10 px of wrapper padding plus 20 px of box margin) but the inner boxes
    >> are left-aligned rather than being centered.

    >
    > Firefox requires that the left and right margins be able to adjust
    > themselves--that is, auto. You told it to use 20px.
    >
    >> (2) IE6 and IE7 has the expected 30 pix of top padding within the
    >> outer wrapper, but only 20 px of bottom padding.


    Thanks Harlan, you have completely cleared up that point, and I can see the
    sense of it.
    When the inner boxes are given a horizontal margin of "auto" FF behaves as
    expected.

    Now to clear up why the extra 10 pixels of wrapper bottom padding is
    occurring....
    KiwiBrian, Oct 30, 2007
    #3
  4. KiwiBrian

    dorayme Guest

    In article <fg7rei$k8i$>,
    "KiwiBrian" <> wrote:

    > Could anyone look at the following page:-
    >
    > http://homepages.ihug.co.nz/~briantoz/kiwitest/kiwi.html
    >
    > And explain why:- IE6 and IE7 has the expected 30 pix of
    > top padding within the outer wrapper, but only 20 px of
    > bottom padding.
    >


    It is not quite accurate to say "the expected 30 pix of top
    padding within the outer wrapper".

    Your "wrapper" has a top padding of 10px, while the "container"
    has a top margin of 20px. But, fair enough, you are meaning that
    there is 30px between the inside of the green border at the top
    and the outside of the top black border of the first contained
    div. And, expected, ditto, at the bottom.

    On my Winbox, IE 6 is showing your page exactly as in FF as far
    as my eye can tell? The bottom gap between the outside of the
    bottom border of the bottom contained rectangle and the top of
    the bottom green border of the pink wrapper looks to be the same
    as the corresponding at the top.

    I do not know about IE 7 though?

    --
    dorayme
    dorayme, Oct 30, 2007
    #4
  5. KiwiBrian

    KiwiBrian Guest

    "dorayme" <> wrote in message
    news:...
    > In article <fg7rei$k8i$>,
    > "KiwiBrian" <> wrote:
    >
    >> Could anyone look at the following page:-
    >>
    >> http://homepages.ihug.co.nz/~briantoz/kiwitest/kiwi.html
    >>
    >> And explain why:- IE6 and IE7 has the expected 30 pix of
    >> top padding within the outer wrapper, but only 20 px of
    >> bottom padding.
    >>

    >
    > It is not quite accurate to say "the expected 30 pix of top
    > padding within the outer wrapper".
    >
    > Your "wrapper" has a top padding of 10px, while the "container"
    > has a top margin of 20px. But, fair enough, you are meaning that
    > there is 30px between the inside of the green border at the top
    > and the outside of the top black border of the first contained
    > div. And, expected, ditto, at the bottom.
    >
    > On my Winbox, IE 6 is showing your page exactly as in FF as far
    > as my eye can tell? The bottom gap between the outside of the
    > bottom border of the bottom contained rectangle and the top of
    > the bottom green border of the pink wrapper looks to be the same
    > as the corresponding at the top.
    >
    > I do not know about IE 7 though?


    Thanks D.
    I have just checked my html again and also re-upoaded it to eliminate
    possible confusion.
    My IE7 and IE6 are both displaying only 20 px between the inside of the
    green border at the top and the outside of the top black border of the first
    contained div.
    However FF displays 30 px.
    They all display 30 px at the corresponding bottom location.
    I would love an explanation that makes any sort of sense.
    Brian
    KiwiBrian, Oct 30, 2007
    #5
  6. KiwiBrian

    dorayme Guest

    In article <fg8g1u$1oo$>,
    "KiwiBrian" <> wrote:

    > "dorayme" <> wrote in message
    > news:...
    > > In article <fg7rei$k8i$>,
    > > "KiwiBrian" <> wrote:


    >
    > Thanks D.
    > I have just checked my html again and also re-upoaded it to eliminate
    > possible confusion.
    > My IE7 and IE6 are both displaying only 20 px between the inside of the
    > green border at the top and the outside of the top black border of the first
    > contained div.
    > However FF displays 30 px.
    > They all display 30 px at the corresponding bottom location.
    > I would love an explanation that makes any sort of sense.
    > Brian


    OK, I can see the bigger gap (I think I better change the res on
    my winbox screen!) now, sorry. New arrangement and the screen is
    further (than my Mac screens) away from me...)

    In spite of a proper doctype and all. All I can say is that IE
    does some strange things with padding and margins that are not as
    laid down in the recommended rules at W3C. Someone may have a
    more detailed general explanation that shows a consistent rule
    for IE? I know this though, it is easy enough to be rid of by
    making a rule that IE only can see, to make IE6 and 7 add an
    extra 10px at the top where you want by adding 10px top margin
    *just* to the first of your three contained divs. You can do this
    via a conditional that only IE (6 and 7) can see.

    If it was just IE 6, this would do it I think:

    * html .firstContainer {margin-top: 30px;} at the end of your css
    and in the html for the first conatiner:

    <div class="container firstContainer">

    --
    dorayme
    dorayme, Oct 31, 2007
    #6
  7. KiwiBrian

    Ben C Guest

    On 2007-10-30, KiwiBrian <> wrote:
    [...]
    >>> http://homepages.ihug.co.nz/~briantoz/kiwitest/kiwi.html

    [...]
    > I have just checked my html again and also re-upoaded it to eliminate
    > possible confusion.
    > My IE7 and IE6 are both displaying only 20 px between the inside of the
    > green border at the top and the outside of the top black border of the first
    > contained div.
    > However FF displays 30 px.
    > They all display 30 px at the corresponding bottom location.
    > I would love an explanation that makes any sort of sense.


    It's just a bug in IE, which isn't too surprising as it's full of bugs.

    It should be 30px, because there is 10px of top padding on the container
    plus 20px of top margin on the thing inside it. Plenty of borders around
    the place, so no margin collapsing going on. Margins do not collapse
    with borders.
    Ben C, Oct 31, 2007
    #7
  8. KiwiBrian

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Tue, 30 Oct 2007 23:51:08
    GMT KiwiBrian scribed:

    > My IE7 and IE6 are both displaying only 20 px between the inside of
    > the green border at the top and the outside of the top black border of
    > the first contained div.
    > However FF displays 30 px.
    > They all display 30 px at the corresponding bottom location.
    > I would love an explanation that makes any sort of sense.
    > Brian


    Yeah, I played with it quite a bit trying to find an "elegant" workaround,
    but it's just like Ben C. said: a bug. I'd try something like dorayme
    suggested. Conditional Comments are usually a decent fix.

    --
    Neredbojias
    Just a boogar in the proboscis of life.
    Neredbojias, Oct 31, 2007
    #8
  9. KiwiBrian

    KiwiBrian Guest

    "Neredbojias" <> wrote in message
    news:Xns99DA78F05EBB6nanopandaneredbojias@85.214.62.108...
    > Well bust mah britches and call me cheeky, on Tue, 30 Oct 2007 23:51:08
    > GMT KiwiBrian scribed:
    >
    >> My IE7 and IE6 are both displaying only 20 px between the inside of
    >> the green border at the top and the outside of the top black border of
    >> the first contained div.
    >> However FF displays 30 px.
    >> They all display 30 px at the corresponding bottom location.
    >> I would love an explanation that makes any sort of sense.
    >> Brian

    >
    > Yeah, I played with it quite a bit trying to find an "elegant" workaround,
    > but it's just like Ben C. said: a bug. I'd try something like dorayme
    > suggested. Conditional Comments are usually a decent fix.
    >


    Thanks Ben and N. I was just trying to get a handle on the logic of the
    situation but am "happy" now that the groups heavyweights have confirmed
    that it is just a bug and there is nothing specific to be learned from the
    example.
    IEx seems to be buggy in various ways when a padding butts up against a
    margin.
    So far my tests have indicated that with a strict doctype, IE6 and IE7 seem
    to be consistent in (mis)behaving in similar ways.
    Brian.
    KiwiBrian, Oct 31, 2007
    #9
    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. =?Utf-8?B?RGFu?=
    Replies:
    7
    Views:
    1,000
  2. Replies:
    0
    Views:
    405
  3. kayodeok

    IE7

    kayodeok, Mar 4, 2004, in forum: HTML
    Replies:
    3
    Views:
    534
    Toby A Inkster
    Mar 5, 2004
  4. mscir
    Replies:
    1
    Views:
    401
    Henry
    Mar 20, 2005
  5. 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
Loading...

Share This Page