HighDots Forums  

IE 7 Margin Problem

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss IE 7 Margin Problem in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
dorayme
 
Posts: n/a

Default IE 7 Margin Problem - 03-14-2008 , 11:28 PM






In IE 7, is there a bottom margin showing in

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

Reply With Quote
  #2  
Old   
GTalbot
 
Posts: n/a

Default Re: IE 7 Margin Problem - 03-23-2008 , 01:03 PM






On 15 mar, 00:28, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
Quote:
In IE 7, is there a bottom margin showing in
http://netweaver.com.au/alt/IEBottom...n_problem.html

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

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


Reply With Quote
  #3  
Old   
GTalbot
 
Posts: n/a

Default Re: IE 7 Margin Problem - 03-23-2008 , 01:21 PM



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/

Reply With Quote
  #4  
Old   
GTalbot
 
Posts: n/a

Default Re: IE 7 Margin Problem - 03-23-2008 , 04:00 PM



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 help 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/

Reply With Quote
  #5  
Old   
dorayme
 
Posts: n/a

Default Re: IE 7 Margin Problem - 03-24-2008 , 09:44 PM



In article
<71b79450-0cff-4ba1-a9c5-a91f8c366989 (AT) a1g2000hsb (DOT) googlegroups.com>,
GTalbot <newsgroup (AT) gtalbot (DOT) org> wrote:

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


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.