468,766 Members | 1,297 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,766 developers. It's quick & easy.

IE 7 bug: declared width for table cell wrongly affects inner block

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/

Jun 27 '08 #1
2 3594
On 2008-05-01, Jukka K. Korpela <jk******@cs.tut.fiwrote:
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
CSS 2.1 10.3.3 is very clear that the div's used width should in this
case (since all horizontal properties are auto) be equal to the width of
its containing block.

The containing block is formed by the content edge of the table cell.

So what is its width?

The computed value of the table-cell's width is "100px". But the used
value of its width is the width required by the long word (it depends on
your font, about 280px in my browser).

My hypothesis for the cause of the bug here is that when IE7 comes to
implement the rules in 10.3.3 for the div, it looks up the computed
width on the td and so gets 100px as the containing block width. It
should instead be looking up the used width [1].

It then solves the equation in 10.3.3 for 100px giving the div a used
negative right margin of about -180px.

So where does the spec say that "width of the containing block" in
10.3.3 means used width and not computed width"?

Well 10.1 says:

2. [..] the containing block is formed by the content edge of the
nearest block-level [p. 117], table cell or inline-block ancestor
box.

"Content edge" is defined in 8.1, as the rectangle given by the "width"
and "height" of the box.

A bit later in 8.1 it says:

The dimensions of the content area of a box — the content width and
content height — depend on several factors: whether the element
generating the box has the 'width' or 'height' property set, whether
the box contains text or other boxes, whether the box is a table, etc.
Box widths and heights are discussed in the chapter on visual
formatting model details [p. 157] .

Clearly this is the used width and height they're talking about, not the
computed width and height.

[1] You possibly get this only in strict mode because it has got conflated
internally within IE with the need not to honour percentages of auto
height table cells in strict mode. In quirks mode browsers will allow
percentage heights of auto height cells for which they have to use
"used" values. In strict they should ignore such percentages.
Jun 27 '08 #2
On May 1, 9:40 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Demo:http://www.cs.tut.fi/~jkorpela/www/width-bug.html
IE 7 formats the box content and observes the long word, which is too
long for that width. It expands the cell to accommodate the long box.
However, once the box has tricked the cell into expanding, it
contracts suddenly, leaving the cell expanded and does a little
contracting trick of its own. Only IE has a sufficiently jokey nature
to pull this one off. It is a real card!
Jun 27 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Neil Zanella | last post: by
7 posts views Thread by delerious | last post: by
2 posts views Thread by steventhrasher42 | last post: by
36 posts views Thread by phil-news-nospam | last post: by
15 posts views Thread by john | last post: by
5 posts views Thread by Taras_96 | last post: by
1 post views Thread by CARIGAR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.