gap rendered in Firefox 3 but not in IE 7

Discussion in 'HTML' started by Tarscher, Jun 10, 2008.

  1. Tarscher

    Tarscher Guest

    HI all,

    http://topvolleyantwerpen.be/content/project/missie renders a gap
    between the menu and the content in Firefox but not in Internet
    Explorer 7 .

    I tried to decrease the heigth of the top div (containing the logo and
    menu) but the gap is always rendered between the content and the
    menu.

    Someone has an idea why?

    -Stijn
     
    Tarscher, Jun 10, 2008
    #1
    1. Advertising

  2. Tarscher

    GTalbot Guest

    On 10 juin, 21:48, Gus Richter <> wrote:

    >
    > The reason is due to Collapsing Margins. Google for it.
    > To check if it is, place this rule into your stylesheet:
    >
    >     * {margin:0  !important;}
    >
    > --
    > Gus


    Gus,

    The reason is due to incorrect implementations of adjoining margin
    collapsing in Internet Explorer 7 and lower. It's very important to
    state this because those incorrect implementations have been fixed in
    IE 8 beta 1.

    And the "solution" you offered is extremely questionable because it
    abuses the CSS parser as all elements in the document, even inline
    elements which ignore margin. This will lead to more bloated CSS code
    as removing margin (all 4 sides) to all elements (including all those
    who by default have margins) is likely to create the need to restore
    some for all block-level elements. IMO, you gave a bad advice.

    At the very least, a much more targeted, contextual and parcimonious
    solution was to offer something like
    Neredbojias proposed.

    Gérard
     
    GTalbot, Jun 13, 2008
    #2
    1. Advertising

  3. Tarscher

    GTalbot Guest

    On 13 juin, 15:33, Gus Richter <> wrote:
    > GTalbot wrote:
    >
    > > At the very least, a much more targeted, contextual and parcimonious
    > > solution was to offer something like
    > > Neredbojias proposed.

    >
    > > Gérard

    >
    > Gérard,
    >
    > The OP specifically asked _why_ the problem was happening.
    > Neredbojias provided the _solution_ which was excellent.
    > I provided the _reason why_ and _help to determine the why_.
    >
    > --
    > Gus
    > "..... but give them the tools ....."


    I do not think you did not provide the reason actually.
    The reason is an incorrect implementation (a bug, if you prefer) of
    adjoining margin collapsing in IE 5, IE 6, IE 7.
    There is no buggy implementation in Firefox 1, Firefox 2, Firefox 3,
    Opera 9, Safari 3, Internet Explorer 8, Hv3 TKHTML, Icab 3+, etc..

    Regards, Gérard
     
    GTalbot, Jun 14, 2008
    #3
  4. Tarscher

    GTalbot Guest

    On 13 juin, 15:24, Gus Richter <> wrote:
    > GTalbot wrote:
    > > On 10 juin, 21:48, Gus Richter <> wrote:

    >
    > >> The reason is due to Collapsing Margins. Google for it.
    > >> To check if it is, place this rule into your stylesheet:

    >
    > >>     * {margin:0  !important;}

    >
    > >> --
    > >> Gus

    >
    > > Gus,

    >
    > > The reason is due to incorrect implementations of adjoining margin
    > > collapsing in Internet Explorer 7 and lower. It's very important to
    > > state this because those incorrect implementations have been fixed in
    > > IE 8 beta 1.

    >
    > > And the "solution" you offered is extremely questionable because it
    > > abuses the CSS parser as all elements in the document, even inline
    > > elements which ignore margin. This will lead to more bloated CSS code
    > > as removing margin (all 4 sides) to all elements (including all those
    > > who by default have margins) is likely to create the need to restore
    > > some for all block-level elements. IMO, you gave a bad advice.

    >
    > > At the very least, a much more targeted, contextual and parcimonious
    > > solution was to offer something like
    > > Neredbojias proposed.

    >
    > > Gérard

    >
    > You misunderstood my posting.
    > The rule which I presented is only, as I said, a _check_ , and therefore
    > only a _temporary_ thing.


    Even that is not true. Your CSS rule removes all the margins on all
    elements, even those which have no relation with the noticed gap. You
    can easily create side effects with such kind of rule. You use the
    universal selector, you know... You didn't just use a selector on an
    unique DOM element.

    > Not presented as a fix at all, but simply a
    > diagnostic tool.


    Well, that is a bad diagnostic tool. An unreliable one. A not-
    trustworthy diagnostic tool.

    Gérard
     
    GTalbot, Jun 14, 2008
    #4
  5. Tarscher

    dorayme Guest

    In article
    <>,
    GTalbot <> wrote:

    > On 13 juin, 15:24, Gus Richter <> wrote:
    > > GTalbot wrote:
    > > > On 10 juin, 21:48, Gus Richter <> wrote:

    > >
    > > >> The reason is due to Collapsing Margins. Google for it.
    > > >> To check if it is, place this rule into your stylesheet:

    > >
    > > >>     * {margin:0  !important;}

    > >

    ....
    > > You misunderstood my posting.
    > > The rule which I presented is only, as I said, a _check_ , and therefore
    > > only a _temporary_ thing.

    >
    > Even that is not true.


    What is not true? That Gus intended it as a temporary thing? That it
    could be for temporary use?


    > Your CSS rule removes all the margins on all
    > elements, even those which have no relation with the noticed gap.


    That does not mean it is useless as a quick check on something, to give
    a clue on how to investigate further.

    > You
    > can easily create side effects with such kind of rule.


    Like what? It is completely irrelevant to answer with cases of side
    effects of the permanent use of the universal selector.

    > You use the
    > universal selector, you know... You didn't just use a selector on an
    > unique DOM element.
    >
    > > Not presented as a fix at all, but simply a
    > > diagnostic tool.

    >
    > Well, that is a bad diagnostic tool. An unreliable one. A not-
    > trustworthy diagnostic tool.
    >


    You appear to be ignoring the distinction between permanent and
    temporary that Gus has indicated. I have often used * {margin: 0;
    padding: 0;" for a few minutes to give me helpful clues or to remove
    irrelevant effects of margins and padding on some problem that has some
    other basis.

    --
    dorayme
     
    dorayme, Jun 14, 2008
    #5
  6. Tarscher

    GTalbot Guest

    Gus Richter a écrit :
    > GTalbot wrote:
    > >> You misunderstood my posting.
    > >> The rule which I presented is only, as I said, a _check_ , and therefore
    > >> only a _temporary_ thing.

    > >
    > > Even that is not true. Your CSS rule removes all the margins on all
    > > elements, even those which have no relation with the noticed gap. You
    > > can easily create side effects with such kind of rule. You use the
    > > universal selector, you know... You didn't just use a selector on an
    > > unique DOM element.
    > >
    > >> Not presented as a fix at all, but simply a
    > >> diagnostic tool.

    > >
    > > Well, that is a bad diagnostic tool. An unreliable one. A not-
    > > trustworthy diagnostic tool.
    > >
    > > G�rard

    >
    > Too bad you haven't tried it yourself, but then even if you had, you can
    > use or disregard. It works very well for me.
    >
    > BTW, you seem to have concern that the universal selector affects other
    > "side effects". This is true, since it removes _all_ margins,


    it removes _all_ margins on **each and all elements** of the document.
    Not just all the margins of one element.


    > but who
    > cares? It is only to temporarily look at the "noticed gap" area.


    You obviously don't care. Universal selector usage is highly
    suspicious of over-killing and over-declaring in a stylesheet.

    >
    > --
    > Gus


    What you coded is a risky, is not recommendable, is not reliable and
    is not trustworthy way to detect a problem or to propose a solution.
    Again, you are removing all margins of all elements in a document. You
    are not removing the margin-top of a single element. You mis-target.
    You over-remove all margins on all elements, even on elements which do
    not have a margin anyway.

    Gérard
     
    GTalbot, Jun 15, 2008
    #6
  7. Tarscher

    GTalbot Guest

    Gus Richter a écrit :
    > GTalbot wrote:
    > >
    > > I do not think you did not provide the reason actually.

    >
    > Two negatives results in a positive. ;-)
    >


    I misworded that. I think you did not provide the reason actually.
    The reason is an incorrect implementation (a bug, if you prefer) of
    adjoining margin collapsing in IE 5, IE 6, IE 7.
    There is no buggy implementation in Firefox 1, Firefox 2, Firefox 3,
    Opera 9, Safari 3, Internet Explorer 8, Hv3 TKHTML, Icab 3+, etc..


    > I agree that IE is the buggy culprit here.


    You did not mention that.

    > The fact that IE does not
    > collapse margins properly


    You did not provide the correct reason.

    > only complicated the OPs problem in that he
    > expected rendering as per IE and was therefore surprised that Firefox
    > rendered with a gap. He wondered why this was so and his attempts to
    > remove the gap all failed. He desired no gap. There are several
    > solutions possible to removing the gap in conforming browsers (Firefox
    > here) and one was proposed.
    >
    > I correctly answered the OPs query by informing him that the gap on his
    > page as rendered by conforming browsers (Firefox here) is because of
    > "Collapsing Margins".
    >
    > Additionally I provided a small tool


    and it was a bad tool, a bad way, a bad detection method.

    Gérard
     
    GTalbot, Jun 15, 2008
    #7
  8. Tarscher

    GTalbot Guest

    dorayme a écrit :


    > > Your CSS rule removes all the margins on all
    > > elements, even those which have no relation with the noticed gap.

    >
    > That does not mean it is useless as a quick check on something, to give
    > a clue on how to investigate further.


    Then use a targeted, specific check on the margin-top of the targeted
    element. You do not need to over-use, abuse, over-kill. By relying on
    the universal selector, you still do not know which element had an
    effect. You do not know what actually cause the gap to be removed.
    It's very bad practice and I see this sort of zero-ing the browser
    stylesheets more and more often in stylesheets which in fact is more
    about overcoming the flaw and incorrect implementation of IE 5, IE 6,
    IE 7 than about uniforming just a few elements that have different
    defaults in browsers.

    >
    > > You
    > > can easily create side effects with such kind of rule.

    >
    > Like what? It is completely irrelevant to answer with cases of side
    > effects of the permanent use of the universal selector.
    >


    Any browser could have differences of margins and padding for
    elements. Like Eric Meyer said, using the universal selector on all
    elements will affect text inputs and textareas. It's besides the
    point: do not use a canon when all you just need is a fly-swatter. Do
    not use a class when using an id is more to the point, more targeted.

    Avoid Universal Rules!
    http://developer.mozilla.org/en/docs/Writing_Efficient_CSS#Avoid_Universal_Rules.21

    because it's inefficient!


    > > You use the
    > > universal selector, you know... You didn't just use a selector on an
    > > unique DOM element.
    > >
    > > > Not presented as a fix at all, but simply a
    > > > diagnostic tool.

    > >
    > > Well, that is a bad diagnostic tool. An unreliable one. A not-
    > > trustworthy diagnostic tool.
    > >

    >
    > You appear to be ignoring the distinction between permanent and
    > temporary that Gus has indicated.


    Lots of people in their stylesheets are now using such "'TEMPORARY'"
    solution or detection method. And that's bad programming, bad
    recommendation, bad detection method.

    Gérard
     
    GTalbot, Jun 15, 2008
    #8
  9. Tarscher

    GTalbot Guest

    Gus Richter a écrit :

    > I correctly answered the OPs query by informing him that the gap on his
    > page as rendered by conforming browsers (Firefox here) is because of
    > "Collapsing Margins".


    Load these pages in IE 7, Firefox 2+, Opera 9.x, Safari 3.x, Hv3
    TKHTML, Icab 3+.

    http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/BackgroundAndMarginBug.html
    http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/BackgroundAndMarginBug2.html
    http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/BackgroundAndMarginBug3.html

    Then apply your "detection tool" and the rendered page will be
    incorrect, misrendered: removing the body and the <div>'s margins are
    not justified, not correct. Adjoining margin collapsing is *not* the
    same as absence of margin or margin: 0 everywhere for every element
    (even inline elements!).

    Your so-called detection tool can be found in many webpages'
    stylesheets and in articles (by google-ing about it, I found *many* eg
    http://leftjustified.net/journal/2004/10/19/global-ws-reset) promoting
    it as a way to reset just a few browser default differences.

    The bottom line I am saying is that if you need to apply/set the
    padding left and margin left to a few elements (like lists and list-
    items), then you shouldn't use the universal selector.

    > Additionally I provided a small tool to be able to quickly determine if
    > a gap problem is due to collapsing margins, or not. You apparently don't
    > like the tool - no problem, but it works for me.


    It does not work for me and for cases involving adjoining margin
    collapsing. Resetting margins to 0 and collapsing margins is *not* the
    same thing.

    Gérard
     
    GTalbot, Jun 15, 2008
    #9
  10. Tarscher

    dorayme Guest

    In article
    <>,
    GTalbot <> wrote:

    > dorayme a écrit :
    >
    >
    > > > Your CSS rule removes all the margins on all
    > > > elements, even those which have no relation with the noticed gap.

    > >
    > > That does not mean it is useless as a quick check on something, to give
    > > a clue on how to investigate further.

    >
    > Then use a targeted, specific check on the margin-top of the targeted
    > element. You do not need to over-use, abuse, over-kill.


    "Overuse, abuse, overkill" for zeroing margins and/or padding with a
    universal selector for a quick check? These strong words sound more
    appropriate when the target is something more substantial than a
    temporary diagnostic tool of elimination.

    In many cases one does not quite know what element to target. It is
    hardly abusing anything if it is used to eliminate something from the
    enquiring diagnostic mind.

    I understand your view about the dangers of zeroing margins and paddings
    by use of the universal selector. But this is not at all relevant. No
    amount of describing the evils of such universal zeroing intended for
    permanency will be obviously relevant to its use as a temporary measure
    of diagnosis.

    Sometimes, to locate some pesky problem, I have simply deleted half of a
    stylesheet, or all but one of several. Ditto with HTML. It is not
    something a rational person would do as a permanent fix, but it might
    assist one to narrow the area to be searched for some trouble. It would
    be hardly helpful for someone to be alarmed at this as if this is how
    the site will end up, chopped in two somehow!

    --
    dorayme
     
    dorayme, Jun 15, 2008
    #10
  11. Tarscher

    dorayme Guest

    In article <Xns9ABE1747DD61neredbojiasnano@85.214.90.236>,
    Neredbojias <me@http://www.neredbojias.net/_eml/fliam.php> wrote:

    > On 14 Jun 2008, dorayme <> wrote:
    >
    > >> > > Your CSS rule removes all the margins on all
    > >> > > elements, even those which have no relation with the noticed gap.
    > >> >
    > >> > That does not mean it is useless as a quick check on something, to
    > >> > give a clue on how to investigate further.
    > >>
    > >> Then use a targeted, specific check on the margin-top of the targeted
    > >> element. You do not need to over-use, abuse, over-kill.

    > >
    > > "Overuse, abuse, overkill" for zeroing margins and/or padding with a
    > > universal selector for a quick check? These strong words sound more
    > > appropriate when the target is something more substantial than a
    > > temporary diagnostic tool of elimination.
    > >
    > > In many cases one does not quite know what element to target. It is
    > > hardly abusing anything if it is used to eliminate something from the
    > > enquiring diagnostic mind.
    > >
    > > I understand your view about the dangers of zeroing margins and
    > > paddings by use of the universal selector. But this is not at all
    > > relevant. No amount of describing the evils of such universal zeroing
    > > intended for permanency will be obviously relevant to its use as a
    > > temporary measure of diagnosis.
    > >

    ....
    >
    > If one has no idea what the problem is, a
    > universal change will hardly really help,


    If a 2 sec zeroing of the margins makes the unwanted phenomena
    disappear, you know it might well be a margin problem and you can look
    more locally then. So your contribution makes no reasoned sense to me.

    --
    dorayme
     
    dorayme, Jun 15, 2008
    #11
  12. Tarscher

    dorayme Guest

    In article <Xns9ABE26D046BA9neredbojiasnano@85.214.90.236>,
    Neredbojias <me@http://www.neredbojias.net/_eml/fliam.php> wrote:

    > On 15 Jun 2008, dorayme <> wrote:
    >
    > >> > I understand your view about the dangers of zeroing margins and
    > >> > paddings by use of the universal selector. But this is not at all
    > >> > relevant. No amount of describing the evils of such universal zeroing
    > >> > intended for permanency will be obviously relevant to its use as a
    > >> > temporary measure of diagnosis.
    > >> >

    > > ...
    > >>
    > >> If one has no idea what the problem is, a
    > >> universal change will hardly really help,

    > >
    > > If a 2 sec zeroing of the margins makes the unwanted phenomena
    > > disappear, you know it might well be a margin problem and you can look
    > > more locally then. So your contribution makes no reasoned sense to me.

    >
    > Not really. If one element has unwanted/inadvertant/mistaken padding and
    > the adjacent element has a wanted default margin, you've just "identified"
    > the wrong problem thru carelessness.


    What has this got to do with using say * {margin: 0} for less than 2
    seconds (in which time you do *not* try to identify anything positively
    or "fix" anything or run into any dangers whatsoever. You just look to
    see if some unwanted look is affected for the better. If you think it is
    a waste of time, make sure you never do it, not even to waste 2 sec.
    Others will use it and it will often be worth the 2 secs.

    To see this point, you need to understand the spirit in which it is used
    and not jump to too many conclusions.

    --
    dorayme
     
    dorayme, Jun 15, 2008
    #12
  13. Tarscher

    dorayme Guest

    In article <Xns9ABE98CB48F77neredbojiasnano@85.214.90.236>,
    Neredbojias <me@http://www.neredbojias.net/_eml/fliam.php> wrote:

    > On 15 Jun 2008, dorayme <> wrote:
    >
    > >> > If a 2 sec zeroing of the margins makes the unwanted phenomena
    > >> > disappear, you know it might well be a margin problem and you can
    > >> > look more locally then. So your contribution makes no reasoned
    > >> > sense to me.
    > >>
    > >> Not really. If one element has unwanted/inadvertant/mistaken padding
    > >> and the adjacent element has a wanted default margin, you've just
    > >> "identified" the wrong problem thru carelessness.

    > >
    > > What has this got to do with using say * {margin: 0} for less than 2
    > > seconds (in which time you do *not* try to identify anything
    > > positively or "fix" anything or run into any dangers whatsoever. You
    > > just look to see if some unwanted look is affected for the better.

    >
    > Well, I never have used it, and even though it's only 2 seconds, 2 seconds
    > wasted here and 2 seconds wasted there...


    You are right not to use a technique that you do not understand in the
    slightest way.

    --
    dorayme
     
    dorayme, Jun 15, 2008
    #13
    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. Thorben Grosser

    Compensating the Firefox - MSIE gap

    Thorben Grosser, Feb 19, 2005, in forum: HTML
    Replies:
    7
    Views:
    519
  2. the idiot
    Replies:
    2
    Views:
    455
    the idiot
    May 15, 2005
  3. chlori

    Gap in IE, no gap in FF

    chlori, Jan 19, 2006, in forum: HTML
    Replies:
    1
    Views:
    457
    kchayka
    Jan 19, 2006
  4. Replies:
    4
    Views:
    4,156
    Jonathan N. Little
    May 24, 2006
  5. André
    Replies:
    4
    Views:
    458
    André
    Jun 19, 2008
Loading...

Share This Page