23 replies [Last post]
Ornette
Offline
Enthusiast
Last seen: 8 years 13 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Hi,

Further to my last thread about creating auto-reducing percentage width tables within percentage width div containers, per the resize of the window viewport (solution - use padding in containing element, but only with the 'border-box' box-model... Wink)

... I now have a problem with margin collapse.

As mentioned at the end of that thread, I noticed that margin collapse was not working properly between the stacked tables
within the div container in Mozilla Firefox, but working as expected in IE.

Here's the page in question:

Original, (renamed) incorrect link!
http://www.tradezone.ltd.uk/testsite/template_v2.1.6.1.htm Having complained about the situation already, I have already persued the only solution as regrettabliy obvious to me - put a div around the table and have the margin on that... :roll: ...honestly, I thought Mozilla was promising clean, utilitarian html code...

As you can see the stacked tables all now have equal margins between them on the top and bottom, in both IE and Mozilla. But perhaps you can see now another problem, because I have already taken the liberty of putting an outlining border on the div columns - margin collapse is not occuring between the div columns and div-wrapped tables!

What is going on, or am I just completely stupid?

- - - - - - - - - - - -
Edited: incorrect htm files were referenced! renamed the links and the htm files...

[/][/]
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Margin collapse will not occur?!?

Shock

You say IE is collapsing margins properly and FF isn't?

What is a stacked table?
Adjacent or nested?

PS. I am going outside to check for a blue moon and flying bacon Smile

Ornette
Offline
Enthusiast
Last seen: 8 years 13 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Margin collapse will not occur?!?

If you see the links you will see what I mean - two div columns, each stacked up with tables one on top of another.

From my last thread, it seems I have discovered that Mozilla uses a 3rd, non-standard box model just for their tables - the 'margin-box' model...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Margin collapse will not occur?!?

I did look at your two pages and I have (sort of) followed your other threads. Which margins do you think should collapse?

Can you post an html snippet which highlights the barebones of the issue?

Thanks.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 56 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Margin collapse will not occur?!?

Define stacked tables. I see only a single table with a plethora of unneeded and unsemantic markup. The page lacks a DTD which throws browsers into quirks mode where who knows what rules apply.

As to margin-collapse, Firefox tables have no collapsable margins in the default, while the div margins are all prevented from collapse by borders. IE improperly collapses protected margins if the protected element has hasLayout==true.

/*default Firefox styles for <table>*/

table {
  display: table;
  border-spacing: 2px;
  border-collapse: separate;
  margin-top: 0;
  margin-bottom: 0;
  -moz-box-sizing: border-box;
  text-indent: 0;
}

The box sizing thing, a css3 property, abides by w3 table sizing rules while allowing you to override by declaring table {-moz-box-sizing: content-box;}.

As Chris sz, show us a minimal test case, 'cause I'm not seeing what it is you're talking about.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Margin collapse will not occur?!?

Neither of your corrected links work for me.

Ornette
Offline
Enthusiast
Last seen: 8 years 13 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Margin collapse will not occur?!?

Chris..S wrote:
Neither of your corrected links work for me.

Sorry... should be finalised now...

kk5st wrote:
Define stacked tables. I see only a single table with a plethora of unneeded and unsemantic markup.

Ok, Gary, I just realised that the two links I posted up were using my 'new' template, in which I substituted <table> tags in the HTML code for <div> tags and then worked CSS to specify display: table type properties... a work in progress...

As such, I replaced the links as to reference my original, table-using code, which (having checked my other thread), should have initially been my template v2.1.6 firstly, and then an update to take it to template v2.1.7. Should now be in order...

The "plethora of unneeded and unsemantic markup" was my attempt, whilst working through the concept of
display: table-cell div's, to correctly emulate a table construct (new div elements were needed to stand in for <tr> tags, and so on...)

"Stacked tables" - well that was supposed to mean a vertical column of multiple table constructs, one after the other, within either of the two floated div elements. What you actually saw was what I suppose you could call 'stacked table-emulating divs'...

I hope we are on the same wavelength now Laughing out loud

kk5st wrote:
The page lacks a DTD which throws browsers into quirks mode where who knows what rules apply.

OK the thing is, that at the end of my last thread I realised that I would have to enable 'border-box' mode for both IE and Mozilla, and removed the doctype accordingly:

It was all well & good using the -moz-box-sizing property for Mozilla, but for IE I had to enable quirks mode. Therefore, the missing doctype.

kk5st wrote:
/*default Firefox styles for <table>*/ 
table { 
  display: table; 
  border-spacing: 2px; 
  -moz-box-sizing: border-box; 
}

Unfortunately, this is not true and Mozilla does not have 'border-box' for its tables. It apparently has 'margin-box' for its tables! This was the entire issue that was at the core of my last thread. What can I say, the evidence is there to see!

(It also doesn't appear to have 2px spacing, either. More like 0px...)

However, your point about a missing doctype causing all kinds of unpredictable behaviour, point well taken, and I will check to see if this is what is preventing my collapsing margins, but I am pretty sure it isn't.

Watch this space

Cool

[/]
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Margin collapse will not occur?!?

You still need to provide us a minimal snippet Wink

You can have a doctype and throw IE into quirks mode by including a processing instruction before the doctype.

e.g.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ornette
Offline
Enthusiast
Last seen: 8 years 13 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Margin collapse will not occur?!?

Chris..S wrote:
You still need to provide us a minimal snippet Wink

Eh? Lol?

Chris..S wrote:
You can have a doctype and throw IE into quirks mode by including a processing instruction before the doctype.

Ahhh - thanks. Will remember that.

Anyhow - here you go - two very clear examples of the margin collapse problem I am experiencing.

Example 1:

Mozilla will not collapse the margins! It is clearly using a 'margin-box' model for table elements - why?

Example 2:

I have to wrap each table element in a DIV and put the margin on that instead - why? What a waste of time. Is this Mozilla's counter attempt to sabortage table-layouts? Its a joke.

However on doing it this way I also notice that Mozilla collapses the margins between the contained tables and the containing element as well... which clearly IE isn't doing...

...

[/][/]
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Margin collapse will not occur?!?

I couldn't wait any longer, so I tried my own example

table styling:

table {
  margin: 25px auto;
  background: #fdd;
  border: 3px dashed #900;
  width: 300px;
  height: 164px;
  padding: 15px;
}

(1) FF 1.0.x isn't collapsing table margins. Spacing between first and second tables is 50px, not the 25px it should be if the margins were being collapsed. Spacing between table and intervening element is the sum of their vertical margins (35px) not 25px as it would be if they were collapsed. Total distance between table 2 and 3 is 100px - 25px margin-bottom, 10px margin-top, 30px height, 10px margin-bottom, 25px margin-top.

(2) Height of the table is correct at 174px (for border-box model).

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Margin collapse will not occur?!?

Well indeed you do appear to be right, however could you not just do table{margin:10px auto 0;} and do away with the divs or was that simply to demonstrate a point.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Margin collapse will not occur?!?

Ornette wrote:
I have to wrap each table element in a DIV and put the margin on that instead - why? What a waste of time. Is this Mozilla's counter attempt to sabortage table-layouts? Its a joke.

There is no need to imply any maliciousness. Its looks like a bug (as opposed to a feature). Poorly programmed and/or poorly tested perhaps.

Mozilla has a public bugzilla, check there and if its not been reported previously - report it yourself. That will give them a chance to improve their product.

For margin-collapsing and IE, there are several pages on the web detailing what is happening. The best are by Bruno (if I have remembered the name correctly). And there is a recent thread on these forums which discusses an aspect of margin collapsing not included in Bruno's examples.

Ornette
Offline
Enthusiast
Last seen: 8 years 13 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Margin collapse will not occur?!?

Hugo,

No, this wasn't quite just to prove a point. It was causing me some real layout problems. Not only do tables not collapse their margins, but left & right margins will cause a 100% width table to reduce its size to fit within a container - as I say, 'margin-box' model. I discovered at the end of my last thread:

I could have forgotten about it having figured a work-around (use padding on the containing element + 'border-box' mode) but now discovering that vertical margins are gonna be a problem I am quite peeved. Evil Your work around wont quite work for me, because - what happens if I wanna put things between the tables in the 'div' columns? All I am trying to do is create a simple, universal template that a end-user does not have to worry about, but simply use and get the results that they expect. Obviously this is a pipe dream to some extents what with IE's creative CSS implementations, but hey - aim to the highest common denominator, thats what I think. Having workarounds is all well & good if I'm gonna edit it - but not for 'anyone else' (i.e. Mr. Frontpage / Dreamweaver)

The current issue for me is on this link here:

- I want the gap between the tables (outlined with red dashed border) to close between the div containers (outlined in thin dotted line). Thats what I thought 'margin-collapse' was gonna do for me. Because, what if I wanted 20px margin on the tables in the left-hand column and (due to that column having actual, worthfullness content) as opposed to my right-hand column having 10px margin (just full of anciliary information - links, reference material, who knows, even a XHTML validation icon!!?? Laughing out loud )

Then, what would happen I would get lopsidedness, with the right hand column higher than the left hand column.

How do I solve that? Admittedly, Gary did give me a clue earlier, but I have not followed that up just yet:
kk5st wrote:
As to margin-collapse, Firefox tables have no collapsable margins in the default, while the div margins are all prevented from collapse by borders. IE improperly collapses protected margins if the protected element has hasLayout==true.

Hmmm.... :-k

Chris..S wrote:
There is no need to imply any maliciousness...

Whoa! it was tongue-in-cheek! Mozilla has no corporate identity to uphold, unlike MS! Although... it is possible M$-hating open-source coders decided to mess up tables whilst no-one was looking... you never know! Wink

Well, Chris, I would love to do my own Bugzilla report on this! Can you point me in right direction/give pointers on how to go about this?

Thanks!

PS Which one is the 'recent thread on margin collapsing'?

[/][/][/][/]
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Margin collapse will not occur?!?

Recent thread which discusses margin collapsing, or more properly interactions between IE default spacing between block elements when one of those elements hasLayout.

Bruno's examples are more concerned with margin collapsing when a margin value is specified. For IE there is a difference in behaviour between default spacing and specified margins, even when the amount specified is approx. the same as the default.

Bruno's links from the above thread (thanks to Gary).

kk5st wrote:
Bruno Fassino has made a few notes regarding IE/Win: Margin collapsing and hasLayout. He followed up with a fairly exhaustive set of collapsing margin examples

Mozilla Bugzilla. Follow the instructions. I checked last night and didn't see this reported anywhere, however my check wasn't exhaustive and they do ask that you use the latest build before reporting - something that I don't have access to (I'm still running 1.0.7 Smile).

Also, I have updated my example. I don't find that left and right margins are included in the table width. The table has a specified with of 300px. That is its width. The margin-left value is 150px and that is how far the table is indented from the left edge of its container.

As always, once you understand how the different browsers work it is pretty easy to come up with a set of styles that will work cross browser.

e.g.

* {margin: 0; padding: 0;}
h4,h5,h6,p,ul,ol,li,table {margin-top: 1em}

This removes the necessity to collapse margins - as there will (mostly) never be two adjacent vertical margins. Which will go along way to overcoming both the problems you have discovered w.r.t table margins and IE's inability to collapse margins across hasLayout elements.

Ornette
Offline
Enthusiast
Last seen: 8 years 13 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Margin collapse will not occur?!?

Chris,

Chris..S wrote:
I don't find that left and right margins are included in the table width. The table has a specified with of 300px. That is its width. The margin-left value is 150px and that is how far the table is indented from the left edge of its container.

Arrrh man, I keep having to repeat my circumstances!

In Mozilla only (Not IE, I know that IE improperly expands the size of the container), for the first example note how the internal tables (both with a width of 100%) fit perfectly within the div containers (set at 66% & 34% respectively).

Note that the tables BOTH have a margin of 10px.

Now look at the second example, this time with the 10px margin remove, notice how that the internal tables have increased in size by the amount of margin removed.

See? 'Margin-box' model. Thank you.

Chris..S wrote:
Recent thread which discusses margin collapsing...

Bruno's links from the above thread (thanks to Gary).

kk5st wrote:
Bruno Fassino has made a few notes regarding IE/Win: Margin collapsing and hasLayout. He followed up with a fairly exhaustive set of collapsing margin examples

Thanks for that and I will look in more detail, however what I have now noticed I am not sure any of that relates to this:

I have now two more 'margin-collapsing' examples (again, please look in Mozilla only, I'm not concerned about IE's issues just yet):

Excellent, margins how I want them. Now look at this:

What???????????
What am I supposed to do now?

[/][/][/][/]
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Margin collapse will not occur?!?

It does seem like an up hill struggle. Smile

I have only been looking in FF. I haven't looked at your pages in IE at all.

Did you take a look at my example page? Open it in FF and then load the CSS into the sidebar with EditCSS (if you can't do this you should install the extensions EditCSS and AllInOneSidebar).

You should see that the table width is 300px as specified and the margin is separate. Now, edit the table width to 100% and see what happens. It correctly gets set to 100% and spills over the right hand edge of #page (if you have a widescreen you may need to give #page a background or right border to see this) or use WebDev Outline, block level elements to see where its right border is.

The differences between my example and yours are due to your tables being within a table cell. I think its the table cell that is causing the behaviour that you see. The browser is struggling to expand the cell to contain the table and its margin and it is allowed to make its own decisions on how to handle this. So, really, I don't think there is a problem with horizontal margins and table width.

For your last question. A float establishes a new block formatting context and special rules apply to how the margins of elements which establish new block formatting contexts collapse, refer W3c CSS2.1 Collapsing Margins, in particular the second dot point in the list.

Quote:
Vertical margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

If you float the left column, left and the right column right both columns will behave in the same manner. Also this is the only way to prevent IEs 3px jog from ocurring.

Ornette
Offline
Enthusiast
Last seen: 8 years 13 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Margin collapse will not occur?!?

Chris,

Yes I did see your table layout and it was a little bamboozling for me but I'll take closer look soon (probably at same time I check out all that margin-collapse info Laughing out loud )

Unfortunate to learn about the new rules on margins and floats. :roll:
Honestly.

Are there any ideas on how I could work around this please? I'd really like to know.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Margin collapse will not occur?!?

It shouldn't be bamboozling - try this one, the table has been simplified. I even have grid lines telling you what the pixel dimensions are - just have the table style to hand.

For getting it to work, best I can think of right now is the simplification of margins I posted earlier.

Ornette
Offline
Enthusiast
Last seen: 8 years 13 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Margin collapse will not occur?!?

Bugzilla filed:
Bug 327277, 15th Feb 2006

Is a duplicate of
Bug 87277, 22nd June 2001

Not resolved after all these years?

Chris..S wrote:
For getting it to work, best I can think of right now is the simplification of margins I posted earlier.

What?
You posted 4 links, one to Bruno Fassino's home page, one to Bruno's page on 'hasLayout' & margin collapsing, another page of his featuring various margin collapse test cases, and 4thly, a link to the other thread previously mentioned.

I'm afraid none of those links touch upon what I have asked. I want to know how I can cause margin collapse to occur between a containing element and its child elements when the containing element has been floated.

Can any one offer any ideas, please?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Margin collapse will not occur?!?

Chris..S wrote:

* {margin: 0; padding: 0;}
h4,h5,h6,p,ul,ol,li,table {margin-top: 1em}

This removes the necessity to collapse margins - as there will (mostly) never be two adjacent vertical margins. Which will go along way to overcoming both the problems you have discovered w.r.t table margins and IE's inability to collapse margins across hasLayout elements.

This bit.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Margin collapse will not occur?!?

Ornette wrote:
Bugzilla filed:
Bug 327277, 15th Feb 2006

Is a duplicate of Bug 87277, 22nd June 2001

Not resolved after all these years?

So it seems. 4.5 years! That explains why I didn't spot it on my search, it returned so many other bugs, presumably the more recent first.

Ornette
Offline
Enthusiast
Last seen: 8 years 13 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Margin collapse will not occur?!?

    Chris..S wrote:
    * {margin: 0; padding: 0;}
    h4,h5,h6,p,ul,ol,li,table {margin-top: 1em}
    

    This removes the necessity to collapse margins - as there will (mostly) never be two adjacent vertical margins....
I got a better, official solution.

.contentcolumn .marginwrap:first-child,
.navcolumn .marginwrap:first-child
			{margin-top: 0px;}

.contentcolumn .marginwrap:last-child,
.navcolumn .marginwrap:last-child
			{margin-bottom: 0px;}

An official solution to a "no-collapse-on-floated-elements" CSS2.1 spec.

[/][/]
Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Margin collapse will not occur?!?

Ornette wrote:
An official solution to a "no-collapse-on-floated-elements" CSS2.1 spec.

How does IE cope with that?

Ornette
Offline
Enthusiast
Last seen: 8 years 13 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Margin collapse will not occur?!?

OK whats happened is now I've gone beyond what will or wont work in IE. I've even gone beyond what will work in Firefox (bugzilla #87277)

I've kinda settled on a finished template now, it doens't do everything quite how I want it, but it'll do. All I'm doing now is solving those niggles, as per the letter of the law of CSS2.1

It may not even render properly in either browser for another couple of years - but hey - gotta be optimistic...