DIV borders different in IE7 when in td

[Davo]

Hello,

I've created a table with two columns, the second column is fixed width at
64px and contains a div, the div has a border and contains some text, the
text renders to larger than 64px. This is a cut down version of a more
complex page to illustrate the problem so just changing it to divs or some
such wont help.

In IE6 and FF2 the div border automatically stretches to contain the text,
in IE7 the div is set to 64px and stays there, I don't think this is the
correct behaviour, but I can't seem to find another mention of this problem,
could anyone give me some pointers?

tia,
Dave

[Davo]

oops - its at http://members.iinet.com.au/~d****@powerup.com.au/

[Patricia Aldoraz]

On Apr 29, 11:00 am, "Davo" <[e-mail]:

oops - its at http://members.iinet.com.au/~[e-mail]/

Not found. Try using em instead of pixels for your font-size units

[Davo]

>

Not found. Try using em instead of pixels for your font-size units

Not sure what you received it didn't seem to be what I sent try
http://tinyurl.com/6gnpuc
if you're curious. However your em suggestion seems to have fixed it, thanks
very much. It was on my list of things to change it to ems, but wasn't a
high priority, would you have a reason?

thanks again,
Dave

[Davo]

I spoke to soon, changing to em just hid the problem, effectively changing
the size to a couple of hundred px. Any other ideas are welcome.

[Jukka K. Korpela]

Scripsit Davo:

I spoke to soon, changing to em just hid the problem, effectively
changing the size to a couple of hundred px. Any other ideas are
welcome.

Try learning how to post to Usenet.

Try learning how to post to the right group. This group is for HTML, not
CSS.

Decide whether you want to work in "quirks mode" or not. This depends on
whether you are working with some existing mess or creating a new page.
See
http://www.cs.tut.fi/~jkorpela/quirks-mode.html

Specifically, in "quirks mode", a block with declared width may expand
when overflow occurs. By the specifications, it does not. (By default,
the textual or other content just overflows, outside the block's box and
any eventual border.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Davo]

Specifically, in "quirks mode", a block with declared width may expand

when overflow occurs. By the specifications, it does not. (By default, the
textual or other content just overflows, outside the block's box and any
eventual border.)

We're not in quirks mode. The div block should inherit the container box
size is my understanding, after having a little reread of the box model docs
I still think that is how it should work. In both FF2 and IE6 the div
inherited the container (td) width when the contained text expands the block
(which is how it should work), in IE7 the behaviour seems to have changed.

Perhaps *you* should think a little before shooting off your mouth ;-), if
you have something to contribute then thanks, otherwise perhaps stick to
areas you know.

cheers,
Dave

[Ben C]

On 2008-04-29, Jukka K. Korpela <jk******@cs.tut.fiwrote:

Scripsit Davo:

>I spoke to soon, changing to em just hid the problem, effectively
changing the size to a couple of hundred px. Any other ideas are
welcome.

Try learning how to post to Usenet.

Try learning how to post to the right group. This group is for HTML, not
CSS.

Decide whether you want to work in "quirks mode" or not. This depends on
whether you are working with some existing mess or creating a new page.
See
http://www.cs.tut.fi/~jkorpela/quirks-mode.html

Specifically, in "quirks mode", a block with declared width may expand
when overflow occurs. By the specifications, it does not. (By default,
the textual or other content just overflows, outside the block's box and
any eventual border.)

I have never seen that quirk, but that's probably because I never run
IE.

OP's actual example was different from his description. This is his URL:
http://members.iinet.com.au/~d****@powerup.com.au/

He's actually set the 64px on the TD, not on the DIV.

Davo:

Table cells should never go narrower than the minimum width required by
their contents. Normal flow block boxes (like default DIV) get the width
you set, overflowing if necessary. If you don't set a width then they
take all the width available. That is why the blue border fills the TD
and is wider than 64px.

This is all specified and should work properly in strict mode.

If IE7 is making your table-cell 64px wide that looks very wrong and
sounds like a regression from IE6. If it's a regression it can't be
justified as a "backwards compatible quirk" either.

CSS 2.1 17.5.2.2 is the relevant section of the spec. Although the
automatic table layout algorithm is not "normative", I can't see any
logical reason for IE7 to be giving you the behaviour you report. Report
it to Microsoft as a bug.

[Ben C]

On 2008-04-29, Davo <wa******@hotmail.comwrote:

>Specifically, in "quirks mode", a block with declared width may expand
when overflow occurs. By the specifications, it does not. (By default, the
textual or other content just overflows, outside the block's box and any
eventual border.)

We're not in quirks mode.

Good. Keep it that way.

The div block should inherit the container box size is my
understanding, after having a little reread of the box model docs I
still think that is how it should work.

No. Width is not inherited. But the "used value" (the one the browser
works out and actually uses) for width: auto on a normal flow block is
calculated so that the box's horiziontal outer margin edges fill all the
space available.

In both FF2 and IE6 the div inherited the container (td) width when
the contained text expands the block (which is how it should work)

It's not inheritance. But the behaviour you see in FF2 is correct.

in IE7 the behaviour seems to have changed.

I think you found a new bug.

[Ben C]

On 2008-04-29, Ben C <sp******@spam.eggswrote:
[...]

OP's actual example was different from his description. This is his URL:
http://members.iinet.com.au/~d****@powerup.com.au/

He's actually set the 64px on the TD, not on the DIV.

Looking at his description again I think he actually said that. My
mistake.

[Davo]

CSS 2.1 17.5.2.2 is the relevant section of the spec. Although the
automatic table layout algorithm is not "normative", I can't see any
logical reason for IE7 to be giving you the behaviour you report. Report
it to Microsoft as a bug.

Thanks Ben, not the answer I was hoping for though :-). I've been playing
some more and if I change the doctype to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
then it works, over here http://hsivonen.iki.fi/doctype/ it describes the
doctypes and this shouldn't make a difference, or is this another quirks
mode?

cheers,
Dave

[Jukka K. Korpela]

Scripsit Davo:

>Specifically, in "quirks mode", a block with declared width may
expand when overflow occurs. By the specifications, it does not. (By
default, the textual or other content just overflows, outside the
block's box and any eventual border.)

We're not in quirks mode.

You're still not posting properly (lack of attribution), though perhaps
getting better.

You're still in a wrong group.

The div block should inherit the container
box size is my understanding,

You understanding of _inheritance_ is then flawed. That's not uncommon
of course; only perhaps 1 author out of 100 understands the concept
correctly. But we're in a wrong group, and you need to read a good CSS
tutorial before you can start understanding explanations.

In both FF2 and
IE6 the div inherited the container (td) width when the contained
text expands the block (which is how it should work), in IE7 the
behaviour seems to have changed.

This does not happen in quirks mode in IE 7, so they probably regard
this as a fix. You're probably right in assuming that this is wrong, but
your initial explanations were fairly misleading (like speaking about
"fixed width" cell and referring to borders, as if the borders and not
the block size were the issue - and not posting a URL initially).

In fact, the IE 7 bug may well result from a misunderstanding of
inheritance...

Besides, that's a CSS issue. This is an HTML group.

Perhaps *you* should think a little before shooting off your mouth
;-), if you have something to contribute then thanks, otherwise
perhaps stick to areas you know.

Would really consider honoring a person who makes such a personal
accusation or at least nasty remarks against a named person in public,
himself hiding behind a nickname like a coward?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Davo]

>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

nope, my mistake it is in quirks mode now.

[Ben C]

On 2008-04-29, Davo <wa******@hotmail.comwrote:

>

>CSS 2.1 17.5.2.2 is the relevant section of the spec. Although the
automatic table layout algorithm is not "normative", I can't see any
logical reason for IE7 to be giving you the behaviour you report. Report
it to Microsoft as a bug.

Thanks Ben, not the answer I was hoping for though :-). I've been playing
some more and if I change the doctype to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
then it works, over here http://hsivonen.iki.fi/doctype/ it describes the
doctypes and this shouldn't make a difference, or is this another quirks
mode?

I don't know what you've run into here. Perhaps this is a quirk after
all, but it sounds from the description more like a new bug in IE7.

But I may easily be confused about exactly what you're seeing here.

[Davo]

I don't know what you've run into here. Perhaps this is a quirk after

all, but it sounds from the description more like a new bug in IE7.

I'll report it to Microsoft and see what happens, if I get a result I'll
report it here, in the mean time I'll fiddle a bit more. Thanks for your
help, if you like send me your email address (my email's in the from field)
and I'll keep you posted.

cheers,
Dave

[Jukka K. Korpela]

Sub titulo "Re: DIV borders different in IE7 when in td"
scripsit Ben C:

Table cells should never go narrower than the minimum width required
by their contents. Normal flow block boxes (like default DIV) get the
width you set, overflowing if necessary.

This seems to be the heart of the matter, and I'm trying to get a real
discussion started, by moving the discussion to the right group
(c.i.w.a.stylesheets) and changing the Subject line.

It seems to me that IE 7, specifically in "standards mode" (!),
misbehaves when a table cell has a declared width but the actual width
is larger, due to the requirements of its content. When the <tdelement
contains a <divelement, IE 7 expands the <tdbut not the <divinside
it. This can be seen from the background or border of the <div>, if set,
and even the formatting of its textual content.

However, width calculation is mystic area in CSS, so it might be
possible that under some weird interpretation, IE 7 is "right", though I
cannot see how.

Demo: http://www.cs.tut.fi/~jkorpela/www/width-bug.html

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/