Table Margin Inside Multiple Div Problem on IE

[tbcarver]

I have a table that I am trying to add a bottom margin to in IE. I
have found that if the table is inside more than 1 div then the shape
of the containing div collapses.

Please look at this example in IE and then in FireFox:

Table inside 1 Div:
http://hughaxton.com/NewsGroups/IE1DivTable.html

Table inside 2 Divs:
http://hughaxton.com/NewsGroups/IE2DivsTable.html

I could not find any information about this problem. Your help is
appreciated.

Thanks,
Tyler

[logic_earth]

give div2 a border or padding

http://www.complexspiral.com/publica...psing-margins/

[tbcarver]

This issue seems to be more of a bug than a feature. It does not seem
to fall under the Uncollapsing Margins. As this example shows adding
padding or borders has no affect upon the issue.

http://hughaxton.com/NewsGroups/BorderIE2DivsTable.html

[Els]

tb******@yahoo.com wrote:

This issue seems to be more of a bug than a feature. It does not seem
to fall under the Uncollapsing Margins. As this example shows adding
padding or borders has no affect upon the issue.

http://hughaxton.com/NewsGroups/BorderIE2DivsTable.html

Please quote what you are replying to? I now had to find out what you
were on about from previous postings.
And don't blame it on Google Groups, as you can read here:
http://www.safalra.com/special/googlegroupsreply/

Anyway, your problem is that the inner div collapses when placed
between the table and the outer div.

What is happening, is the inner div letting the margin of the table go
outside its border.

Just set a height to the inner div (any height, I usually use 1%, but
you have to hide that style from other browsers), and it conforms to
what Firefox and Opera do.
Now you'll probably ask why the outer div when it was by itself,
didn't show the same problem. That's because you set a width on it.
Either width or height makes the box encompass its contents, whether
those contents include elements with margins, or even floats. In WinIE
that is!

HTH

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[boclair]

tb******@yahoo.com wrote:

I have a table that I am trying to add a bottom margin to in IE. I
have found that if the table is inside more than 1 div then the shape
of the containing div collapses.

Please look at this example in IE and then in FireFox:

Table inside 1 Div:
http://hughaxton.com/NewsGroups/IE1DivTable.html

Table inside 2 Divs:
http://hughaxton.com/NewsGroups/IE2DivsTable.html

Collapsing margin between table and inner div.

You might add the rule zoom:1 to the class selector wrapperInside, or

you might add the following the non rule _height:1px to the class
selector wrapperInside. Note the underscore (probably on the wild side)

Louise

[dwight.stegall]

Why use tables at all? It is very easy to simulate a table with divs
and floats like I have here.

http://dwight.tendirect.com/colorsafe.htm

[Barbara de Zoete]

On 17 Aug 2005 09:01:13 -0700, <dw************@gmail.com> wrote:

Why use tables at all? It is very easy to simulate a table with divs
and floats

Yeah, well, that's all wounderful of course, but the first 'rule' (if one can
use that word) is to use elements to markup content that have some meaning, are
semantic in some way. So using a table (and the related elements) to markup
tabular data is _always_ preferred over using bogus markup withs divs, spans and
styles to emulate a table for tabular data.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

[tbcarver]

Els wrote:

Please quote what you are replying to? I now had to find out what you
were on about from previous postings.
And don't blame it on Google Groups, as you can read here:
http://www.safalra.com/special/googlegroupsreply/
Thanks for the tip
Els wrote: Just set a height to the inner div (any height, I usually use 1%, but
you have to hide that style from other browsers), and it conforms to
what Firefox and Opera do.
Awesome! This did fix the issue.
http://hughaxton.com/NewsGroups/HeightIE2DivsTable.html

Els wrote: Now you'll probably ask why the outer div when it was by itself,
didn't show the same problem. That's because you set a width on it.
Either width or height makes the box encompass its contents, whether
those contents include elements with margins, or even floats. In WinIE
that is!

This is true for the inner div, but not the outer. The outer always
seems to work even without the height or width. (I added the width to
the sample for easy of use to the reader)
http://hughaxton.com/NewsGroups/IE2DivsTable2.html

Thanks for help.

[tbcarver]

boclair wrote:

You might add the rule zoom:1 to the class selector wrapperInside, or
Yes that worked!

boclair wrote: you might add the following the non rule _height:1px to the class
selector wrapperInside. Note the underscore (probably on the wild side)

Worked also, but very wild side.

[tbcarver]

Barbara de Zoete wrote:

On 17 Aug 2005 09:01:13 -0700, <dw************@gmail.com> wrote:

Why use tables at all? It is very easy to simulate a table with divs
and floats

Yeah, well, that's all wounderful of course, but the first 'rule' (if one can
use that word) is to use elements to markup content that have some meaning, are
semantic in some way. So using a table (and the related elements) to markup
tabular data is _always_ preferred over using bogus markup withs divs, spans and
styles to emulate a table for tabular data.

Well said. I need the table for tabular data.

[Els]

tb******@yahoo.com wrote:

Els wrote:

Just set a height to the inner div (any height, I usually use 1%, but
you have to hide that style from other browsers), and it conforms to
what Firefox and Opera do.
Awesome! This did fix the issue.
http://hughaxton.com/NewsGroups/HeightIE2DivsTable.html

Eh.. not quite :-)

Now the margin-collapsing is in action in Opera :-)
Adding a border to the inner div solves that.

Another thing: you have not hidden the height for the inner div from
other browsers than WinIE. In this particular case it doesn't matter,
but in many other instances it's important that other browsers won't
honour the 1% or 1px height.

You can hide it by adding an underscore to it, like so:

_height:1%; /* the validator doesn't like this hack,
but it is valid CSS2.1 */

or with this hack:

/* hiding from IE Mac \*/
* html .wrapperInside{
height:1%;
}
/* end hide from IE Mac */
Els wrote:

Now you'll probably ask why the outer div when it was by itself,
didn't show the same problem. That's because you set a width on it.
Either width or height makes the box encompass its contents, whether
those contents include elements with margins, or even floats. In WinIE
that is!
This is true for the inner div, but not the outer. The outer always
seems to work even without the height or width. (I added the width to
the sample for easy of use to the reader)
http://hughaxton.com/NewsGroups/IE2DivsTable2.html

I meant when it was the only div. When you take out the inner div from
the HTML, the outer div collapses just the same in IE.

This effect only happens with the div that's the direct parent of a
table. If you'd substitute the table for a div (with the same margin
and border properties), the parent div would not collapse in the
absence of width and height.

Now, why exactly this difference between the parent of a div and the
parent of a table, I don't know :-)
Thanks for help.

You're welcome :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Beatles - Lovely Rita