Re: IE 7 Margin Problem

23/03/2008, 19h03

On 15 mar, 00:28, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In IE 7, is there a bottom margin showing in

http://netweaver.com.au/alt/IEBottom...n_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/

23/03/2008, 19h21

Dorayme,

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.

Regards, Gérard
--
Internet Explorer 8 bugshttp://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

23/03/2008, 22h00

Dorayme,

Internet Explorer 8 bugs: bug 48
Top and bottom margins unexpectedly not rendered in Internet Explorer
8
http://www.gtalbot.org/BrowserBugsSe...IE8Bugs/#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/BrowserBugsSe...E7Bugs/#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 everyone or will make
sure Microsoft fixes this bug once for all, for everyone and forever.

Regards, Gérard
--
Internet Explorer 8 bugs
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

23/03/2008, 19h03	#1 (permalink)
GTalbot Messages: n/a Hébergeur:	Re: IE 7 Margin Problem On 15 mar, 00:28, dorayme <doraymeRidT...@optusnet.com.au> wrote: > In IE 7, is there a bottom margin showing in http://netweaver.com.au/alt/IEBottom...n_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/

23/03/2008, 19h21	#2 (permalink)
GTalbot Messages: n/a Hébergeur:	Re: IE 7 Margin Problem Dorayme, 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. Regards, Gérard -- Internet Explorer 8 bugshttp://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

23/03/2008, 22h00	#3 (permalink)
GTalbot Messages: n/a Hébergeur:	Re: IE 7 Margin Problem Dorayme, Internet Explorer 8 bugs: bug 48 Top and bottom margins unexpectedly not rendered in Internet Explorer 8 http://www.gtalbot.org/BrowserBugsSe...IE8Bugs/#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/BrowserBugsSe...E7Bugs/#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 everyone or will make sure Microsoft fixes this bug once for all, for everyone and forever. Regards, Gérard -- Internet Explorer 8 bugs http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email