IE 7 Margin Problem
dorayme
<http://netweaver.com.au/alt/IEBottomMarginProblem/ie7_margin_prob
lem.html>
please in this test case.
I have not identified this bug, if it is one and if anyone has
come across it, what are best ways of defeating it? I can think
of practical ways (and have implemented them already elsewhere),
but I suspect that there is better. (eg, an extra div, empty with
a height at the bottom. Not pretty!)
--
dorayme
GTalbot
> In IE 7, is there a bottom margin showing in
http://netweaver.com.au/alt/IEBottomMarginProblem/ie7_margin_problem.html
> I have not identified this bug, if it is one and if anyone has
> come across it, what are best ways of defeating it?
Yes, there is definitely an issue with IE 7 and IE 8. It certainly
looks like a bug to me.
In IE 7, I see no bottom margin below the red bottom-border.
In IE 8 beta 1, I see no top margin at the top of the red top-border
and I see no bottom margin below the red bottom-border.
Firefox 2.0.0.12 and Opera 9.26 report (via DOM inspector and
Developer console) a 20px margin-bottom.
Safari 3.1, Firefox 2.0.0.12 and Opera 9.26 all render a 20px bottom
margin below the red bottom-border and a 20px top margin at the top of
the red top-border.
Best way to work around these strange - definitely buggy - behaviors?
First off, I would remove #mainWrapper and transpose its CSS rule to
the body element. Your #mainWrapper is in fact duplicating the role of
<body>.
>I can think
> of practical ways (and have implemented them already elsewhere),
> but I suspect that there is better. (eg, an extra div, empty with
> a height at the bottom. Not pretty!)
Definitely *_not_* an extra div. If there is a bug, in particular a
CSS bug, then try to workaround it with CSS, not by adding more
markup. Use conditional comment if there is no other more reasonable,
rational solution... otherwise invite your visitors to switch to a
better browser.
Dorayme, keep monitoring this thread... I'll get back to you on
this... most possibly with a bug report to Microsoft IE team and with
a bug entry at my website.
Regards, Gérard
--
Internet Explorer 8 bugs
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
GTalbot
I can still reproduce the bug (non-rendered bottom margin below red
bottom-border) in IE 7 and IE 8 beta 1 when using these rules:
Absolute length units for bottom margin (and top)
body
{
margin: 0;
}
#mainWrapper
{
border: 1px solid red;
margin: 20px 50px;
}
Relative length units for bottom margin (and top)
body
{
margin: 0;
}
#mainWrapper
{
border: 1px solid red;
margin: 2% 5%;
}
(
there is no padding on body, except for old Opera versions; font-size:
100% is not useful or important in your testcase; min-width and max-
width declarations can be replaced more efficiently, to reduce
testcase complexity; I am following the
CSS2.1 Test Case Authoring Guidelines
http://www.w3.org/Style/CSS/Test/guidelines.html
)
I think this is a flawed, incorrect adjoining margin collapsing
implementation... at least in IE 8 beta 1. I'm not sure what's
happening in IE 7 though. I must say I'm using the emulate IE 7
feature in IE 8 and I know there are some (not many and supposedly not
important) differences between the real IE 7 and the emulate-IE7
feature in IE 8 beta 1.
GTalbot
Internet Explorer 8 bugs: bug 48
Top and bottom margins unexpectedly not rendered in Internet Explorer
8
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/#bug48
has 3 testcases. Only the first testcase makes IE 8 not render both
top and bottom margins.
Internet Explorer 7 bugs: bug 119
Bottom margin unexpectedly not rendered in Internet Explorer 7
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug119
has 3 testcases.
You may want to report the bug yourself to Microsoft with its "Report
a webpage problem" IE add-on: this can/will help everyone or will make
sure Microsoft fixes this bug once for all, for everyone and forever.
dorayme
<71b79450-0cff-4ba1...@a1g2000hsb.googlegroups.com>,
GTalbot <news...@gtalbot.org> wrote:
> Dorayme,
>
> Internet Explorer 8 bugs: bug 48
> Top and bottom margins unexpectedly not rendered in Internet Explorer
> 8
> http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/#bug48
> has 3 testcases. Only the first testcase makes IE 8 not render both
> top and bottom margins.
>
> Internet Explorer 7 bugs: bug 119
> Bottom margin unexpectedly not rendered in Internet Explorer 7
> http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug119
> has 3 testcases.
>
> You may want to report the bug yourself to Microsoft with its "Report
> a webpage problem" IE add-on: this can/will help everyone or will make
> sure Microsoft fixes this bug once for all, for everyone and forever.
>
Thank you for this Gerard. I have read all your posts on this carefully.
I will report as you suggest. The case I made up was just to illustrate
the margin problem. On the site from which it occurs, I will be giving
IE 7 a conditional comment css instruction to give some bottom padding
to the body and not using any totally unnecessary divs to overcome the
bug.
On your note about emulation, I had an odd experience recently where one
person I know was seeing a float hanging out of a container on IE6. It
was not being duplicated on my own winbox which has a real IE 6 app. The
machine on which the float hung out instead of being contained within
the parent was seen on IE6 *as emulated via IE7*.
--
dorayme